[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-003.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="utf-8">
5         <title>CSS Transitions Test: transitioning implicitly inherited property values</title>
6         <meta name="assert" content="Test checks that implicitly inherited property values that are transitioned on a parent element don't start a transition">
7         <link rel="help" title="3. Starting of transitions" href="http://www.w3.org/TR/css3-transitions/#starting">
8         <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
9         <meta name="flags" content="dom ">
10
11         <script src="/resources/testharness.js" type="text/javascript"></script>
12         <script src="/resources/testharnessreport.js" type="text/javascript"></script>
13
14         <script src="./support/vendorPrefix.js" type="text/javascript"></script>
15         <script src="./support/helper.js" type="text/javascript"></script>
16         <script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
17         <script src="./support/generalParallelTest.js" type="text/javascript"></script>
18         <script src="./support/properties.js" type="text/javascript"></script>
19
20         <style type="text/css">
21             #offscreen {
22                 position: absolute;
23                 top: -100000px;
24                 left: -100000px;
25                 width: 100000px;
26                 height: 100000px;
27             }
28         </style>
29     </head>
30     <body>
31         <!--  required by testharnessreport.js  -->
32         <div id="log"></div>
33         <!--  elements used for testing  -->
34         <div id="fixture" class="fixture">
35             <div class="container">
36                 <div class="transition">Text sample</div>
37             </div>
38         </div>
39         <div id="offscreen"></div>
40
41         <!-- 
42             SEE ./support/README.md for an abstract explanation of the test procedure
43             http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
44          -->
45
46         <script>
47             // http://www.w3.org/TR/css3-transitions/#starting
48             // Implementations also must not start a transition when the computed value changes because
49             // it is inherited (directly or indirectly) from another element that is transitioning the same property.
50             // Note: "indirectly" could mean "font-size" on parent, "em-based" on element
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                     // have parent transition the font-size only
77                     var from = extend({}, data.from, {'font-size': '20px'});
78                     delete from[data.property];
79
80                     var styles = {
81                         // as we're testing inheritance, #fixture is our new parent
82                         '.fixture': data.parentStyle,
83
84                         '.container': from,
85                         '.container.to': {'font-size': '30px'},
86                         // transition font-size on parent
87                         '.container.how': {transition: 'font-size ' + duration + ' linear 0s'},
88
89                         '.transition': data.from,
90                         '.transition.to' : {},
91                         // transition font-size dependent property on child
92                         '.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'}
93                     };
94
95                     generalParallelTest.setup(data, options);
96                     generalParallelTest.addStyles(data, options, styles);
97                 },
98                 // cleanup after individual test
99                 teardown: generalParallelTest.teardown,
100                 // invoked prior to running a slice of tests
101                 sliceStart: generalParallelTest.sliceStart,
102                 // invoked after running a slice of tests
103                 sliceDone: generalParallelTest.sliceDone,
104                 // test cases, make them as granular as possible
105                 cases: {
106                     // test property values while transitioning
107                     // values.start kicks off a transition
108                     'values': {
109                         // run actual test, assertions can be used here!
110                         start: function(test, data, options) {
111                             // identify initial and target values
112                             generalParallelTest.getStyle(data);
113                             // make sure values differ, if they don't, the property could most likely not be parsed
114                             assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
115                             // kick off the transition
116                             generalParallelTest.startTransition(data);
117
118                             // make sure we didn't get the target value immediately.
119                             // If we did, there wouldn't be a transition!
120                             var current = data.transition.computedStyle(data.property);
121                             assert_not_equals(current, data.transition.to, "must not be target value after start");
122                         },
123                         done: function(test, data, options) {
124                             // make sure the property's value were neither initial nor target while transitioning
125                             test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'transition'));
126                         }
127                     },
128                     // test TransitionEnd events
129                     'events': {
130                         done: function(test, data, options) {
131                             // make sure there were no events on parent
132                             test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', "font-size:" + duration));
133                             // make sure we got the event for the tested property only
134                             test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', ""));
135                         }
136                     }
137                 },
138                 // called once all tests are done
139                 done: generalParallelTest.done
140             });
141         </script>
142     </body>
143 </html>