padding-clip.html (1411B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <title>Scrollport is used rather than content rect to compute intersection ratio</title> 5 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 6 <link rel="author" href="https://mozilla.org" title="Mozilla"> 7 <link rel="help" href="https://github.com/w3c/IntersectionObserver/issues/504"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 #root { 12 overflow: hidden; 13 position: relative; 14 box-sizing: border-box; 15 width: 100px; 16 height: 100px; 17 padding: 10px; 18 } 19 #target { 20 width: 100px; 21 height: 100px; 22 background-color: green; 23 /* Shift into the padding area */ 24 position: relative; 25 left: -10px; 26 top: -10px; 27 } 28 </style> 29 <div id="root"> 30 <div id="target"></div> 31 </div> 32 <script> 33 promise_test(async function(t) { 34 const target = document.getElementById("target"); 35 assert_true(!!target, "target exists"); 36 const root = document.getElementById("root"); 37 assert_true(!!root, "root exists"); 38 const entries = await new Promise(resolve => { 39 const observer = new IntersectionObserver(resolve, { root }); 40 observer.observe(target); 41 }); 42 assert_equals(entries.length, 1, "Should have one entry."); 43 assert_equals(entries[0].intersectionRatio, 1, "Should be completely visible."); 44 }); 45 </script>