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