scrollWidthHeight-negative-margin-002.html (4415B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <title>scroll{Width,Height} with visible overflow and negative margins.</title> 5 <link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1906475"> 7 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 8 <link rel="author" title="Mozilla" href="https://mozilla.org"> 9 <script src=/resources/testharness.js></script> 10 <script src=/resources/testharnessreport.js></script> 11 <style> 12 body { margin: 0 } 13 .wrapper { 14 width: 80px; 15 height: 80px; 16 border: 1px solid #d1d1d2; 17 padding: 1px 4px 8px 16px; 18 border-width: 1px 2px 3px 4px; 19 border-right-width: 50px; 20 border-bottom-width: 40px; 21 } 22 .inner { 23 margin: -100px; 24 height: 300px; 25 width: 300px; 26 background-color: blue; 27 } 28 </style> 29 <div class="wrapper"> 30 <div class="inner"></div> 31 </div> 32 <script> 33 const wrapper = document.querySelector(".wrapper"); 34 const contentBox = { 35 width: 80, 36 height: 80, 37 }; 38 const paddingBox = { 39 width: contentBox.width + 4 + 16, 40 height: contentBox.height + 1 + 8, 41 }; 42 function* writingModes() { 43 yield "horizontal-tb"; 44 yield* ["vertical-lr", "vertical-rl"].filter(writingMode => CSS.supports("writing-mode", writingMode)); 45 } 46 for (let display of ["flow-root", "flex", "grid"]) { 47 for (let flexDirection of ["row", "row-reverse", "column", "column-reverse"]) { 48 if (flexDirection != "row" && display != "flex") { 49 // Don't bother retesting with all flexDirection values unless we're actually a flex container 50 continue; 51 } 52 for (let flexWrap of ["", "wrap-reverse"]) { 53 if (flexWrap != "" && display != "flex") { 54 // Don't bother retesting with all flexWrap values unless we're actually a flex container 55 continue; 56 } 57 for (let direction of ["ltr", "rtl"]) { 58 for (let writingMode of writingModes()) { 59 for (let overflow of ["visible", "hidden", "auto", "clip", "scroll"]) { 60 wrapper.style.display = display; 61 wrapper.style.overflow = overflow; 62 wrapper.style.direction = direction; 63 wrapper.style.writingMode = writingMode; 64 wrapper.style.flexDirection = flexDirection; 65 wrapper.style.flexWrap = flexWrap; 66 // Suppress scrollbars because they get added to the padding are 67 // and would need to account for them in flexbox. 68 wrapper.style.scrollbarWidth = display == "flex" ? "none" : ""; 69 let vertical = writingMode.startsWith("vertical"); 70 let scrollToTop = vertical && direction == "rtl"; 71 let scrollToLeft = (!vertical && direction == "rtl") || writingMode == "vertical-rl"; 72 let flexMainAxisIsVertical = flexDirection.startsWith("row") == vertical; 73 if (display == "flex") { 74 if (flexDirection.endsWith("-reverse")) { 75 if (flexMainAxisIsVertical) { 76 scrollToTop = !scrollToTop; 77 } else { 78 scrollToLeft = !scrollToLeft; 79 } 80 } 81 if (flexWrap == "wrap-reverse") { 82 if (flexMainAxisIsVertical) { 83 scrollToLeft = !scrollToLeft; 84 } else { 85 scrollToTop = !scrollToTop; 86 } 87 } 88 } 89 test(function() { 90 assert_greater_than_equal(wrapper.scrollWidth, paddingBox.width, "scrollWidth should be at least padding box width"); 91 let padding = display == "flex" && !flexMainAxisIsVertical ? paddingBox.width - contentBox.width : 0; 92 assert_equals(wrapper.scrollWidth, (scrollToLeft ? 204 : 216) - padding, "scrollWidth"); 93 }, "scrollWidth with negative margins: " + wrapper.style.cssText); 94 test(function() { 95 assert_greater_than_equal(wrapper.scrollHeight, paddingBox.height, "scrollHeight should be at least padding box height"); 96 let padding = display == "flex" && flexMainAxisIsVertical ? paddingBox.width - contentBox.width : 0; 97 assert_equals(wrapper.scrollHeight, (scrollToTop ? 208 : 201) - padding, "scrollHeight"); 98 }, "scrollHeight with negative margins: " + wrapper.style.cssText); 99 } 100 } 101 } 102 } 103 } 104 } 105 </script>