blob: c1b8fd43eaa3229cb62925065b1d0bf5a0c3b3ff [file] [log] [blame]
<!DOCTYPE html>
<html dir="rtl">
<!--
| Absolute positioned elements in the containing block are included in the
| scrolling area.
| https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface
| https://www.w3.org/TR/cssom-view-1/#scrolling-area
-->
<head>
<style>
body {
font-family: Roboto;
font-size: 16px;
background-color: #FF0000;
}
.overflow-scroll {
right: 50px;
width: 150px;
height: 150px;
overflow: scroll;
position: relative;
background-color: #808080;
}
.content-positioned {
width: 35px;
height: 35px;
margin: 3px;
border: 5px solid #00FF00;
padding: 7px;
position: absolute;
background-color: #0000FF;
}
</style>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
function runTest() {
var error = "";
var scroller = document.getElementById("scroller");
if (scroller.scrollWidth != 187) {
error += "\nValue of: scrollWidth"
+ "\n Actual: " + scroller.scrollWidth
+ "\nExpected: " + 187;
}
if (scroller.scrollHeight != 150) {
error += "\nValue of: scrollHeight"
+ "\n Actual: " + scroller.scrollHeight
+ "\nExpected: " + 150;
}
return error;
}
window.onload = function() {
var error = runTest();
if (error) {
console.log("FAIL" + error);
} else {
document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
if (window.testRunner) {
window.testRunner.notifyDone();
}
}
</script>
</head>
<body>
<div id="scroller" class="overflow-scroll">
<div class="content-positioned" style="transform: translateX(25px)"></div>
<div class="content-positioned" style="transform: translateX(-50px)"></div>
<div class="content-positioned" style="transform: translateX(-125px)"></div>
</div>
</body>
</html>