svg-container-element.html (2091B)
1 <!DOCTYPE html> 2 <title>IntersectionObserver observing an SVG container element changing position</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 <svg width="400" height="10000"> 8 <!-- Ensure the svg bounds are unchanged with a white fill --> 9 <rect x="-5000" y="-5000" width="100000" height="100000" fill="white"/> 10 <svg id="target" x="0" y="100vh" width="100px" height="100px"> 11 <rect x="0" y="0" width="100" height="100" fill="green"/> 12 </svg> 13 </svg> 14 <script> 15 const viewportWidth = document.documentElement.clientWidth; 16 const viewportHeight = document.documentElement.clientHeight; 17 const kEpsilon = 1; // clientHeight and clientWidth are rounded if the viewport is fractional. 18 setup(() => { 19 window.entries = []; 20 window.target = document.getElementById("target"); 21 window.targetRect = target.getBoundingClientRect(); 22 }); 23 runTestCycle(function() { 24 assert_true(!!target, "target exists"); 25 const observer = new IntersectionObserver(function(changes) { 26 entries = entries.concat(changes); 27 }); 28 observer.observe(target); 29 entries = entries.concat(observer.takeRecords()); 30 assert_equals(entries.length, 0, "No initial notifications"); 31 runTestCycle(step0, "First rAF."); 32 }); 33 function step0() { 34 target.setAttribute('y', '0'); 35 runTestCycle(step1, "Change inner svg element") 36 // The numbers in brackets are target client rect; intersection rect; 37 // and root bounds. 38 checkLastEntry(entries, 0, [ 39 // the 8 pixels comes from the html body padding. 40 8, 8 + targetRect.width, viewportHeight+8, viewportHeight+8 + targetRect.height, 41 0, 0, 0, 0, 42 0, viewportWidth, 0, viewportHeight, 43 false, 44 ], kEpsilon); 45 } 46 function step1() { 47 checkLastEntry(entries, 1, [ 48 8, 8 + targetRect.width, 8, 8 + targetRect.height, 49 8, 8 + targetRect.width, 8, 8 + targetRect.height, 50 0, viewportWidth, 0, viewportHeight, 51 true, 52 ], kEpsilon); 53 } 54 </script>