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> |