Google Git
Sign in
nest-open-source / manifest_repos / chromium_src / 1389d67935ffbffe8a70c1fa06867f6cf7ecf464 / . / chromium / src / third_party / blink / web_tests / external / wpt / css / cssom-view / scrollLeftTop.html
blob: 55b4013600727a3dcae0ab2c286a38801cdd8426 [file] [log] [blame]
<!DOCTYPE html>
<title>CSSOM View - scrollLeft/scrollTop considers writing-mode and css direction</title>
<meta charset="utf-8">
<link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area-origin">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scroll-an-element">
<meta name="assert" content="This test verifies the assigned and extreme values of the scroll positions of an element.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<head>
<style>
.scroller {
overflow: scroll;
width: 150px;
height: 100px;
}
.content {
width: 300px;
height: 400px;
}
.horizontal-tb {
writing-mode: horizontal-tb;
}
.vertical-lr {
writing-mode: vertical-lr;
}
.vertical-rl {
writing-mode: vertical-rl;
}
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<h1>scrollLeft/scrollTop</h1>
<h2>writing-mode: horizontal-tb;</h2>
<div id="target_scroller" class="scroller horizontal-tb ltr">
<div id="target_content" class="content"></div>
</div>
<div class="scroller horizontal-tb rtl">
<div class="content"></div>
</div>
<h2>writing-mode: vertical-lr;</h2>
<div class="scroller vertical-lr ltr">
<div class="content"></div>
</div>
<div class="scroller vertical-lr rtl">
<div class="content"></div>
</div>
<h2>writing-mode: vertical-rl;</h2>
<div class="scroller vertical-rl ltr">
<div class="content"></div>
</div>
<div class="scroller vertical-rl rtl">
<div class="content"></div>
</div>
<script>
var scroller = document.querySelector("#target_scroller");
var content = document.querySelector("#target_content");
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
var scroller_width = scroller.offsetWidth;
var scroller_height = scroller.offsetHeight;
var content_width = content.offsetWidth;
var content_height = content.offsetHeight;
expectedScrollTop = content_height - scroller_height + scrollbar_width;
expectedScrollLeft = content_width - scroller_width + scrollbar_width;
const epsilon = 0.5;
test(() => {
var scroller = document.querySelector(".horizontal-tb.ltr");
assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft");
assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop");
scroller.scrollLeft = 2*content_width;
scroller.scrollTop = 2*content_height;
assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft");
assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop");
}, `writing-mode:horizontal-tb; direction:ltr`);
test(() => {
var scroller = document.querySelector(".horizontal-tb.rtl");
assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft");
assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop");
scroller.scrollLeft = -2*content_width;
scroller.scrollTop = 2*content_height;
assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft");
assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop");
}, `writing-mode:horizontal-tb; direction:rtl`);
test(() => {
var scroller = document.querySelector(".vertical-lr.ltr");
assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft");
assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop");
scroller.scrollLeft = 2*content_width;
scroller.scrollTop = 2*content_height;
assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft");
assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop");
}, `writing-mode:vertical-lr; direction:ltr`);
test(() => {
var scroller = document.querySelector(".vertical-lr.rtl");
assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft");
assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop");
scroller.scrollLeft = 2*content_width;
scroller.scrollTop = -2*content_height;
assert_approx_equals(scroller.scrollLeft, expectedScrollLeft, epsilon, "ending scrollLeft");
assert_approx_equals(scroller.scrollTop, -expectedScrollTop, epsilon, "ending scrollTop");
}, `writing-mode:vertical-lr; direction:rtl`);
test(() => {
var scroller = document.querySelector(".vertical-rl.ltr");
assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft");
assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop");
scroller.scrollLeft = -2*content_width;
scroller.scrollTop = 2*content_height;
assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft");
assert_approx_equals(scroller.scrollTop, expectedScrollTop, epsilon, "ending scrollTop");
}, `writing-mode:vertical-rl; direction:ltr`);
test(() => {
var scroller = document.querySelector(".vertical-rl.rtl");
assert_approx_equals(scroller.scrollLeft, 0, epsilon, "initial scrollLeft");
assert_approx_equals(scroller.scrollTop, 0, epsilon, "initial scrollTop");
scroller.scrollLeft = -2*content_width;
scroller.scrollTop = -2*content_height;
assert_approx_equals(scroller.scrollLeft, -expectedScrollLeft, epsilon, "ending scrollLeft");
assert_approx_equals(scroller.scrollTop, -expectedScrollTop, epsilon, "ending scrollTop");
}, `writing-mode:vertical-rl; direction:rtl`);
</script>
</body>
</html>