scroll-initial-target-shadow-dom.tentative.html (4502B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> CSS Scroll Snap 2 Test: scroll-initial-target for scroller in shadow DOM</title> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 <style> 11 .space { 12 width: 50px; 13 height: 500px; 14 } 15 .scroller { 16 width: 100px; 17 height: 100px; 18 overflow: scroll; 19 border: solid 2px; 20 } 21 .purpleborder { 22 border: solid 2px purple; 23 } 24 .target { 25 scroll-initial-target: nearest; 26 width: 50px; 27 height: 50px; 28 background-color: green 29 } 30 #wrapper { 31 /* Hide everything initially to ensure that the test sees the scroll */ 32 /* events from the scrolls to the scroll-initial-targets. */ 33 display: none; 34 } 35 </style> 36 <div id="wrapper"> 37 <div id="scroller_before" class="scroller"> 38 <div class="space"></div> 39 <div class="target"></div> 40 </div> 41 <div id="shadowDomHost"> 42 <template shadowrootmode="open"> 43 <style> 44 .space { 45 width: 50px; 46 height: 500px; 47 } 48 .scroller { 49 width: 100px; 50 height: 100px; 51 overflow: scroll; 52 border: solid 2px red; 53 } 54 .target { 55 scroll-initial-target: nearest; 56 width: 50px; 57 height: 50px; 58 background-color: green 59 } 60 </style> 61 <slot name="slot1"></slot> 62 <div id="shadow_scroller" class="scroller"> 63 <div id="space" class="space"></div> 64 <div id="target" class="target"></div> 65 </div> 66 <slot name="slot2"></slot> 67 </template> 68 <div id="slot1scroller" slot="slot1" class="purpleborder scroller"> 69 <div id="space" class="space"></div> 70 <div class="target"></div> 71 </div> 72 <div id="slot2scroller" slot="slot2" class="purpleborder scroller"> 73 <div id="space" class="space"></div> 74 <div class="target"></div> 75 </div> 76 </div> 77 <div id="scroller_after" class="scroller"> 78 <div class="space"></div> 79 <div class="target"></div> 80 </div> 81 </div> 82 <script> 83 const scroller_before = document.getElementById("scroller_before"); 84 const slot1scroller = document.getElementById("slot1scroller"); 85 const shadow_scroller = 86 shadowDomHost.shadowRoot.querySelector(".scroller"); 87 const slot2scroller = document.getElementById("slot2scroller"); 88 const scroller_after = document.getElementById("scroller_after"); 89 90 const scrollers = [scroller_before, slot1scroller, shadow_scroller, 91 slot2scroller, scroller_after]; 92 const scroll_log = []; 93 94 function setUpLogging() { 95 let promises = []; 96 for (const scroller of scrollers) { 97 promises.push(new Promise((resolve) => { 98 scroller.addEventListener("scroll", () => { 99 scroll_log.push(scroller.id); 100 resolve(); 101 }, { once: true }); 102 })); 103 } 104 return Promise.all(promises); 105 } 106 107 function verifyScrollPositions() { 108 for (const scroller of scrollers) { 109 // Each scroller's target is at the scroller's very bottom so the 110 // scroller should be scrolled all the way down. 111 assert_equals(scroller.scrollTop, 112 scroller.scrollHeight - scroller.clientHeight, 113 `${scroller.id} is scrolled to its target`); 114 } 115 } 116 117 promise_test(async (t) => { 118 // Arm the promises that should be resolved due to scrolling to the 119 // scroll-initial-targets. 120 const scroll_promises = setUpLogging(); 121 122 const wrapper = document.getElementById("wrapper"); 123 wrapper.style.display = "initial"; 124 125 await scroll_promises; 126 127 // Verify that the order in which the scroll containers were scrolled 128 // matches flat tree order. 129 assert_array_equals(scroll_log, ["scroller_before", "slot1scroller", 130 "shadow_scroller", "slot2scroller", "scroller_after"]); 131 132 verifyScrollPositions(); 133 }, "scroll-initial-target in shadow DOM is scrolled to initially."); 134 </script> 135 </body> 136 </html>