Build fix after r251567.
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-transitions / properties-value-implicit-001.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="utf-8">
5         <title>CSS Transitions Test: font-size-relative properties transition by implicit value change</title>
6         <meta name="timeout" content="long">
7         <meta name="assert" content="Test checks that font-size-relative properties (all em-lengths) run a transition when font-size is changed">
8         <link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions">
9         <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
10         <meta name="flags" content="dom ">
11
12         <script src="/resources/testharness.js" type="text/javascript"></script>
13         <script src="/resources/testharnessreport.js" type="text/javascript"></script>
14
15         <script src="./support/vendorPrefix.js" type="text/javascript"></script>
16         <script src="./support/helper.js" type="text/javascript"></script>
17         <script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
18         <script src="./support/generalParallelTest.js" type="text/javascript"></script>
19         <script src="./support/properties.js" type="text/javascript"></script>
20
21         <style type="text/css">
22             #offscreen {
23                 position: absolute;
24                 top: -100000px;
25                 left: -100000px;
26                 width: 100000px;
27                 height: 100000px;
28             }
29         </style>
30     </head>
31     <body>
32         <!--  required by testharnessreport.js  -->
33         <div id="log"></div>
34         <!--  elements used for testing  -->
35         <div id="fixture" class="fixture">
36             <div class="container">
37                 <div class="transition">Text sample</div>
38             </div>
39         </div>
40         <div id="offscreen"></div>
41
42         <!-- 
43             SEE ./support/README.md for an abstract explanation of the test procedure
44             http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
45          -->
46
47         <script>
48             // see README.md for an explanation of how this test suite works
49             // this suite tests properties that haven't been specified at all
50             // (like background-image and column-rule-width)
51
52             // this test takes its time, give it a minute to run
53             var timeout = 60000;
54             setup({timeout: timeout});
55
56             var tests = getFontSizeRelativePropertyTests();
57             // for testing, limit to a couple of iterations
58             // tests = tests.slice(10, 30);
59             // or filter using one of:
60             // tests = filterPropertyTests(tests, "background-color color(rgba)");
61             // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
62             // tests = filterPropertyTests(tests, /^background-color/);
63
64             // general transition-duration
65             var duration = '2s';
66
67             runParallelAsyncHarness({
68                 // array of test data
69                 tests: tests,
70                 // the number of tests to run in parallel
71                 testsPerSlice: 50,
72                 // milliseconds to wait before calling teardown and ending test
73                 duration: parseFloat(duration) * 1000,
74                 // prepare individual test
75                 setup: function(data, options) {
76                     // as we're dealing with em-based lengths, we need to define a font-size
77                     data.from['font-size'] = '20px';
78                     data.to['font-size'] = '30px';
79                     // remove property from target style so it won't transition on its own
80                     delete data.to[data.property];
81
82                     var styles = {
83                         '.fixture': {},
84
85                         '.container': data.parentStyle,
86                         '.container.to': {},
87                         '.container.how': {},
88
89                         '.transition': data.from,
90                         '.transition.to' : data.to,
91                         '.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'}
92                     };
93
94                     generalParallelTest.setup(data, options);
95                     generalParallelTest.addStyles(data, options, styles);
96                 },
97                 // cleanup after individual test
98                 teardown: generalParallelTest.teardown,
99                 // invoked prior to running a slice of tests
100                 sliceStart: generalParallelTest.sliceStart,
101                 // invoked after running a slice of tests
102                 sliceDone: generalParallelTest.sliceDone,
103                 // test cases, make them as granular as possible
104                 cases: {
105                     // test property values while transitioning
106                     // values.start kicks off a transition
107                     'values': {
108                         // run actual test, assertions can be used here!
109                         start: function(test, data, options) {
110                             // identify initial and target values
111                             generalParallelTest.getStyle(data);
112                             // make sure values differ, if they don't, the property could most likely not be parsed
113                             assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
114                             // kick off the transition
115                             generalParallelTest.startTransition(data);
116
117                             // make sure we didn't get the target value immediately.
118                             // If we did, there wouldn't be a transition!
119                             var current = data.transition.computedStyle(data.property);
120                             assert_not_equals(current, data.transition.to, "must not be target value after start");
121                         },
122                         done: function(test, data, options) {
123                             // make sure the property's value were neither initial nor target while transitioning
124                             test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'transition'));
125                         }
126                     },
127                     // test TransitionEnd events
128                     'events': {
129                         done: function(test, data, options) {
130                             // make sure there were no events on parent
131                             test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
132                             // make sure we got the event for the tested property only
133                             test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
134                         }
135                     }
136                 },
137                 // called once all tests are done
138                 done: generalParallelTest.done
139             });
140         </script>
141     </body>
142 </html>