blob: 4846cab3c9aa16890b17ebcc91d6b8d08e806fa5 [file] [log] [blame]
<!DOCTYPE html>
<html dir="rtl">
<!--
| Absolutely positioned elements in a positioned container should be scrolled.
| https://www.w3.org/TR/CSS21/visufx.html
|
| Unfortunately, major browsers handle scrollLeft differently when dir=rtl.
| Follow the spec and treat scrollLeft == 0 as the rightmost position with
| scrollLeft values going negative as the user scrolls left.
| https://lists.w3.org/Archives/Public/www-style/2012Aug/0156.html
-->
<head>
<style>
body {
font-family: Roboto;
font-size: 16px;
background-color: #FF0000;
}
.overflow-scroll {
width: 150px;
height: 100px;
overflow: scroll;
background-color: #000000;
}
.container {
width: 300px;
height: 75px;
overflow: hidden;
position: relative;
background-color: #808080;
}
.content {
width: 50px;
height: 50px;
position: absolute;
}
</style>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
window.onload = function() {
var scroller = document.getElementById("scroller");
scroller.scrollLeft = -50;
if (scroller.scrollLeft != -50) {
console.log("FAIL" +
"\nValue of: scrollLeft" +
"\n Actual: " + scroller.scrollLeft +
"\nExpected: " + "-50");
} else {
document.body.style.backgroundColor = "#FFFFFF";
}
if (window.testRunner) {
window.testRunner.notifyDone();
}
}
</script>
</head>
<body>
<div id="scroller" class="overflow-scroll">
<div class="container">
<div class="content"
style="background-color: #FF0000; transform: translateX(0px)"></div>
<div class="content"
style="background-color: #00FF00; transform: translateX(-75px)"></div>
<div class="content"
style="background-color: #0000FF; transform: translateX(-150px)"></div>
</div>
</div>
</body>
</html>