| <!DOCTYPE html> |
| <title>Resolving @scroll-timeline name conflicts with cascade layers</title> |
| <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering"> |
| <link rel="author" href="mailto:xiaochengh@chromium.org"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <style> |
| #scroller { |
| overflow: scroll; |
| width: 100px; |
| height: 100px; |
| } |
| |
| #scroller div { |
| height: 200px; |
| } |
| |
| @keyframes expand { |
| from { width: 100px; } |
| to { width: 200px; } |
| } |
| |
| #target, #reference { |
| height: 100px; |
| } |
| |
| #reference { |
| width: 150px; |
| } |
| |
| #target { |
| animation: expand 10s linear; |
| height: 100px; |
| } |
| </style> |
| |
| <div id="scroller"> |
| <div></div> |
| </div> |
| <div id="target"></div> |
| <div id="reference"></div> |
| |
| <script> |
| // In all tests, width of #target should be 150px, same as #reference |
| |
| const testCases = [ |
| { |
| title: '@scroll-timeline unlayered overrides layered', |
| style: ` |
| #target { |
| animation-timeline: timeline; |
| } |
| |
| @scroll-timeline timeline { |
| source: selector(#scroller); |
| start: 0px; |
| end: 50px; |
| } |
| |
| @layer { |
| @scroll-timeline timeline { |
| source: selector(#scroller); |
| start: 0px; |
| end: 100px; |
| } |
| } |
| ` |
| }, |
| |
| { |
| title: '@scroll-timeline override between layers', |
| style: ` |
| @layer base, override; |
| |
| #target { |
| animation-timeline: timeline; |
| } |
| |
| @layer override { |
| @scroll-timeline timeline { |
| source: selector(#scroller); |
| start: 0px; |
| end: 50px; |
| } |
| } |
| |
| @layer base { |
| @scroll-timeline timeline { |
| source: selector(#scroller); |
| start: 0px; |
| end: 100px; |
| } |
| } |
| ` |
| }, |
| |
| { |
| title: '@scroll-timeline override update with appended sheet 1', |
| style: ` |
| @layer base, override; |
| |
| #target { |
| animation-timeline: timeline; |
| } |
| |
| @layer override { |
| @scroll-timeline timeline { |
| source: selector(#scroller); |
| start: 0px; |
| end: 50px; |
| } |
| } |
| `, |
| append: ` |
| @layer base { |
| @scroll-timeline timeline { |
| source: selector(#scroller); |
| start: 0px; |
| end: 100px; |
| } |
| } |
| ` |
| }, |
| |
| { |
| title: '@scroll-timeline override update with appended sheet 2', |
| style: ` |
| @layer base, override; |
| |
| #target { |
| animation-timeline: timeline; |
| } |
| |
| @layer base { |
| @scroll-timeline timeline { |
| source: selector(#scroller); |
| start: 0px; |
| end: 100px; |
| } |
| } |
| `, |
| append: ` |
| @layer override { |
| @scroll-timeline timeline { |
| source: selector(#scroller); |
| start: 0px; |
| end: 50px; |
| } |
| } |
| ` |
| }, |
| ]; |
| |
| for (let testCase of testCases) { |
| promise_test(async function() { |
| assert_true( |
| CSS.supports('animation-timeline', 'foo'), |
| 'This test requires @scroll-timeline support'); |
| |
| var documentStyle = document.createElement('style'); |
| documentStyle.appendChild(document.createTextNode(testCase['style'])); |
| document.head.appendChild(documentStyle); |
| |
| var appendedStyle; |
| if (testCase['append']) { |
| document.body.offsetLeft; // Force style update |
| appendedStyle = document.createElement('style'); |
| appendedStyle.appendChild(document.createTextNode(testCase['append'])); |
| document.head.appendChild(appendedStyle); |
| } |
| |
| scroller.scrollTop = 25; |
| await waitForNextFrame(); |
| assert_equals(getComputedStyle(target).width, |
| getComputedStyle(reference).width); |
| |
| if (appendedStyle) |
| appendedStyle.remove(); |
| documentStyle.remove(); |
| }, testCase['title']); |
| } |
| </script> |
