forked from mirrors/gecko-dev
adae3a271c
Automatic update from web-platform-tests Add tests to check layout overflow recalc This test check how an element with transform contribute to the scrollable overflow of an inline element. It also has a dynamic version, where the transform changes, and we test that it's still contributing as expected to the scrollable overflow. The dynamic test won't pass if we don't recalc layout overflow properly (see methods LayoutBlock::RecalcChildLayoutOverflow() and LayoutBlockFlow::RecalcInlineChildrenLayoutOverflow()). Change-Id: I7996534d72cb774eac0554a1b8eb6124560ce7ec Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2773220 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#864440} -- wpt-commits: 1bc6797d277399ff4c10c1be2000e2290562177b wpt-pr: 28138
40 lines
1.3 KiB
HTML
40 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Overflow: Scrollable Overflow Transform Inline Element</title>
|
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
|
|
<meta name="assert" content="Checks that elements with transform contribute to the scrollable overflow on an inline element.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<style>
|
|
.container {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow: auto;
|
|
background: silver;
|
|
border: solid thick;
|
|
}
|
|
|
|
.element {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: lime;
|
|
}
|
|
</style>
|
|
<body onload="checkLayout('.container')">
|
|
|
|
<div class="container" style="top: 0px;" data-expected-scroll-width="250">
|
|
<div style="transform: translateX(200px);" class="element"></div>
|
|
</div>
|
|
|
|
<div class="container" style="top: 150px;" data-expected-scroll-height="350">
|
|
<div style="transform: translateY(300px);" class="element"></div>
|
|
</div>
|
|
|
|
<div class="container" style="top: 300px;" data-expected-scroll-width="250" data-expected-scroll-height="350">
|
|
<div style="transform: translate(200px, 300px);" class="element"></div>
|
|
</div>
|
|
|
|
</body>
|