Chromium Code Reviews| Index: LayoutTests/animations/viewport-unit.html |
| diff --git a/LayoutTests/animations/viewport-unit.html b/LayoutTests/animations/viewport-unit.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..8fbe66a0ce10c55c6d84920700cb8ea7ab576dd4 |
| --- /dev/null |
| +++ b/LayoutTests/animations/viewport-unit.html |
| @@ -0,0 +1,52 @@ |
| +<!doctype html> |
| +<style> |
| + #test { |
| + height: 100px; |
| + width: 10%; |
| + background-color: green; |
| + } |
| + |
| + .animating { |
| + animation: resize 1s linear; |
| + } |
| + |
| + @keyframes resize { |
| + to { width: 80vw; } |
| + } |
| + |
| + #result { |
| + margin-top: 130px; |
| + } |
| + |
| + body { margin: 0; } |
| +</style> |
| +<script src="resources/animation-test-helpers.js"></script> |
| +<script> |
| + if (window.testRunner) |
| + testRunner.waitUntilDone(); |
| + |
| + // vw: The size of 1vw in pixels. |
| + function expectedValues(vw) |
| + { |
| + return [ |
| + // [time, element-id, property, expected-value, tolerance] |
| + [0.5, "test", "width", Math.round((10 + 70 * 0.5) * vw), 100] |
| + ]; |
| + }; |
| + |
| + function setupTest() |
| + { |
| + var width = document.querySelector("html").clientWidth; |
| + var vw = width / 100; |
| + document.getElementById('test').className = 'animating'; |
| + runAnimationTest(expectedValues(vw)); |
|
alancutter (OOO until 2018)
2014/04/15 05:34:08
We prefer not to introduce these types of time dep
|
| + } |
| + |
| + window.addEventListener('load', function() { |
| + window.setTimeout(setupTest, 0); |
| + }, false); |
| +</script> |
| + |
| +<p>Width should animate from 10% to 80vw.</p> |
| +<div id="test"></div> |
| +<div id="result"></div> |