css/css-multicol/scroll-width-height.tentative.html

<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.multi {
  width: 400px;
  height: 400px;
  columns: 3;
}
.child {
  inline-size: 100px;
  block-size: 100px;
  outline: solid black;
}
.grandchild {
  inline-size: 100px;
  block-size: 300px;
  background: lime;
}
</style>
<body onload="checkLayout('.child, .grandchild')">
<div id=log></div>

<div class="multi" style="writing-mode: horizontal-tb">
  <div class="child" data-expected-scroll-width="100" data-expected-scroll-height="300">
    <div class="grandchild" data-expected-scroll-width="100" data-expected-scroll-height="300"></div>
  </div>
</div>
<div class="multi" style="writing-mode: vertical-rl">
  <div class="child" data-expected-scroll-width="300" data-expected-scroll-height="100">
    <div class="grandchild" data-expected-scroll-width="300" data-expected-scroll-height="100"></div>
  </div>
</div>
<div class="multi" style="writing-mode: vertical-lr">
  <div class="child" data-expected-scroll-width="300" data-expected-scroll-height="100">
    <div class="grandchild" data-expected-scroll-width="300" data-expected-scroll-height="100"></div>
  </div>
</div>