wpt / css / css-overflow / scrollable-overflow-transform-unreachable-region.html

Status: FAIL | Duration: 196ms | Subtests: 0/120 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (0/120)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
scrollWidth of display: flow-root; direction: ltr; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flow-root; direction: ltr; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flow-root; direction: ltr; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flow-root; direction: ltr; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flow-root; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flow-root; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flow-root; direction: rtl; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flow-root; direction: rtl; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flow-root; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flow-root; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flow-root; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flow-root; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: row-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: ltr; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: horizontal-tb; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-lr; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: flex; direction: rtl; writing-mode: vertical-rl; flex-direction: column-reverse; flex-wrap: wrap-reverse;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: grid; direction: ltr; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: grid; direction: ltr; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: grid; direction: ltr; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: grid; direction: ltr; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: grid; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: grid; direction: ltr; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: grid; direction: rtl; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: grid; direction: rtl; writing-mode: horizontal-tb; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 204 but got 200
scrollWidth of display: grid; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 102 but got 100
scrollHeight of display: grid; direction: rtl; writing-mode: vertical-lr; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200
scrollWidth of display: grid; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollWidth expected 108 but got 100
scrollHeight of display: grid; direction: rtl; writing-mode: vertical-rl; flex-direction: row; flex-wrap: nowrap;FAILassert_equals: scrollHeight expected 216 but got 200

/css/css-overflow/scrollable-overflow-transform-unreachable-region.html

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Scrollable Overflow of a Scroll Container with Transformed Child in Unreachable Scrollable Overflow Region.</title>
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#unreachable-scrollable-overflow-region">
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
body { margin: 0 }
.wrapper {
  width: 100px;
  height: 200px;
  overflow: scroll;
}
.inner {
  width: 100px;
  height: 200px;
  background-color: lime;
  transform: translate(-3px, -6px) scale(1.10);
}
</style>
<div class="wrapper">
  <div class="inner"></div>
</div>
<script>
const wrapper = document.querySelector(".wrapper");
const contentBox = {
  width: 100,
  height: 200,
};

function getCurrentTestName(display, direction, writingMode, flexDirection, flexWrap) {
  return `display: ${display}; ` +
         `direction: ${direction}; ` +
         `writing-mode: ${writingMode}; ` +
         `flex-direction: ${flexDirection}; ` +
         `flex-wrap: ${flexWrap};`;
}

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 ["nowrap", "wrap-reverse"]) {
      if (flexWrap != "nowrap" && 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"]) {
          wrapper.style.display = display;
          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;
              }
            }
          }
          currentTestName = getCurrentTestName(display, direction, writingMode, flexDirection, flexWrap);
          test(function() {
            assert_equals(wrapper.scrollWidth, (scrollToLeft ? 108 : 102), "scrollWidth");
          }, "scrollWidth of " + currentTestName);
          test(function() {
            assert_equals(wrapper.scrollHeight, (scrollToTop ? 216 : 204), "scrollHeight");
          }, "scrollHeight of " + currentTestName);
        }
      }
    }
  }
}
</script>