| Index: LayoutTests/animations/responsive-neutral-keyframes.html
|
| diff --git a/LayoutTests/animations/responsive-neutral-keyframes.html b/LayoutTests/animations/responsive-neutral-keyframes.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..eebef7895d61a91f94c0bac3b1871a209971991a
|
| --- /dev/null
|
| +++ b/LayoutTests/animations/responsive-neutral-keyframes.html
|
| @@ -0,0 +1,66 @@
|
| +<!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% { background-color: rgb(200, 100, 40); } }
|
| +
|
| + .target-before {
|
| + width: 100px;
|
| + height: 100px;
|
| + background-color: rgb(0, 0, 0);
|
| + left: 20px;
|
| + }
|
| +
|
| + .target-after {
|
| + width: 600px;
|
| + height: 300px;
|
| + background-color: rgb(120, 160, 200);
|
| + left: 200px;
|
| + }
|
| +
|
| + #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-both 0.2s 2 linear paused forwards; }
|
| +
|
| +</style>
|
| +<div id="target1" class="target-before"></div>
|
| +<div id="target2" class="target-before"></div>
|
| +<div id="target3" class="target-before"></div>
|
| +<div id="target4" class="target-before"></div>
|
| +<script>
|
| + var async1 = async_test("Iteration event fires in running animation");
|
| + var async2 = async_test("Neutral keyframe updates during animation style update");
|
| +
|
| + test(function() {
|
| + assert_equals(parseInt(getComputedStyle(target1).width), 125);
|
| + assert_equals(parseInt(getComputedStyle(target1).height), 125);
|
| + target1.className = 'target-after';
|
| + assert_equals(parseInt(getComputedStyle(target1).width), 500);
|
| + assert_equals(parseInt(getComputedStyle(target1).height), 275);
|
| +
|
| + assert_equals(parseInt(getComputedStyle(target2).left), 80);
|
| + target2.className = 'target-after';
|
| + assert_equals(parseInt(getComputedStyle(target2).left), 125);
|
| +
|
| + assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(100, 50, 20)');
|
| + target3.className = 'target-after';
|
| + assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(160, 130, 120)');
|
| +
|
| + target4.style.animationPlayState = 'running';
|
| +
|
| + target4.addEventListener('animationiteration', function() {
|
| + target4.className = 'target-after';
|
| + async1.done();
|
| + });
|
| +
|
| + target4.addEventListener('animationend', function() {
|
| + assert_equals(getComputedStyle(target4).backgroundColor, 'rgb(120, 160, 200)');
|
| + async2.done();
|
| + });
|
| +
|
| + }, "Check that neutral keyframes are responsive to underlying style changes");
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 851693007:
Prepare for responsive CSS animations. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master