Ian Kilpatrick
901791b797
Automatic update from web-platform-tests [anchor] Allow non-normal alignment to overflow in scrollers. abspos with non-normal alignment has new default overflow behaviour. When we overflow the IMCB we need to "shift" our position to be within the union of the IMCB and the original containing-block. We take the union as the IMCB may be larger than the original containing-block. However if our containing-block is scrollable, we should allow it to overflow in the scrollable direction. To do this set out "overflow-limit" to infinity when we can scroll in that direction. Additionally we implement the WebKit behaviour described in: https://github.com/w3c/csswg-drafts/issues/14008 If a fixed-pos (at the viewport) has a default anchor (e.g. it'll scroll with that anchor by default), we allow it to overflow *up to* the scroll-rect. Fixed: 494601117, 452336844, 483370598 Change-Id: I7383def3d04ac07aed2e6dc063246fe0101874c7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7702852 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1646858} -- wpt-commits: 88e63dac31b6fe0361a7868b6c2c88ec1278018e wpt-pr: 60640
54 lines
1.6 KiB
HTML
54 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#auto-safety-position">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<style>
|
|
.container {
|
|
position: relative;
|
|
overflow: scroll;
|
|
scrollbar-width: none;
|
|
width: 100px;
|
|
height: 100px;
|
|
border: solid 2px;
|
|
margin: 10px;
|
|
}
|
|
.vrl {
|
|
writing-mode: vertical-rl;
|
|
direction: rtl;
|
|
}
|
|
|
|
.abspos {
|
|
position: absolute;
|
|
background: green;
|
|
width: 150px;
|
|
height: 150px;
|
|
/* Creates an IMCB which is 0x0 in the middle of the container. */
|
|
inset: 50px;
|
|
}
|
|
</style>
|
|
<body onload="checkLayout('.container')">
|
|
|
|
<div class="container" data-expected-scroll-width="200" data-expected-scroll-height="200">
|
|
<div class="abspos" style="place-self: start;"></div>
|
|
</div>
|
|
<div class="container" data-expected-scroll-width="150" data-expected-scroll-height="150">
|
|
<div class="abspos" style="place-self: center;"></div>
|
|
</div>
|
|
<div class="container" data-expected-scroll-width="150" data-expected-scroll-height="150">
|
|
<div class="abspos" style="place-self: end;"></div>
|
|
</div>
|
|
|
|
<div class="container vrl" data-expected-scroll-width="200" data-expected-scroll-height="200">
|
|
<div class="abspos" style="place-self: start;"></div>
|
|
</div>
|
|
<div class="container vrl" data-expected-scroll-width="150" data-expected-scroll-height="150">
|
|
<div class="abspos" style="place-self: center;"></div>
|
|
</div>
|
|
<div class="container vrl" data-expected-scroll-width="150" data-expected-scroll-height="150">
|
|
<div class="abspos" style="place-self: end;"></div>
|
|
</div>
|
|
|
|
<div id=log></div>
|
|
|