58 lines
1.8 KiB
HTML
58 lines
1.8 KiB
HTML
<!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>
|