Google Git
Sign in
chromium / external / w3c / web-platform-tests / f106b6f834f4064db94063e5044df09eaef7df08 / . / css-transitions-1 / events-001.html
blob: e5fa7c86b44f54af6699b9381d50152738132eaf [file] [log] [blame]
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]5 <title>CSS Transitions Test: transitionend event for shorthand property</title>
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]6 <meta name="assert" content="Test checks that all transitionend events are triggered for shorthand property">
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]7 <link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property">
8 <link rel="help" title="5. Transition Events" href="http://www.w3.org/TR/css3-transitions/#transition-events">
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]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
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]15 <script src="./support/vendorPrefix.js" type="text/javascript"></script>
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]16 <script src="./support/helper.js" type="text/javascript"></script>
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]17 <script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
18 <script src="./support/generalParallelTest.js" type="text/javascript"></script>
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]19 <script src="./support/properties.js" type="text/javascript"></script>
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]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>
rodneyrehm1c3285a2013-02-20 15:24:22[diff] [blame]30
31 <script id="metadata_cache">/*
32 {
33 "transition:all, changing padding-left / events": {},
34 "transition:all, changing padding / events": {},
35 "transition:all, changing padding but not padding-bottom / events": {},
36 "transition:padding, changing padding-left / events": {},
37 "transition:padding, changing padding / events": {},
38 "transition:padding, changing padding but not padding-bottom / events": {},
39 "transition:padding-left, changing padding-left / events": {},
40 "transition:padding-left, changing padding / events": {},
41 "transition:padding-left, changing padding but not padding-bottom / events": {}
42 }
43 */</script>
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]44 </head>
45 <body>
46 <!-- required by testharnessreport.js -->
47 <div id="log"></div>
48 <!-- elements used for testing -->
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]49 <div id="fixture" class="fixture">
50 <div class="container">
51 <div class="transition">Text sample</div>
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]52 </div>
53 </div>
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]54 <div id="offscreen"></div>
55
56 <!--
57 SEE ./support/README.md for an abstract explanation of the test procedure
58 http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
59 -->
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]60
61 <script>
62 // For the keyword ‘all’, or if one of the identifiers listed is a shorthand property, implementations must
63 // start transitions for any of its longhand sub-properties that are animatable (or, for ‘all’, all animatable
64 // properties), using the duration, delay, and timing function at the index corresponding to the shorthand.
65
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]66 // this test takes its time, give it a minute to run
67 var timeout = 60000;
68 setup({timeout: timeout});
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]69
70 var tests = [
71 {
72 name: "transition:all, changing padding-left",
73 transitions: 'all .1s linear .01s',
74 from: {'padding-left': '1px'},
75 to: {'padding-left': '10px'},
76 expect: [
77 'padding-left:0.1s'
78 ]
79 }, {
80 name: "transition:all, changing padding",
81 transitions: 'all .1s linear .01s',
82 from: {'padding': '1px'},
83 to: {'padding': '10px'},
84 expect: [
85 'padding-top:0.1s',
86 'padding-right:0.1s',
87 'padding-bottom:0.1s',
88 'padding-left:0.1s'
89 ]
90 }, {
91 name: "transition:all, changing padding but not padding-bottom",
92 transitions: 'all .1s linear .01s',
93 from: {'padding': '1px 1px 1px 1px'},
94 to: {'padding': '10px 10px 1px 10px'},
95 expect: [
96 'padding-top:0.1s',
97 'padding-right:0.1s',
98 'padding-left:0.1s'
99 ]
100 }, {
101 name: "transition:padding, changing padding-left",
102 transitions: 'padding .1s linear .01s',
103 from: {'padding-left': '1px'},
104 to: {'padding-left': '10px'},
105 expect: [
106 'padding-left:0.1s'
107 ]
108 }, {
109 name: "transition:padding, changing padding",
110 transitions: 'padding .1s linear .01s',
111 from: {'padding': '1px'},
112 to: {'padding': '10px'},
113 expect: [
114 'padding-top:0.1s',
115 'padding-right:0.1s',
116 'padding-bottom:0.1s',
117 'padding-left:0.1s'
118 ]
119 }, {
120 name: "transition:padding, changing padding but not padding-bottom",
121 transitions: 'padding .1s linear .01s',
122 from: {'padding': '1px 1px 1px 1px'},
123 to: {'padding': '10px 10px 1px 10px'},
124 expect: [
125 'padding-top:0.1s',
126 'padding-right:0.1s',
127 'padding-left:0.1s'
128 ]
129 }, {
130 name: "transition:padding-left, changing padding-left",
131 transitions: 'padding-left .1s linear .01s',
132 from: {'padding-left': '1px'},
133 to: {'padding-left': '10px'},
134 expect: [
135 'padding-left:0.1s'
136 ]
137 }, {
138 name: "transition:padding-left, changing padding",
139 transitions: 'padding-left .1s linear .01s',
140 from: {'padding': '1px'},
141 to: {'padding': '10px'},
142 expect: [
143 'padding-left:0.1s'
144 ]
145 }, {
146 name: "transition:padding-left, changing padding but not padding-bottom",
147 transitions: 'padding-left .1s linear .01s',
148 from: {'padding': '1px 1px 1px 1px'},
149 to: {'padding': '10px 10px 1px 10px'},
150 expect: [
151 'padding-left:0.1s'
152 ]
153 }
154 ];
155
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]156 // general transition-duration
157 var duration = '0.5s';
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]158
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]159 runParallelAsyncHarness({
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]160 // array of test data
161 tests: tests,
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]162 // the number of tests to run in parallel
163 testsPerSlice: 50,
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]164 // milliseconds to wait before calling teardown and ending test
165 duration: parseFloat(duration) * 1000,
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]166 // the global suite timeout
167 timeout: timeout,
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]168 // prepare individual test
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]169 setup: function(data, options) {
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]170 var styles = {
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]171 '.fixture': {},
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]172
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]173 '.container': {},
174 '.container.to': {},
175 '.container.how': {},
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]176
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]177 '.transition': data.from,
178 '.transition.to' : data.to,
179 '.transition.how' : {transition: data.transitions}
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]180 };
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]181
182 generalParallelTest.setup(data, options);
183 generalParallelTest.addStyles(data, options, styles);
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]184 },
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]185 // cleanup after individual test
186 teardown: generalParallelTest.teardown,
187 // invoked prior to running a slice of tests
188 sliceStart: generalParallelTest.sliceStart,
189 // invoked after running a slice of tests
190 sliceDone: generalParallelTest.sliceDone,
191 // test cases, make them as granular as possible
192 cases: {
193 // test TransitionEnd events
194 'events': {
195 start: function(test, data, options) {
196 // kick off the transition
197 generalParallelTest.startTransition(data);
198 },
199 done: function(test, data, options) {
200 // make sure we got the event for the tested property only
201 test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', data.expect));
202 }
203 }
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]204 },
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]205 // called once all tests are done
rodneyrehm7d221d42013-01-30 23:13:49[diff] [blame]206 done: generalParallelTest.done
rodneyrehm60be5622013-01-16 11:47:37[diff] [blame]207 });
208 </script>
209 </body>
210</html>