OLD | NEW |
---|---|
(Empty) | |
1 <!doctype html> | |
2 <style> | |
3 #test { | |
4 height: 100px; | |
5 width: 10%; | |
6 background-color: green; | |
7 } | |
8 | |
9 .animating { | |
10 animation: resize 1s linear; | |
11 } | |
12 | |
13 @keyframes resize { | |
14 to { width: 80vw; } | |
15 } | |
16 | |
17 #result { | |
18 margin-top: 130px; | |
19 } | |
20 | |
21 body { margin: 0; } | |
22 </style> | |
23 <script src="resources/animation-test-helpers.js"></script> | |
24 <script> | |
25 if (window.testRunner) | |
26 testRunner.waitUntilDone(); | |
27 | |
28 // vw: The size of 1vw in pixels. | |
29 function expectedValues(vw) | |
30 { | |
31 return [ | |
32 // [time, element-id, property, expected-value, tolerance] | |
33 [0.5, "test", "width", Math.round((10 + 70 * 0.5) * vw), 100] | |
34 ]; | |
35 }; | |
36 | |
37 function setupTest() | |
38 { | |
39 var width = document.querySelector("html").clientWidth; | |
40 var vw = width / 100; | |
41 document.getElementById('test').className = 'animating'; | |
42 runAnimationTest(expectedValues(vw)); | |
alancutter (OOO until 2018)
2014/04/15 05:34:08
We prefer not to introduce these types of time dep
| |
43 } | |
44 | |
45 window.addEventListener('load', function() { | |
46 window.setTimeout(setupTest, 0); | |
47 }, false); | |
48 </script> | |
49 | |
50 <p>Width should animate from 10% to 80vw.</p> | |
51 <div id="test"></div> | |
52 <div id="result"></div> | |
OLD | NEW |