svg-rect-target.html (2443B)
1 <!DOCTYPE html> 2 <title>IntersectionObserver observing an SVG <rect> element</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/intersection-observer-test-utils.js"></script> 7 <style> 8 .spacer { 9 height: calc(100vh + 100px); 10 } 11 </style> 12 <div class="spacer"></div> 13 <svg viewBox="0 0 200 100" width="400"> 14 <rect id="target" x="50" y="25" width="100" height="50" fill="blue"/> 15 </svg> 16 <div class="spacer"></div> 17 <script> 18 const viewportWidth = document.documentElement.clientWidth; 19 const viewportHeight = document.documentElement.clientHeight; 20 setup(() => { 21 window.entries = []; 22 window.target = document.getElementById("target"); 23 window.targetRect = target.getBoundingClientRect(); 24 }); 25 runTestCycle(function() { 26 assert_true(!!target, "target exists"); 27 const observer = new IntersectionObserver(function(changes) { 28 entries = entries.concat(changes); 29 }); 30 observer.observe(target); 31 entries = entries.concat(observer.takeRecords()); 32 assert_equals(entries.length, 0, "No initial notifications"); 33 runTestCycle(step0, "First rAF."); 34 }); 35 function step0() { 36 document.scrollingElement.scrollTop = 300; 37 runTestCycle(step1, "document.scrollingElement.scrollTop = 300"); 38 // The numbers in brackets are target client rect; intersection rect; 39 // and root bounds. 40 checkLastEntry(entries, 0, [ 41 // the 8 pixels comes from the html body padding. 42 100 + 8, 100 + 8 + targetRect.width, viewportHeight + 150 + 8, viewportHeight + 150 + 8 + targetRect.height, 43 0, 0, 0, 0, 44 0, viewportWidth, 0, viewportHeight, 45 false, 46 ]); 47 } 48 function step1() { 49 document.scrollingElement.scrollTop = 100; 50 runTestCycle(step2, "document.scrollingElement.scrollTop = 100"); 51 checkLastEntry(entries, 1, [ 52 100 + 8, 100 + 8 + targetRect.width, viewportHeight - 150 + 8, viewportHeight - 150 + 8 + targetRect.height, 53 100 + 8, 100 + 8 + targetRect.width, viewportHeight - 150 + 8, viewportHeight - 150 + 8 + targetRect.height, 54 0, viewportWidth, 0, viewportHeight, 55 true, 56 ]); 57 } 58 function step2() { 59 document.scrollingElement.scrollTop = 0; 60 checkLastEntry(entries, 2, [ 61 100 + 8, 100 + 8 + targetRect.width, viewportHeight + 50 + 8, viewportHeight + 50 + 8 + targetRect.height, 62 0, 0, 0, 0, 63 0, viewportWidth, 0, viewportHeight, 64 false, 65 ]); 66 } 67 </script>