| <!doctype html> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>scroll{Width,Height} with visible overflow and negative margins.</title> |
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1906475"> |
| <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> |
| <link rel="author" title="Mozilla" href="https://mozilla.org"> |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| <style> |
| body { margin: 0 } |
| .wrapper { |
| width: 80px; |
| height: 80px; |
| border: 1px solid #d1d1d2; |
| padding: 1px 4px 8px 16px; |
| border-width: 1px 2px 3px 4px; |
| border-right-width: 50px; |
| border-bottom-width: 40px; |
| } |
| .inner { |
| margin: -100px; |
| height: 300px; |
| width: 300px; |
| background-color: blue; |
| } |
| </style> |
| <div class="wrapper"> |
| <div class="inner"></div> |
| </div> |
| <script> |
| const wrapper = document.querySelector(".wrapper"); |
| const contentBox = { |
| width: 80, |
| height: 80, |
| }; |
| const paddingBox = { |
| width: contentBox.width + 4 + 16, |
| height: contentBox.height + 1 + 8, |
| }; |
| for (let display of ["flow-root", "flex", "grid"]) { |
| for (let flexDirection of ["row", "row-reverse", "column", "column-reverse"]) { |
| if (flexDirection != "row" && display != "flex") { |
| // Don't bother retesting with all flexDirection values unless we're actually a flex container |
| continue; |
| } |
| for (let flexWrap of ["", "wrap-reverse"]) { |
| if (flexWrap != "" && display != "flex") { |
| // Don't bother retesting with all flexWrap values unless we're actually a flex container |
| continue; |
| } |
| for (let direction of ["ltr", "rtl"]) { |
| for (let writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl"]) { |
| for (let overflow of ["visible", "hidden", "auto", "clip", "scroll"]) { |
| wrapper.style.display = display; |
| wrapper.style.overflow = overflow; |
| wrapper.style.direction = direction; |
| wrapper.style.writingMode = writingMode; |
| wrapper.style.flexDirection = flexDirection; |
| wrapper.style.flexWrap = flexWrap; |
| // Suppress scrollbars because they get added to the padding are |
| // and would need to account for them in flexbox. |
| wrapper.style.scrollbarWidth = display == "flex" ? "none" : ""; |
| let vertical = writingMode.startsWith("vertical"); |
| let scrollToTop = vertical && direction == "rtl"; |
| let scrollToLeft = (!vertical && direction == "rtl") || writingMode == "vertical-rl"; |
| let flexMainAxisIsVertical = flexDirection.startsWith("row") == vertical; |
| if (display == "flex") { |
| if (flexDirection.endsWith("-reverse")) { |
| if (flexMainAxisIsVertical) { |
| scrollToTop = !scrollToTop; |
| } else { |
| scrollToLeft = !scrollToLeft; |
| } |
| } |
| if (flexWrap == "wrap-reverse") { |
| if (flexMainAxisIsVertical) { |
| scrollToLeft = !scrollToLeft; |
| } else { |
| scrollToTop = !scrollToTop; |
| } |
| } |
| } |
| test(function() { |
| assert_greater_than_equal(wrapper.scrollWidth, paddingBox.width, "scrollWidth should be at least padding box width"); |
| let padding = display == "flex" && !flexMainAxisIsVertical ? paddingBox.width - contentBox.width : 0; |
| assert_equals(wrapper.scrollWidth, (scrollToLeft ? 204 : 216) - padding, "scrollWidth"); |
| }, "scrollWidth with negative margins: " + wrapper.style.cssText); |
| test(function() { |
| assert_greater_than_equal(wrapper.scrollHeight, paddingBox.height, "scrollHeight should be at least padding box height"); |
| let padding = display == "flex" && flexMainAxisIsVertical ? paddingBox.width - contentBox.width : 0; |
| assert_equals(wrapper.scrollHeight, (scrollToTop ? 208 : 201) - padding, "scrollHeight"); |
| }, "scrollHeight with negative margins: " + wrapper.style.cssText); |
| } |
| } |
| } |
| } |
| } |
| } |
| </script> |
