root-vertical-rl.html (1464B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="./resources/intersection-observer-test-utils.js"></script> 6 7 <style> 8 body { 9 margin: 0; 10 } 11 #root { 12 width: 200px; 13 height: 200px; 14 overflow: hidden; 15 border-left: 50px solid yellow; 16 writing-mode: vertical-rl; 17 } 18 #target { 19 width: 100px; 20 height: 100px; 21 background-color: green; 22 } 23 </style> 24 25 <div id="root"> 26 <div id="target" style="width: 100px; height: 100px; transform: translateX(101px)"></div> 27 </div> 28 29 <script> 30 var entries = []; 31 32 runTestCycle(function() { 33 var root = document.getElementById('root'); 34 var target = document.getElementById('target'); 35 var observer = new IntersectionObserver(function(changes) { 36 entries = entries.concat(changes); 37 }, { root: root }); 38 observer.observe(target); 39 entries = entries.concat(observer.takeRecords()); 40 assert_equals(entries.length, 0, "No initial notifications."); 41 runTestCycle(step0, "First rAF."); 42 }, "IntersectionObserver vertical-rl root."); 43 44 function step0() { 45 runTestCycle(step1, "Set transform=translateX(50px) on target."); 46 checkLastEntry(entries, 0, [251, 351, 0, 100, 0, 0, 0, 0, 50, 250, 0, 200, false]); 47 target.style.transform = "translateX(50px)"; 48 } 49 50 function step1() { 51 checkLastEntry(entries, 1, [200, 300, 0, 100, 200, 250, 0, 100, 50, 250, 0, 200, true]); 52 } 53 </script>