rtl-clipped-root.html (1665B)
1 <!DOCTYPE html> 2 <html dir="rtl"> 3 <head> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="./resources/intersection-observer-test-utils.js"></script> 8 9 <style> 10 pre, #log { 11 position: absolute; 12 top: 120px; 13 left: 0; 14 } 15 #root { 16 width: 350px; 17 height: 100px; 18 border: 1px solid black; 19 display: flex; 20 flex-direction: row; 21 overflow-x: auto; 22 } 23 #target-start, #target-end { 24 width: 100px; 25 height: 100px; 26 flex-shrink: 0; 27 background-color: green; 28 text-align: center; 29 } 30 #target-end { 31 margin-inline-start: 500px; 32 } 33 </style> 34 </head> 35 36 <div id="root"> 37 <div id="target-start">start</div> 38 <div id="target-end">end</div> 39 </div> 40 41 <script> 42 runTestCycle(function() { 43 let io = new IntersectionObserver(entries => { 44 entries.forEach(entry => { 45 if (entry.isIntersecting) { 46 entry.target.classList.add("intersecting"); 47 } else { 48 entry.target.classList.remove("intersecting"); 49 } 50 }); 51 }, { root: document.getElementById("root") }); 52 document.querySelectorAll("#root > div").forEach(element => { 53 io.observe(element); 54 }); 55 runTestCycle(step0, "First rAF"); 56 }, "Explicit rtl root with overflow clipping"); 57 58 function step0() { 59 assert_true( 60 document.getElementById("target-start").classList.contains("intersecting"), 61 "Target at scroll start is intersecting"); 62 assert_false( 63 document.getElementById("target-end").classList.contains("intersecting"), 64 "Target at scroll end is not intersecting"); 65 } 66 </script>