<!DOCTYPE html>
<style>
section > div, section > div {
  display: inline-block;
  height: 100px;
  width: 100px;
  outline: 1px solid black;
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 10px 10px 0 0;
}

.square {
  width: 20px;
  height: 20px;
  background-color: orange;
}

.ltr { direction: ltr; }
.rtl { direction: rtl; }
.h-tb { writing-mode: horizontal-tb; }
.h-bt { -webkit-writing-mode: horizontal-bt; }
.v-rl { writing-mode: vertical-rl; }
.v-lr { writing-mode: vertical-lr; }
</style>
<section class="right">
  <p>These four containers should have a vertical scrollbar on the right.</p>
  <div class="h-tb ltr"><div class="square" data-expected="0"></div></div>
  <div class="h-bt ltr"><div class="square" data-expected="0"></div></div>
  <div class="v-lr ltr"><div class="square" data-expected="0"></div></div>
  <div class="v-lr rtl"><div class="square" data-expected="0"></div></div>
</section>

<section class="left">
  <p>These four containers should have a vertical scrollbar on the left.</p>
  <div class="h-tb rtl"><div class="square" data-expected="80"></div></div>
  <div class="h-bt rtl"><div class="square" data-expected="80"></div></div>
  <div class="v-rl ltr"><div class="square" data-expected="80"></div></div>
  <div class="v-rl rtl"><div class="square" data-expected="80"></div></div>
</section>

<pre id="results">FAIL</pre>
<script>
if (window.testRunner) {
    window.testRunner.dumpAsText(true);
}

let text = "";
for (let square of document.querySelectorAll(".square")) {
    let actual = square.getBoundingClientRect().x - square.parentNode.offsetLeft;
    let expected = square.getAttribute("data-expected");
    if (actual != expected) {
        text += `Position of square in '${square.parentNode.className}' - expected ${expected}, got ${actual}\n`;
    }
}
results.textContent = text || "PASS";
</script>