1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transitions Test: Transitioning Pseudo Elements</title>
<meta name="assert" content="Test checks that transitions are run on pseudo elements">
<link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
<link rel="help" title="CSS21 - 12.1 The :before and :after pseudo-elements" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
<link rel="help" title="CSS3 Generated and Replaced Content Module" href="http://www.w3.org/TR/css3-content/">
<link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
<meta name="flags" content="dom">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
<script src="./support/helper.js" type="text/javascript"></script>
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
<script src="./support/generalParallelTest.js" type="text/javascript"></script>
<script src="./support/properties.js" type="text/javascript"></script>
<style type="text/css">
#offscreen {
position: absolute;
top: -100000px;
left: -100000px;
width: 100000px;
height: 100000px;
}
</style>
</head>
<body>
<!-- required by testharnessreport.js -->
<div id="log"></div>
<!-- elements used for testing -->
<div id="fixture" class="fixture">
<div class="container">
<div class="transition">Text sample</div>
</div>
</div>
<div id="offscreen"></div>
<!--
SEE ./support/README.md for an abstract explanation of the test procedure
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
-->
<script>
// this test takes its time, give it a minute to run
var timeout = 60000;
setup({timeout: timeout});
var tests = [
{
name: "transition padding-left on :before",
pseudo: 'before',
property: 'padding-left',
flags: {},
from: {'padding-left': '1px', 'content': '""'},
to: {'padding-left': '10px'}
}, {
name: "transition padding-left on :after",
pseudo: 'after',
property: 'padding-left',
flags: {},
from: {'padding-left': '1px', 'content': '""'},
to: {'padding-left': '10px'}
}, {
name: "transition padding-left on :before, changing content",
pseudo: 'before',
property: 'padding-left',
flags: {},
from: {'padding-left': '1px', 'content': '"1"'},
to: {'padding-left': '10px', 'content': '"2"'}
}, {
name: "transition padding-left on :after, changing content",
pseudo: 'after',
property: 'padding-left',
flags: {},
from: {'padding-left': '1px', 'content': '"1"'},
to: {'padding-left': '10px', 'content': '"2"'}
}
];
// general transition-duration
var duration = '2s';
runParallelAsyncHarness({
// array of test data
tests: tests,
// the number of tests to run in parallel
testsPerSlice: 50,
// milliseconds to wait before calling teardown and ending test
duration: parseFloat(duration) * 1000,
// prepare individual test
setup: function(data, options) {
generalParallelTest.setup(data, options);
var styles = {};
styles['.fixture'] = {};
styles['.container'] = data.parentStyle;
styles['.container.to'] = {};
styles['.container.how'] = {};
styles['.transition'] = {};
styles['.transition:' + data.pseudo.name] = data.from;
styles['.transition.how:' + data.pseudo.name] = {transition: 'all ' + duration + ' linear 0s'};
styles['.transition.to:' + data.pseudo.name] = data.to;
generalParallelTest.addStyles(data, options, styles);
},
// cleanup after individual test
teardown: generalParallelTest.teardown,
// invoked prior to running a slice of tests
sliceStart: generalParallelTest.sliceStart,
// invoked after running a slice of tests
sliceDone: generalParallelTest.sliceDone,
// test cases, make them as granular as possible
cases: {
// test property values while transitioning
// values.start kicks off a transition
'values': {
// run actual test, assertions can be used here!
start: function(test, data, options) {
// identify initial and target values
generalParallelTest.getStyle(data);
// make sure values differ, if they don't, the property could most likely not be parsed
assert_not_equals(data.pseudo.from, data.pseudo.to, "initial and target values may not match");
// kick off the transition
generalParallelTest.startTransition(data);
// make sure we didn't get the target value immediately.
// If we did, there wouldn't be a transition!
var current = data.pseudo.computedStyle(data.property);
assert_not_equals(current, data.pseudo.to, "must not be target value after start");
},
done: function(test, data, options) {
// make sure the property's value were neither initial nor target while transitioning
test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'pseudo'));
}
}
},
// called once all tests are done
done: generalParallelTest.done
});
</script>
</body>
</html>
|
