svg-group-target.html (2363B)
1 <!DOCTYPE html> 2 <title>IntersectionObserver observing an SVG <g> 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 <svg viewBox="0 0 200 100" width="400"> 13 <g id="target"> 14 <rect x="50" y="25" width="100" height="50" fill="blue"/> 15 </g> 16 </svg> 17 <script> 18 const viewportWidth = document.documentElement.clientWidth; 19 const viewportHeight = document.documentElement.clientHeight; 20 21 setup(() => { 22 window.entries = []; 23 window.target = document.getElementById("target"); 24 window.targetRect = target.getBoundingClientRect(); 25 window.rect = document.querySelector("#target > rect"); 26 }); 27 28 runTestCycle(function() { 29 assert_true(!!target, "target exists"); 30 const observer = new IntersectionObserver(function(changes) { 31 entries = entries.concat(changes); 32 }); 33 observer.observe(target); 34 entries = entries.concat(observer.takeRecords()); 35 assert_equals(entries.length, 0, "No initial notifications"); 36 runTestCycle(step0, "First rAF."); 37 }); 38 39 function step0() { 40 rect.style.transform = "translate(0, 150px)"; 41 runTestCycle(step1, "descendant rect translated down by 150 units (out of SVG viewport)"); 42 // The numbers in brackets are target client rect; intersection rect; 43 // and root bounds. 44 checkLastEntry(entries, 0, [ 45 108, 108 + targetRect.width, 58, 58 + targetRect.height, 46 108, 108 + targetRect.width, 58, 58 + targetRect.height, 47 0, viewportWidth, 0, viewportHeight, 48 true, 49 ]); 50 } 51 52 function step1() { 53 rect.style.transform = "translate(0, 50px)"; 54 runTestCycle(step2, "descendant rect translated down by 100 units"); 55 checkLastEntry(entries, 1, [ 56 108, 108 + targetRect.width, 8 + (25 + 150) * 2, 8 + (25 + 150) * 2 + targetRect.height, 57 0, 0, 0, 0, 58 0, viewportWidth, 0, viewportHeight, 59 false, 60 ]); 61 } 62 63 function step2() { 64 rect.style.transform = ""; 65 checkLastEntry(entries, 2, [ 66 108, 108 + targetRect.width, 8 + (25 + 50) * 2, 8 + (25 + 50) * 2 + targetRect.height, 67 108, 108 + targetRect.width, 8 + (25 + 50) * 2, 8 + (25 + 50) * 2 + targetRect.height / 2, 68 0, viewportWidth, 0, viewportHeight, 69 true, 70 ]); 71 } 72 </script>