forked from mirrors/gecko-dev
2e14b31a0c
Automatic update from web-platform-tests Add tests to check layout overflow recalc These tests check how an element with transform contribute to the scrollable overflow of an element (and a positioned element). They also have a dynamic version, where the transform changes, and we test that it's still contributing as expected to the scrollable overflow. The dynamic tests won't pass if we don't recalc layout overflow properly (see methods LayoutBlock::RecalcChildLayoutOverflow() and LayoutBlock::RecalcPositionedDescendantsLayoutOverflow()). Change-Id: Id0f23874e13b8e88d9a183938e14edbd3fc7794a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2764508 Reviewed-by: Manuel Rego <rego@igalia.com> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#863652} -- wpt-commits: 65c8de58bea6a76b339bff3d3cd8b4a5d16cbdba wpt-pr: 28109
42 lines
1.4 KiB
HTML
42 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Overflow: Scrollable Overflow Transform Positioned 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 a positioned element.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<style>
|
|
.container {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow: auto;
|
|
background: silver;
|
|
border: solid thick;
|
|
}
|
|
|
|
.element {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: lime;
|
|
}
|
|
</style>
|
|
<body onload="checkLayout('.container')">
|
|
<div style="position: relative;">
|
|
|
|
<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>
|
|
|
|
</div>
|
|
</body>
|