Oriol Brufau
ba1a9edd4b
Automatic update from web-platform-tests Fix scrollWidthHeight-negative-margin-002.html Since we don't support `writing-mode` yet, we got different testcases with the same title, some passing and some failing. So we had to expect both PASS and FAIL, making the test useless to detect regressions. This changes the test to only generate testcases for supported values of `writing-mode`. Signed-off-by: Oriol Brufau <obrufau@igalia.com> -- wpt-commits: ac02e5196ca5b480470ee2893a106befe7cf85d2 wpt-pr: 53414
106 lines
4.3 KiB
HTML
106 lines
4.3 KiB
HTML
<!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,
|
|
};
|
|
function* writingModes() {
|
|
yield "horizontal-tb";
|
|
yield* ["vertical-lr", "vertical-rl"].filter(writingMode => CSS.supports("writing-mode", writingMode));
|
|
}
|
|
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 writingModes()) {
|
|
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>
|