| <!DOCTYPE html> |
| <title>ScrollTimelines may trigger multiple style/layout passes</title> |
| <link rel="help" src="https://github.com/w3c/csswg-drafts/issues/5261"> |
| <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#avoiding-cycles"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <style> |
| @keyframes expand_width { |
| from { width: 100px; } |
| to { width: 100px; } |
| } |
| @keyframes expand_height { |
| from { height: 100px; } |
| to { height: 100px; } |
| } |
| @scroll-timeline timeline1 { |
| source: selector(#scroller1); |
| time-range: 10s; |
| } |
| @scroll-timeline timeline2 { |
| source: selector(#scroller2); |
| time-range: 10s; |
| } |
| main { |
| height: 0px; |
| overflow: hidden; |
| } |
| .scroller { |
| height: 100px; |
| overflow: scroll; |
| } |
| .scroller > div { |
| height: 200px; |
| } |
| #element1 { |
| width: 1px; |
| animation: expand_width 10s timeline1; |
| } |
| #element2 { |
| height: 1px; |
| animation: expand_height 10s timeline2; |
| } |
| </style> |
| <main id=main></main> |
| <div id=element1></div> |
| <div> |
| <div id=element2></div> |
| </div> |
| <script> |
| function insertScroller(id) { |
| let scroller = document.createElement('div'); |
| scroller.setAttribute('id', id); |
| scroller.setAttribute('class', 'scroller'); |
| scroller.append(document.createElement('div')); |
| main.append(scroller); |
| } |
| |
| promise_test(async () => { |
| await waitForNextFrame(); |
| |
| let events1 = []; |
| let events2 = []; |
| |
| insertScroller('scroller1'); |
| // Even though #scroller1 was just inserted into the DOM, |timeline1| |
| // remains inactive until the next frame. |
| // |
| // https://drafts.csswg.org/scroll-animations-1/#avoiding-cycles |
| assert_equals(getComputedStyle(element1).width, '1px'); |
| (new ResizeObserver(entries => { |
| events1.push(entries); |
| insertScroller('scroller2'); |
| assert_equals(getComputedStyle(element2).height, '1px'); |
| })).observe(element1); |
| |
| (new ResizeObserver(entries => { |
| events2.push(entries); |
| })).observe(element2); |
| |
| await waitForNextFrame(); |
| |
| // According to the basic rules of the spec [1], the timeline is |
| // inactive at the time the resize observer event was delivered, because |
| // #scroller1 did not have a layout box at the time style recalc for |
| // #element1 happened. |
| // |
| // However, an additional style/layout pass should take place |
| // (before resize observer deliveries) if we detect new ScrollTimelines |
| // in this situation, hence we ultimately do expect the animation to |
| // apply [2]. |
| // |
| // [1] https://drafts.csswg.org/scroll-animations-1/#avoiding-cycles |
| // [2] https://github.com/w3c/csswg-drafts/issues/5261 |
| assert_equals(events1.length, 1); |
| assert_equals(events1[0].length, 1); |
| assert_equals(events1[0][0].contentBoxSize.length, 1); |
| assert_equals(events1[0][0].contentBoxSize[0].inlineSize, 100); |
| |
| // ScrollTimelines created during the ResizeObserver should remain |
| // inactive during the frame they're created, so the ResizeObserver |
| // event should not reflect the animated value. |
| assert_equals(events2.length, 1); |
| assert_equals(events2[0].length, 1); |
| assert_equals(events2[0][0].contentBoxSize.length, 1); |
| assert_equals(events2[0][0].contentBoxSize[0].blockSize, 1); |
| |
| assert_equals(getComputedStyle(element1).width, '100px'); |
| assert_equals(getComputedStyle(element2).height, '100px'); |
| }, 'Multiple style/layout passes occur when necessary'); |
| </script> |
