scroll-initial-target-display-toggled.tentative.html (4380B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> CSS Scroll Snap 2 Test: scroll-initial-target*</title> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <body> 11 <style> 12 #space-filler { 13 width: 500px; 14 height: 500px; 15 border: solid 1px red; 16 } 17 #outer-container { 18 width: 400px; 19 height: 400px; 20 overflow: scroll; 21 border: solid 2px blue; 22 } 23 #inner-container { 24 top: 20px; 25 left: 20px; 26 width: 300px; 27 height: 300px; 28 overflow: scroll; 29 position: relative; 30 border: solid 2px black; 31 } 32 #target { 33 width: 100px; 34 height: 100px; 35 background-color: pink; 36 scroll-initial-target: nearest; 37 } 38 </style> 39 <div id="outer-container"> 40 <div id="inner-container"> 41 <div id="space-filler"></div> 42 <div id="target"> 43 </div> 44 </div> 45 </div> 46 <script> 47 let outer_scroller = document.getElementById("outer-container"); 48 let inner_scroller = document.getElementById("inner-container"); 49 let space_filler = document.getElementById("space-filler"); 50 let target = document.getElementById("target"); 51 52 const target_height = target.getBoundingClientRect().height; 53 const space_filler_height = space_filler.getBoundingClientRect().height; 54 const total_content_height = target_height + space_filler_height; 55 56 async function resetDisplay() { 57 return new Promise((resolve) => { 58 if (getComputedStyle(outer_scroller).display == "block" && 59 getComputedStyle(inner_scroller).display == "block" && 60 getComputedStyle(target).display == "block") { 61 resolve(); 62 } else { 63 outer_scroller.style.display = "block"; 64 inner_scroller.style.display = "block"; 65 target.style.display = "block"; 66 requestAnimationFrame(async () => { 67 await resetDisplay(); 68 resolve(); 69 }); 70 } 71 }); 72 } 73 74 async function waitForDisplay(element, display) { 75 return new Promise((resolve) => { 76 if (getComputedStyle(element).display == display) { 77 resolve(); 78 } else { 79 requestAnimationFrame(async () => { 80 await waitForDisplay(element, display); 81 resolve(); 82 }) 83 } 84 }); 85 } 86 87 promise_test(async (t) => { 88 await resetDisplay(); 89 let initial_expected_scroll_top = 90 total_content_height - inner_scroller.clientHeight; 91 assert_equals(inner_scroller.scrollTop, initial_expected_scroll_top, 92 "inner-scroller is scrolled to scroll-initial-target"); 93 94 let display_promise = waitForDisplay(target, "none"); 95 target.style.display = "none"; 96 await display_promise; 97 98 let final_expected_scroll_top = initial_expected_scroll_top - target_height; 99 assert_equals(inner_scroller.scrollTop, final_expected_scroll_top, 100 "inner scroller is clamped to updated scroll range"); 101 }, "display:block scroll-initial-target becomes display: none"); 102 103 promise_test(async (t) => { 104 await resetDisplay(); 105 let initial_expected_scroll_top = 106 total_content_height - inner_scroller.clientHeight; 107 assert_equals(inner_scroller.scrollTop, initial_expected_scroll_top, 108 "inner-scroller is scrolled to scroll-initial-target"); 109 110 let display_promise = waitForDisplay(target, "none"); 111 target.style.display = "none"; 112 await display_promise; 113 assert_equals(inner_scroller.scrollTop, 114 initial_expected_scroll_top - target_height, 115 "inner scroller is clamped to updated scroll range"); 116 117 display_promise = waitForDisplay(target, "block"); 118 target.style.display = "block"; 119 await display_promise; 120 assert_equals(inner_scroller.scrollTop, initial_expected_scroll_top, 121 "inner scroller is updated as scroll-initial-target reappears"); 122 }, "display:none scroll-initial-target becomes display: block"); 123 </script> 124 </body> 125 </html>