fune/testing/web-platform/tests/css/css-overflow/scroll-overflow-padding-block-001.html
Koji Ishii 9762f7f6c2 Bug 1603934 [wpt PR 20777] - Fix scrolling overflow of block-end padding in vertical-lr, a=testonly
Automatic update from web-platform-tests
Fix scrolling overflow of block-end padding in vertical-lr

When computing the [scrollable overflow], this patch fixes to
use the [block-end] padding instead of [line-under] padding.
These two are mostly equivalent, except when `vertical-lr`.

Legacy, Edge, and Gecko pass this test.

[scrollable overflow] https://drafts.csswg.org/css-overflow-3/#scrollable
[block-end]: https://drafts.csswg.org/css-writing-modes-3/#block-end
[line-under]: https://drafts.csswg.org/css-writing-modes-3/#line-under

Bug: 591099
Change-Id: I930caf8c40ef118524de33c1400f0ef2ab9fe59d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1967103
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Aleks Totic <atotic@chromium.org>
Commit-Queue: Koji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/master@{#724962}

--

wpt-commits: a9e454c8001472320dc3f049f6180427256a44dc
wpt-pr: 20777
2019-12-19 11:14:46 +00:00

48 lines
1.5 KiB
HTML

<!DOCTYPE html>
<title>Test "end-edges" of scrollable overflows in various writing modes</title>
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
<link rel="author" href="mailto:kojii@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
scroller {
display: inline-block;
overflow: auto;
width: 100px;
height: 100px;
font-size: 50px;
line-height: 1;
}
.vlr { writing-mode: vertical-lr; }
.vrl { writing-mode: vertical-rl; }
.htb > .block-start { padding-top: 200px; }
.htb > .block-end { padding-bottom: 200px; }
.vlr > .block-start { padding-left: 200px; }
.vlr > .block-end { padding-right: 200px; }
.vrl > .block-start { padding-right: 200px; }
.vrl > .block-end { padding-left: 200px; }
</style>
<body>
<div id="log"></div>
<div class="htb">
<scroller class="block-start">A</scroller>
<scroller class="block-end">A</scroller>
</div>
<div class="vlr">
<scroller class="block-start">A</scroller>
<scroller class="block-end">A</scroller>
</div>
<div class="vrl">
<scroller class="block-start">A</scroller>
<scroller class="block-end">A</scroller>
</div>
<script>
for (let element of document.getElementsByTagName('scroller')) {
let writing_mode = getComputedStyle(element).writingMode;
test(() => {
assert_equals(element.scrollWidth, element.offsetWidth, "scrollWidth");
assert_equals(element.scrollHeight, element.offsetHeight, "scrollHeight");
}, writing_mode + ' ' + element.className);
}
</script>
</body>