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