| <!DOCTYPE html> |
| <title>Changes to view-timeline are reflected in dependent elements</title> |
| <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-shorthand"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <style> |
| @keyframes anim { |
| from { z-index: 0; } |
| to { z-index: 100; } |
| } |
| .scroller { |
| overflow: hidden; |
| width: 100px; |
| height: 100px; |
| } |
| .scroller > div { |
| height: 100px; |
| } |
| #target { |
| height: 0px; |
| z-index: -1; |
| } |
| </style> |
| <main id=main></main> |
| <script> |
| function inflate(t, template) { |
| t.add_cleanup(() => main.replaceChildren()); |
| main.append(template.content.cloneNode(true)); |
| main.offsetTop; |
| } |
| async function scrollTop(e, value) { |
| e.scrollTop = value; |
| await waitForNextFrame(); |
| } |
| async function scrollLeft(e, value) { |
| e.scrollLeft = value; |
| await waitForNextFrame(); |
| } |
| </script> |
| |
| <template id=dynamic_view_timeline_name> |
| <style> |
| .timeline { |
| view-timeline-name: t1; |
| } |
| #target { |
| animation: anim 1s linear t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div id=div75></div> |
| <div id=div25></div> |
| <div id=div_before></div> |
| <div id=target></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| inflate(t, dynamic_view_timeline_name); |
| |
| await scrollTop(scroller, 50); |
| |
| // scrollTop=50 is 75% for div75. |
| div75.classList.add('timeline'); |
| assert_equals(getComputedStyle(target).zIndex, '75'); |
| |
| // scrollTop=50 is 25% for div25. |
| div25.classList.add('timeline'); |
| assert_equals(getComputedStyle(target).zIndex, '25'); |
| |
| // scrollTop=50 is before the timeline start for div_before. |
| div_before.classList.add('timeline'); |
| assert_equals(getComputedStyle(target).zIndex, '-1'); |
| // Scroll to 25% (for div_before) to verify that we're linked to that |
| // timeline. |
| await scrollTop(scroller, 150); |
| assert_equals(getComputedStyle(target).zIndex, '25'); |
| |
| // Now we should be back to div25's timeline, although with the new |
| // scrollTop=150, it's actually at 75%. |
| div_before.classList.remove('timeline'); |
| assert_equals(getComputedStyle(target).zIndex, '75'); |
| }, 'Dynamically changing view-timeline-name'); |
| </script> |
| |
| <template id=dynamic_view_timeline_axis> |
| <style> |
| #timeline { |
| width: 100px; |
| height: 100px; |
| margin: 100px; |
| view-timeline-name: t1; |
| } |
| #target { |
| animation: anim 1s linear t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div id=timeline style="background: red;"></div> |
| <div id=target></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| inflate(t, dynamic_view_timeline_axis); |
| |
| await scrollTop(scroller, 50); // 25% (vertical) |
| await scrollLeft(scroller, 20); // 10% (horizontal) |
| |
| assert_equals(getComputedStyle(target).zIndex, '25'); |
| timeline.style.viewTimelineAxis = 'horizontal'; |
| assert_equals(getComputedStyle(target).zIndex, '10'); |
| }, 'Dynamically changing view-timeline-axis'); |
| </script> |
| |
| <template id=dynamic_view_timeline_inset> |
| <style> |
| #timeline { |
| width: 100px; |
| height: 100px; |
| margin: 100px; |
| view-timeline-name: t1; |
| } |
| #target { |
| animation: anim 1s linear t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div id=timeline style="background: red;"></div> |
| <div id=target></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| inflate(t, dynamic_view_timeline_inset); |
| |
| await scrollTop(scroller, 50); // 25% (without inset). |
| |
| assert_equals(getComputedStyle(target).zIndex, '25'); |
| timeline.style.viewTimelineInset = '0px 50px'; |
| assert_equals(getComputedStyle(target).zIndex, '0'); |
| }, 'Dynamically changing view-timeline-inset'); |
| </script> |
| |
| <template id=timeline_display_none> |
| <style> |
| #timeline { |
| view-timeline-name: t1; |
| } |
| #target { |
| animation: anim 1s linear t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div></div> |
| <div id=timeline></div> |
| <div id=target></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| inflate(t, timeline_display_none); |
| |
| await scrollTop(scroller, 50); |
| assert_equals(getComputedStyle(target).zIndex, '25'); |
| timeline.style.display = 'none'; |
| assert_equals(getComputedStyle(target).zIndex, '-1'); |
| }, 'Element with view-timeline becoming display:none'); |
| </script> |
