[Web Animations] Update WPT tests related to Web Animations and remove imported Mozil...
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-transitions / properties-value-inherit-002.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="utf-8">
5         <title>CSS Transitions Test: transitioning inherited property values</title>
6         <meta name="timeout" content="long">
7         <meta name="assert" content="Test checks that inherited property values that are not transitioned on a parent element start a transition">
8         <link rel="help" title="3. Starting of transitions" href="http://www.w3.org/TR/css3-transitions/#starting">
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             // http://www.w3.org/TR/css3-transitions/#starting
49             // Implementations also must not start a transition when the computed value changes because
50             // it is inherited (directly or indirectly) from another element that is transitioning the same property.
51             // Note: Parent element doesn't transition, so above quote doesn't apply!
52
53             // this test takes its time, give it a minute to run
54             var timeout = 60000;
55             setup({timeout: timeout});
56
57             var tests = getPropertyTests();
58             // for testing, limit to a couple of iterations
59             // tests = tests.slice(10, 30);
60             // or filter using one of:
61             // tests = filterPropertyTests(tests, "background-color color(rgba)");
62             // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
63             // tests = filterPropertyTests(tests, /^background-color/);
64
65             // general transition-duration
66             var duration = '2s';
67
68             runParallelAsyncHarness({
69                 // array of test data
70                 tests: tests,
71                 // the number of tests to run in parallel
72                 testsPerSlice: 50,
73                 // milliseconds to wait before calling teardown and ending test
74                 duration: parseFloat(duration) * 1000,
75                 // prepare individual test
76                 setup: function(data, options) {
77                     // clone and overwrite initial styles to be
78                     // applied to #transition
79                     var inherited = extend({}, data.from);
80                     inherited[data.property] = 'inherit';
81
82                     var styles = {
83                         // as we're testing inheritance, #fixture is our new parent
84                         '.fixture': data.parentStyle,
85                         // all styles including transition apply to to #container so they
86                         // can inherit down to #transition
87                         '.container': extend({}, data.parentStyle, data.from),
88                         '.container.to': data.to,
89                         '.container.how': {},
90                         // #transition only inherits and listens for transition events
91                         '.transition': inherited,
92                         '.transition.to' : {},
93                         '.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'}
94                     };
95
96                     generalParallelTest.setup(data, options);
97                     generalParallelTest.addStyles(data, options, styles);
98                 },
99                 // cleanup after individual test
100                 teardown: generalParallelTest.teardown,
101                 // invoked prior to running a slice of tests
102                 sliceStart: generalParallelTest.sliceStart,
103                 // invoked after running a slice of tests
104                 sliceDone: generalParallelTest.sliceDone,
105                 // test cases, make them as granular as possible
106                 cases: {
107                     // test property values while transitioning
108                     // values.start kicks off a transition
109                     'values': {
110                         // run actual test, assertions can be used here!
111                         start: function(test, data, options) {
112                             // identify initial and target values
113                             generalParallelTest.getStyle(data);
114                             // make sure values differ, if they don't, the property could most likely not be parsed
115                             assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
116                             // kick off the transition
117                             generalParallelTest.startTransition(data);
118
119                             // make sure we didn't get the target value immediately.
120                             // If we did, there wouldn't be a transition!
121                             var current = data.transition.computedStyle(data.property);
122                             assert_not_equals(current, data.transition.to, "must not be target value after start");
123                         },
124                         done: function(test, data, options) {
125                             // make sure the property's value were neither initial nor target while transitioning
126                             test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'transition'));
127                         }
128                     },
129                     // test TransitionEnd events
130                     'events': {
131                         done: function(test, data, options) {
132                             // make sure there were no events on parent
133                             test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
134                             // make sure we got the event for the tested property only
135                             test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
136                         }
137                     }
138                 },
139                 // called once all tests are done
140                 done: generalParallelTest.done
141             });
142         </script>
143     </body>
144 </html>