| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| @keyframes anim-missing-from { to { width: 200px; height: 200px; } } |
| @keyframes anim-missing-to { from { left: 100px; } } |
| @keyframes anim-missing-both { 50% { left: 100px; } } |
| @keyframes anim-missing-compositor { 100% { opacity: 0.0; } } |
| @keyframes anim-missing-ems { from { top: 1em; } } |
| |
| .target { |
| visibility: hidden; |
| position: absolute; |
| width: 100px; |
| height: 100px; |
| background-color: rgb(0, 0, 0); |
| left: 20px; |
| top: 50px; |
| font-size: 10px; |
| opacity: 1.0; |
| } |
| |
| .target.changed { |
| width: 600px; |
| height: 300px; |
| background-color: rgb(120, 160, 200); |
| left: 200px; |
| opacity: 0.5; |
| } |
| |
| #target1 { animation: anim-missing-from 4s -1s linear paused; } |
| #target2 { animation: anim-missing-to 4s -1s linear paused; } |
| #target3 { animation: anim-missing-both 4s -1s linear paused; } |
| #target4 { animation: anim-missing-ems 4s -1s linear paused; } |
| #target5 { animation: anim-missing-compositor 2s -1s linear paused; } |
| #target6 { animation: anim-missing-from 1e10s linear; } |
| |
| </style> |
| <div id="target1" class="target"></div> |
| <div id="target2" class="target"></div> |
| <div id="target3" class="target"></div> |
| <div id="target4" class="target"></div> |
| <div id="target5" class="target"></div> |
| <div id="target6" class="target"></div> |
| <script> |
| test(function() { |
| assert_equals(parseInt(getComputedStyle(target1).width), 125); |
| assert_equals(parseInt(getComputedStyle(target1).height), 125); |
| target1.classList.add('changed'); |
| assert_equals(parseInt(getComputedStyle(target1).width), 500); |
| assert_equals(parseInt(getComputedStyle(target1).height), 275); |
| }, "Check that animations missing 'from' keyframes are responsive to underlying style changes"); |
| |
| test(function() { |
| assert_equals(parseInt(getComputedStyle(target2).left), 80); |
| target2.classList.add('changed'); |
| assert_equals(parseInt(getComputedStyle(target2).left), 125); |
| }, "Check that animations missing 'to' keyframes are responsive to underlying style changes"); |
| |
| test(function() { |
| assert_equals(parseInt(getComputedStyle(target3).left), 60); |
| target3.classList.add('changed'); |
| assert_equals(parseInt(getComputedStyle(target3).left), 150); |
| }, "Check that animations missing both 'from' and 'to' keyframes are responsive to underlying style changes"); |
| |
| test(function() { |
| assert_equals(parseInt(getComputedStyle(target4).top), 20); |
| target4.style.fontSize = '90px'; |
| assert_equals(parseInt(getComputedStyle(target4).top), 80); |
| }, "Check that animations with neutral keyframes are responsive to font size changes"); |
| |
| test(function() { |
| assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.5, 0.001); |
| target5.classList.add('changed'); |
| assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.25, 0.001); |
| }, "Check that composited animations with neutral keyframes are responsive to underlying style changes"); |
| |
| var async = async_test("Check that running animations with neutral keyframes are responsive to style changes"); |
| requestAnimationFrame(function() { |
| assert_less_than(parseInt(getComputedStyle(target6).width), 200); |
| requestAnimationFrame(function() { |
| target6.classList.add('changed'); |
| assert_greater_than(parseInt(getComputedStyle(target6).width), 200); |
| async.done(); |
| }); |
| }); |
| </script> |
