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