The Tor Browser / file comparison

comparison: layout/style/test/test_flexbox_flex_grow_and_shrink.html

layout/style/test/test_flexbox_flex_grow_and_shrink.html

changeset 2
7e26c7da4463
equal deleted inserted replaced
-1:000000000000 0:fc81cbf16493
1 <!DOCTYPE HTML>
2 <html>
3 <!--
4 https://bugzilla.mozilla.org/show_bug.cgi?id=696253
5 -->
6 <head>
7 <meta charset="utf-8">
8 <title>Test for flex-grow and flex-shrink animation (Bug 696253)</title>
9 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
10 <script type="application/javascript" src="animation_utils.js"></script>
11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
12 <style type="text/css">
13
14 /* Set flex-grow and flex-shrink to nonzero values,
15 when no animations are applied. */
16
17 * { flex-grow: 10; flex-shrink: 20 }
18
19 /* These animations SHOULD affect computed style */
20 @keyframes flexGrowTwoToThree {
21 0% { flex-grow: 2 }
22 100% { flex-grow: 3 }
23 }
24 @keyframes flexShrinkTwoToThree {
25 0% { flex-shrink: 2 }
26 100% { flex-shrink: 3 }
27 }
28 @keyframes flexGrowZeroToZero {
29 0% { flex-grow: 0 }
30 100% { flex-grow: 0 }
31 }
32 @keyframes flexShrinkZeroToZero {
33 0% { flex-shrink: 0 }
34 100% { flex-shrink: 0 }
35 }
36
37 /* These animations SHOULD NOT affect computed style. (flex-grow and
38 flex-shrink are animatable "except between '0' and other values") */
39 @keyframes flexGrowZeroToOne {
40 0% { flex-grow: 0 }
41 100% { flex-grow: 1 }
42 }
43 @keyframes flexShrinkZeroToOne {
44 0% { flex-shrink: 0 }
45 100% { flex-shrink: 1 }
46 }
47 @keyframes flexGrowOneToZero {
48 0% { flex-grow: 1 }
49 100% { flex-grow: 0 }
50 }
51 @keyframes flexShrinkOneToZero {
52 0% { flex-shrink: 1 }
53 100% { flex-shrink: 0 }
54 }
55
56 </style>
57 </head>
58 <body>
59 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
60 <div id="display">
61 <div id="myDiv"></div>
62 </div>
63 <pre id="test">
64 <script type="application/javascript">
65 "use strict";
66
67 /** Test for flex-grow and flex-shrink animation (Bug 696253) **/
68
69 function advance_clock(milliseconds) {
70 SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
71 }
72
73 var display = document.getElementById("display");
74 var div = null;
75 var cs = null;
76 function new_div(style) {
77 return new_element("div", style);
78 }
79 function new_element(tagname, style) {
80 if (div != null || cs != null) {
81 ok(false, "test author forgot to call done_div");
82 }
83 if (typeof(style) != "string") {
84 ok(false, "test author forgot to pass argument");
85 }
86 div = document.createElement(tagname);
87 div.setAttribute("style", style);
88 display.appendChild(div);
89 cs = getComputedStyle(div, "");
90 }
91
92 function done_div() {
93 display.removeChild(div);
94 div = null;
95 cs = null;
96 }
97 // take over the refresh driver
98 advance_clock(0);
99
100 // ANIMATIONS THAT SHOULD AFFECT COMPUTED STYLE
101 // --------------------------------------------
102
103 // flexGrowTwoToThree: 2.0 at 0%, 2.5 at 50%, 10 after animation is over
104 new_div("animation: flexGrowTwoToThree linear 1s");
105 is_approx(cs.flexGrow, 2, 0.01, "flexGrowTwoToThree at 0.0s");
106 advance_clock(500);
107 is_approx(cs.flexGrow, 2.5, 0.01, "flexGrowTwoToThree at 0.5s");
108 advance_clock(1000);
109 is(cs.flexGrow, 10, "flexGrowTwoToThree at 1.5s");
110 done_div();
111
112 // flexShrinkTwoToThree: 2.0 at 0%, 2.5 at 50%, 20 after animation is over
113 new_div("animation: flexShrinkTwoToThree linear 1s");
114 is_approx(cs.flexShrink, 2, 0.01, "flexShrinkTwoToThree at 0.0s");
115 advance_clock(500);
116 is_approx(cs.flexShrink, 2.5, 0.01, "flexShrinkTwoToThree at 0.5s");
117 advance_clock(1000);
118 is(cs.flexShrink, 20, "flexShrinkTwoToThree at 1.5s");
119 done_div();
120
121 // flexGrowZeroToZero: 0 at 0%, 0 at 50%, 10 after animation is over
122 new_div("animation: flexGrowZeroToZero linear 1s");
123 is(cs.flexGrow, 0, "flexGrowZeroToZero at 0.0s");
124 advance_clock(500);
125 is(cs.flexGrow, 0, "flexGrowZeroToZero at 0.5s");
126 advance_clock(1000);
127 is(cs.flexGrow, 10, "flexGrowZeroToZero at 1.5s");
128 done_div();
129
130 // flexShrinkZeroToZero: 0 at 0%, 0 at 50%, 20 after animation is over
131 new_div("animation: flexShrinkZeroToZero linear 1s");
132 is(cs.flexShrink, 0, "flexShrinkZeroToZero at 0.0s");
133 advance_clock(500);
134 is(cs.flexShrink, 0, "flexShrinkZeroToZero at 0.5s");
135 advance_clock(1000);
136 is(cs.flexShrink, 20, "flexShrinkZeroToZero at 1.5s");
137 done_div();
138
139 // ANIMATIONS THAT SHOULD NOT AFFECT COMPUTED STYLE
140 // ------------------------------------------------
141
142 // flexGrowZeroToOne: no effect on computed style. 10 all the way through.
143 new_div("animation: flexGrowZeroToOne linear 1s");
144 is(cs.flexGrow, 10, "flexGrowZeroToOne at 0.0s");
145 advance_clock(500);
146 is(cs.flexGrow, 10, "flexGrowZeroToOne at 0.5s");
147 advance_clock(1000);
148 is(cs.flexGrow, 10, "flexGrowZeroToOne at 1.5s");
149 done_div();
150
151 // flexShrinkZeroToOne: no effect on computed style. 20 all the way through.
152 new_div("animation: flexShrinkZeroToOne linear 1s");
153 is(cs.flexShrink, 20, "flexShrinkZeroToOne at 0.0s");
154 advance_clock(500);
155 is(cs.flexShrink, 20, "flexShrinkZeroToOne at 0.5s");
156 advance_clock(1000);
157 is(cs.flexShrink, 20, "flexShrinkZeroToOne at 1.5s");
158 done_div();
159
160 // flexGrowOneToZero: no effect on computed style. 10 all the way through.
161 new_div("animation: flexGrowOneToZero linear 1s");
162 is(cs.flexGrow, 10, "flexGrowOneToZero at 0.0s");
163 advance_clock(500);
164 is(cs.flexGrow, 10, "flexGrowOneToZero at 0.5s");
165 advance_clock(1000);
166 is(cs.flexGrow, 10, "flexGrowOneToZero at 1.5s");
167 done_div();
168
169 // flexShrinkOneToZero: no effect on computed style. 20 all the way through.
170 new_div("animation: flexShrinkOneToZero linear 1s");
171 is(cs.flexShrink, 20, "flexShrinkOneToZero at 0.0s");
172 advance_clock(500);
173 is(cs.flexShrink, 20, "flexShrinkOneToZero at 0.5s");
174 advance_clock(1000);
175 is(cs.flexShrink, 20, "flexShrinkOneToZero at 1.5s");
176 done_div();
177
178 SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
179
180 </script>
181 </pre>
182 </body>
183 </html>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial