responsive-neutral-keyframes.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/animations/responsive/responsive-neutral-keyframes.html
