scrollWidthHeight-negative-margin-001.html (1344B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>scroll{Width,Height} with visible overflow and negative margins.</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1906475"> 6 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 7 <link rel="author" title="Mozilla" href="https://mozilla.org"> 8 <script src=/resources/testharness.js></script> 9 <script src=/resources/testharnessreport.js></script> 10 <style> 11 body { margin: 0 } 12 .wrapper { 13 width: 90px; 14 border: 10px solid #d1d1d2; 15 } 16 .inner { 17 margin: -10px; 18 height: 100px; 19 width: 100px; 20 background-color: blue; 21 } 22 </style> 23 <div class="wrapper" style="overflow: visible"> 24 <div class="inner"></div> 25 </div> 26 <div class="wrapper" style="overflow: hidden"> 27 <div class="inner"></div> 28 </div> 29 <div class="wrapper" style="overflow: auto"> 30 <div class="inner"></div> 31 </div> 32 <div class="wrapper" style="overflow: clip"> 33 <div class="inner"></div> 34 </div> 35 <script> 36 for (let wrapper of document.querySelectorAll(".wrapper")) { 37 test(function() { 38 assert_equals(wrapper.scrollWidth, 90, "scrollWidth"); 39 assert_equals(wrapper.scrollHeight, 90, "scrollHeight"); 40 }, "scrollWidth/Height with negative margins: " + wrapper.style.cssText); 41 } 42 </script>