prefer-targeted-element-positioned.html (2721B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap"/> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/dom/events/scrolling/scroll_support.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="resources/common.js"></script> 12 </head> 13 <body> 14 <style> 15 .iframe { 16 height: 1000px; 17 width: 1000px; 18 } 19 </style> 20 <script> 21 window.onload = async () => { 22 await waitForCompositorCommit(); 23 async function test(target_number) { 24 return promise_test(async (t) => { 25 let finish = null; 26 const finished = new Promise((res) => { finish = res; }); 27 var iframe = document.createElement("iframe"); 28 iframe.classList.add("iframe"); 29 iframe.onload = async () => { 30 let boxes = 31 iframe.contentDocument.getElementsByClassName("positioned"); 32 const box = (i) => { 33 return boxes[i - 1]; 34 } 35 let scroller = iframe.contentDocument.getElementById("outer"); 36 // There are 5 aligned boxes in positioned-target-iframe.html. 37 assert_equals(boxes.length, 5); 38 await runScrollSnapSelectionVerificationTest(t, scroller, 39 /*aligned_elements_x=*/[], 40 /*aligned_elements_y=*/[box(1), box(2), box(3), box(4), box(5)], 41 /*axis=*/"y", 42 /*expected_target_x*/null, 43 /*expected_target_x*/box(target_number)); 44 45 // Let scroller no longer be a scroll container. 46 scroller.style.overflow = "visible"; 47 assert_equals(scroller.scrollTop, 0); 48 49 // Let scroller be a scroll container once again. 50 scroller.style.overflow = "scroll"; 51 52 // Run the test again. 53 await runScrollSnapSelectionVerificationTest(t, scroller, 54 /*aligned_elements_x=*/[], 55 /*aligned_elements_y=*/[box(1), box(2), box(3), box(4), box(5)], 56 /*axis=*/"y", 57 /*expected_target_x*/null, 58 /*expected_target_x*/box(target_number)); 59 finish(); 60 }; 61 iframe.src = `positioned-target-iframe.html#target${target_number}`; 62 document.body.appendChild(iframe); 63 await finished; 64 document.body.removeChild(iframe); 65 }, ""); 66 } 67 68 await test(1); 69 await test(2); 70 await test(3); 71 await test(4); 72 await test(5); 73 } 74 </script> 75 </body> 76 </html>