svg-intersection-with-fractional-bounds.html (2565B)
1 <!DOCTYPE html> 2 <title>IntersectionObserver observing an SVG <rect> with fractional bounds 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="4" display="block"> 14 <rect id="target" x="50" y="5" 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 var epsilon = 0.0001; 26 runTestCycle(function() { 27 assert_true(!!target, "target exists"); 28 const observer = new IntersectionObserver(function(changes) { 29 entries = entries.concat(changes); 30 }); 31 observer.observe(target); 32 entries = entries.concat(observer.takeRecords()); 33 assert_equals(entries.length, 0, "No initial notifications"); 34 runTestCycle(step0, "Initial Observation"); 35 }); 36 function step0() { 37 document.scrollingElement.scrollTop = 300; 38 runTestCycle(step1, "Intersection observation after scrolling 300"); 39 // The numbers in brackets are target client rect; intersection rect; 40 // and root bounds. 41 checkLastEntry(entries, 0, [ 42 // the 8 pixels comes from the html body padding. 43 1 + 8, 1 + 8 + targetRect.width, 8 + viewportHeight + 100 + 0.1, viewportHeight + 100 + 0.1 + 8 + targetRect.height, 44 0, 0, 0, 0, 45 0, viewportWidth, 0, viewportHeight, 46 false, 47 ], epsilon); 48 } 49 function step1() { 50 document.scrollingElement.scrollTop = 100; 51 runTestCycle(step2, "Intersection observation after scrolling 100"); 52 checkLastEntry(entries, 1, [ 53 1 + 8, 1 + 8 + targetRect.width, 8 + viewportHeight - 200 + 0.1, viewportHeight - 200 + 0.1 + 8 + targetRect.height, 54 1 + 8, 1 + 8 + targetRect.width, 8 + viewportHeight - 200 + 0.1, viewportHeight - 200 + 0.1 + 8 + targetRect.height, 55 0, viewportWidth, 0, viewportHeight, 56 true, 57 ], epsilon); 58 } 59 function step2() { 60 document.scrollingElement.scrollTop = 0; 61 checkLastEntry(entries, 2, [ 62 1 + 8, 1 + 8 + targetRect.width, 8 + viewportHeight + 0.1, viewportHeight + 0.1 + 8 + targetRect.height, 63 0, 0, 0, 0, 64 0, viewportWidth, 0, viewportHeight, 65 false, 66 ], epsilon); 67 } 68 </script>