content-visibility-hidden-scrollTop-left-width-height.html (1321B)
1 <!doctype HTML> 2 <html> 3 <meta charset="utf8"> 4 <title>Content Visibility: scrollLeft/scrollTop/scrollWidth/scrollHeight measure correctly</title> 5 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 6 <meta name="assert" content="scrollLeft/scrollTop/scrollWidth/scrollHeight 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: 200px; 18 height: 200px; 19 background: lightblue; 20 21 content-visibility: hidden; 22 } 23 #inner { 24 width: 50px; 25 height: 50px; 26 background: lightgreen; 27 overflow: auto; 28 } 29 30 .content { 31 width: 100px; 32 height: 100px; 33 background-color: red; 34 } 35 </style> 36 37 <body> 38 <div id="outer"><div id="inner"><div class=content></div></div></div> 39 </body> 40 41 <script> 42 test(() => { 43 const inner = document.getElementById("inner"); 44 45 inner.scroll(10, 10); 46 assert_equals(inner.scrollLeft, 10, "left"); 47 inner.scroll(10, 20); 48 assert_equals(inner.scrollTop, 20, "top"); 49 50 inner.scroll(0, 0); 51 inner.style.width = "150px"; 52 inner.style.height = "200px"; 53 assert_equals(inner.scrollWidth, 150, "width"); 54 55 inner.style.height = "100px"; 56 assert_equals(inner.scrollHeight, 100, "height"); 57 }); 58 59 </script> 60 </html>