svg-clipped-rect-target.html (2403B)
1 <!DOCTYPE html> 2 <title>IntersectionObserver observing a clipped SVG <rect> 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="400"> 14 <clipPath id="clip"> 15 <circle cx="75" cy="50" r="20"/> 16 </clipPath> 17 <g clip-path="url(#clip)"> 18 <rect id="target" x="50" y="25" width="100" height="50" fill="blue"/> 19 </g> 20 </svg> 21 <div class="spacer"></div> 22 <script> 23 const viewportWidth = document.documentElement.clientWidth; 24 const viewportHeight = document.documentElement.clientHeight; 25 setup(() => { 26 window.entries = []; 27 window.target = document.getElementById("target"); 28 window.targetRect = target.getBoundingClientRect(); 29 }); 30 runTestCycle(function() { 31 assert_true(!!target, "target exists"); 32 const observer = new IntersectionObserver(function(changes) { 33 entries = entries.concat(changes) 34 }); 35 observer.observe(target); 36 entries = entries.concat(observer.takeRecords()); 37 assert_equals(entries.length, 0, "No initial notifications"); 38 runTestCycle(step0, "First rAF."); 39 }); 40 function step0() { 41 document.scrollingElement.scrollTop = 300; 42 runTestCycle(step1, "document.scrollingElement.scrollTop = 300"); 43 // The numbers in brackets are target client rect; intersection rect; 44 // and root bounds. 45 checkLastEntry(entries, 0, [ 46 108, 108 + targetRect.width, viewportHeight + 158, viewportHeight + 158 + targetRect.height, 47 0, 0, 0, 0, 48 0, viewportWidth, 0, viewportHeight, 49 false, 50 ]); 51 } 52 function step1() { 53 document.scrollingElement.scrollTop = 100; 54 runTestCycle(step2, "document.scrollingElement.scrollTop = 100"); 55 checkLastEntry(entries, 1, [ 56 108, 108 + targetRect.width, viewportHeight - 142, viewportHeight - 142 + targetRect.height, 57 118, 198, viewportHeight - 132, viewportHeight - 52, 58 0, viewportWidth, 0, viewportHeight, 59 true, 60 ]); 61 } 62 function step2() { 63 document.scrollingElement.scrollTop = 0; 64 checkLastEntry(entries, 2, [ 65 108, 108 + targetRect.width, viewportHeight + 58, viewportHeight + 58 + targetRect.height, 66 0, 0, 0, 0, 67 0, viewportWidth, 0, viewportHeight, 68 false, 69 ]); 70 } 71 </script>