| <!DOCTYPE html> |
| <title>Named view-timeline lookup</title> |
| <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named"> |
| <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> |
| @keyframes anim { |
| from { z-index: 0; } |
| to { z-index: 100; } |
| } |
| .scroller { |
| overflow: auto; |
| width: 100px; |
| height: 100px; |
| } |
| .scroller > div { |
| height: 25px; |
| z-index: -1; |
| } |
| </style> |
| <main id=main></main> |
| <script> |
| async function inflate(t, template) { |
| t.add_cleanup(() => main.replaceChildren()); |
| return runAndWaitForFrameUpdate(() => { |
| main.append(template.content.cloneNode(true)); |
| }); |
| } |
| </script> |
| |
| <template id=timeline_self> |
| <style> |
| #target { |
| height: 0px; |
| view-timeline: --t1; |
| animation: anim 1s linear forwards; |
| animation-timeline: --t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div id=target></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| await inflate(t, timeline_self); |
| assert_equals(getComputedStyle(target).zIndex, '100'); |
| }, 'view-timeline on self'); |
| </script> |
| |
| <template id=timeline_preceding_sibling> |
| <style> |
| #scroller { |
| timeline-scope: --t1; |
| } |
| #timeline { |
| height: 0px; |
| view-timeline: --t1; |
| } |
| #target { |
| animation: anim 1s linear; |
| animation-timeline: --t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div></div> |
| <div id=timeline></div> |
| <div></div> |
| <div></div> |
| <div id=target></div> |
| <div></div> |
| <div></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| await inflate(t, timeline_preceding_sibling); |
| assert_equals(getComputedStyle(target).zIndex, '75'); |
| }, 'timeline-scope on preceding sibling'); |
| </script> |
| |
| <template id=timeline_ancestor> |
| <style> |
| #timeline { |
| height: 0px; |
| view-timeline: --t1; |
| } |
| #target { |
| animation: anim 1s linear; |
| animation-timeline: --t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div id=timeline> |
| <div> |
| <div id=target></div> |
| </div> |
| </div> |
| <div></div> |
| <div></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| await inflate(t, timeline_ancestor); |
| assert_equals(getComputedStyle(target).zIndex, '25'); |
| }, 'view-timeline on ancestor'); |
| </script> |
| |
| <template id=timeline_ancestor_sibling> |
| <style> |
| #scroller { |
| timeline-scope: --t1; |
| } |
| #timeline { |
| height: 0px; |
| view-timeline: --t1; |
| } |
| #target { |
| animation: anim 1s linear; |
| animation-timeline: --t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div></div> |
| <div id=timeline></div> |
| <div></div> |
| <div> |
| <div> |
| <div id=target></div> |
| </div> |
| </div> |
| <div></div> |
| <div></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| await inflate(t, timeline_ancestor_sibling); |
| assert_equals(getComputedStyle(target).zIndex, '75'); |
| }, 'timeline-scope on ancestor sibling'); |
| </script> |
| |
| <template id=timeline_ancestor_sibling_conflict> |
| <style> |
| #scroller { |
| timeline-scope: --t1; |
| } |
| #timeline1, #timeline2 { |
| height: 0px; |
| view-timeline: --t1; |
| } |
| #target { |
| animation: anim 1s linear; |
| animation-timeline: --t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div></div> |
| <div id=timeline1></div> |
| <div></div> |
| <div id=timeline2></div> |
| <div> |
| <div> |
| <div id=target></div> |
| </div> |
| </div> |
| <div></div> |
| <div></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| await inflate(t, timeline_ancestor_sibling_conflict); |
| assert_equals(getComputedStyle(target).zIndex, 'auto'); |
| }, 'timeline-scope on ancestor sibling, conflict remains unresolved'); |
| </script> |
| |
| <template id=timeline_ancestor_closer_timeline_wins> |
| <style> |
| #scroller { |
| timeline-scope: --t1; |
| } |
| #timeline { |
| height: 0px; |
| view-timeline: --t1; |
| } |
| #parent { |
| timeline-scope: --t1; /* Inactive */ |
| } |
| #target { |
| animation: anim 1s linear; |
| animation-timeline: --t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div></div> |
| <div id=timeline></div> |
| <div></div> |
| <div id=parent> |
| <div id=target></div> |
| </div> |
| <div></div> |
| <div></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| await inflate(t, timeline_ancestor_closer_timeline_wins); |
| assert_equals(getComputedStyle(target).zIndex, '0'); |
| }, 'timeline-scope on ancestor sibling, closer timeline wins'); |
| </script> |
| |
| <template id=timeline_ancestor_scroll_timeline_wins_on_same_element> |
| <style> |
| #scroller { |
| view-timeline: --t1; |
| view-timeline-inset: 50px; |
| scroll-timeline: --t1; |
| } |
| #target { |
| animation: anim 1s linear; |
| animation-timeline: --t1; |
| } |
| </style> |
| <div id=scroller class=scroller> |
| <div id=target></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| </div> |
| </template> |
| <script> |
| promise_test(async (t) => { |
| await inflate(t, timeline_ancestor_scroll_timeline_wins_on_same_element); |
| // In case of a name conflict on the same element, scroll progress timelines |
| // take precedence over view progress timelines. |
| // https://drafts.csswg.org/scroll-animations-1/#timeline-scope |
| assert_equals(getComputedStyle(target).zIndex, '0'); |
| }, 'view-timeline on ancestor sibling, scroll-timeline wins on same element'); |
| </script> |
