mozilla-central: testing/web-platform/tests/scroll-animations/css/scroll-timeline-in-container-query.html@b01190f141a12f4b506acb1f4476561c4b0f2407

<!DOCTYPE html>
<title>scroll-timeline and container queries</title>
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-shorthand">
<link rel="help" src="https://drafts.csswg.org/css-conditional-5/#container-queries">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
  #outer {
    height: 100px;
    width: 150px;
  }

  #container {
    container-type: size;
  }

  #scroller {
    overflow: auto;
    width: auto;
    height: 100px;
  }

  #scroller > div {
    height: 200px;
  }

  /* This does not apply initially. */
  @container (width > 200px) {
    #scroller {
      scroll-timeline: --timeline;
    }
  }

  @keyframes recolor {
    from { background-color: rgb(100, 100, 100); }
    to { background-color: rgb(200, 200, 200); }
  }

  #element {
    height: 10px;
    width: 10px;
    animation: recolor 10s linear;
    animation-timeline: --timeline;
    background-color: rgb(0, 0, 0);
  }
</style>
<div id=outer>
  <div id=container>
    <div id=scroller>
      <div></div>
      <div id=element></div>
    </div>
  </div>
</div>
<script>
  setup(assert_implements_animation_timeline);

  promise_test(async (t) => {
    element.offsetTop;
    scroller.scrollTop = (scroller.scrollHeight - scroller.clientHeight) / 2;
    await waitForNextFrame();
    // Unknown timeline, time held at zero.
    assert_equals(getComputedStyle(element).backgroundColor, 'rgb(100, 100, 100)');
    // This causes the timeline to be created.
    outer.style.width = '250px';
    // Check value with getComputedStyle immediately, which is the same
    // value since the scroll timeline is inactive before the next frame.
    assert_equals(getComputedStyle(element).backgroundColor, 'rgb(100, 100, 100)');
    // Also check value after one frame.
    await waitForNextFrame();
    assert_equals(getComputedStyle(element).backgroundColor, 'rgb(150, 150, 150)');
  }, 'Timeline appearing via container queries');
</script>

author	Florian Quèze <florian@queze.net>
	Tue, 08 Jul 2025 20:48:53 +0000 (10 hours ago)
changeset 795809	b01190f141a12f4b506acb1f4476561c4b0f2407
parent 773472	e3819953cfc584aa682122b7aa3c5bc5bc1fb2d3
permissions	-rw-r--r--