prefer-targeted-element.html (3799B)
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 14 <body> 15 <style> 16 .iframe { 17 width: 1000px; 18 height: 1000px; 19 } 20 </style> 21 <script> 22 window.onload = async () => { 23 await waitForCompositorCommit(); 24 // This test sets up a 3x3 grid within scroller: 25 // ------------------------- 26 // | Box 1 | Box 2 | Box 3 | 27 // ------------------------ 28 // | Box 4 | Box 5 | Box 6 | 29 // ------------------------- 30 // | Box 7 | Box 8 | Box 9 | 31 // ------------------------- 32 // within an iframe. 33 // This function just gets the numbers beside |box_number| on each row. 34 // E.g. 4: 4%3 = 1; so the numbers we want are 5 (4+1) and 6 (4+2). 35 function getAlignedNumbers(n) { 36 const mod_3 = n % 3; 37 if (mod_3 == 1) { 38 return [n + 1, n + 2]; 39 } else if (mod_3 == 2) { 40 return [n - 1, n + 1]; 41 } 42 return [n - 1, n - 2]; 43 } 44 45 async function test(box_number) { 46 return promise_test(async (t) => { 47 let [other_box_1, other_box_2] = getAlignedNumbers(box_number); 48 let finish = null; 49 const finished = new Promise((res) => { 50 finish = res; 51 }); 52 var iframe = document.createElement("iframe"); 53 iframe.classList.add("iframe"); 54 iframe.onload = async () => { 55 let boxes = iframe.contentDocument.getElementsByClassName("box"); 56 const box = (i) => { 57 return boxes[i - 1]; 58 } 59 let scroller = iframe.contentDocument.getElementById("scroller"); 60 assert_equals(boxes.length, 9); 61 await runScrollSnapSelectionVerificationTest(t, scroller, 62 /*aligned_elements_x=*/[], 63 /*aligned_elements_y=*/[box(box_number), 64 box(other_box_1), 65 box(other_box_2)], 66 /*axis=*/"y", 67 /*expected_target_x*/null, 68 /*expected_target_y*/box(box_number)); 69 70 // Let scroller no longer be a scroll container. 71 scroller.style.overflow = "visible"; 72 assert_equals(scroller.scrollTop, 0); 73 74 // Let scroller be a scroll container once again. 75 scroller.style.overflow = "scroll"; 76 77 // Run the test again. 78 await runScrollSnapSelectionVerificationTest(t, scroller, 79 /*aligned_elements_x=*/[], 80 /*aligned_elements_y=*/[box(box_number), 81 box(other_box_1), 82 box(other_box_2)], 83 /*axis=*/"y", 84 /*expected_target_x*/null, 85 /*expected_target_y*/box(box_number)); 86 87 finish(); 88 }; 89 iframe.src = `prefer-targeted-element-iframe.html#box${box_number}`; 90 document.body.appendChild(iframe); 91 await finished; 92 document.body.removeChild(iframe); 93 }, `scroller selects targeted area box${box_number} among multiple` + 94 ` aligned areas.`); 95 } 96 97 await test(1); 98 await test(2); 99 await test(3); 100 await test(4); 101 await test(5); 102 await test(6); 103 await test(7); 104 await test(8); 105 await test(9); 106 } 107 </script> 108 </body> 109 </html>