content-visibility-hidden-offsetTop-left-width-height.html (1214B)
1 <!doctype HTML> 2 <html> 3 <meta charset="utf8"> 4 <title>Content Visibility: offsetLeft/offsetTop/offsetWidth/offsetHeight measure correctly</title> 5 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 6 <meta name="assert" content="offsetLeft/offsetTop/offsetWidth/offsetHeight measure correctly in content-visibility hidden subtree"> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 11 <style> 12 body { 13 margin: 0; 14 padding: 0; 15 } 16 #outer { 17 width: 100px; 18 height: 100px; 19 background: lightblue; 20 21 content-visibility: hidden; 22 } 23 #inner { 24 border: 25px black solid; 25 margin: 25px; 26 width: 50px; 27 height: 50px; 28 background: lightgreen; 29 } 30 </style> 31 32 <body> 33 <div id="outer"><div id="inner"></div></div> 34 </body> 35 36 <script> 37 test(() => { 38 const inner = document.getElementById("inner"); 39 40 inner.style.marginLeft = "20px"; 41 assert_equals(inner.offsetLeft, 20, "left"); 42 43 inner.style.marginTop = "20px"; 44 assert_equals(inner.offsetTop, 20, "top"); 45 46 inner.style.width = "40px"; 47 assert_equals(inner.offsetWidth, 90, "width"); 48 49 inner.style.height = "40px"; 50 assert_equals(inner.offsetHeight, 90, "height"); 51 }); 52 53 </script> 54 </html>