Ian Kilpatrick
81ae2032a2
Automatic update from web-platform-tests [anchor] Add support for "scrollable containing-block". The anchor positioning spec was updated to use a "scrollable containing-block" when anchorpos was used. Initially this was only for when "position-area" was specified, but recently resolve to change behaviour whenever we find a "default anchor" instead. See: https://github.com/w3c/csswg-drafts/issues/12552 To do this, expose the "InflowBounds" which we use to calculate where the padding-edge is located for within the scrollable overflow calculator. We access the inflow-bounds, and add/subtract the padding in the appropriate direction to get the padding-box edge. This new behaviour is flagged behind the CSSAnchorUpdate flag. Bug: 438515315 Change-Id: I11572e6905de017fbb6bece76cc50276fda19162 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6886660 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/main@{#1508587} -- wpt-commits: e3e6d49b581a98564f999f94a5d0c3d52ef601be wpt-pr: 54598
61 lines
2.0 KiB
HTML
61 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<title>Tests that finding a default anchor triggers the new scrollable containing-block.</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
|
|
<link rel="help" href="https://drafts.csswg.org/css-position-4/#scrollable-containing-block">
|
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12552">
|
|
<style>
|
|
.scroller {
|
|
/* Use overflow hidden instead of scroll to mitigate scrollbar differences. */
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 10px;
|
|
border: solid 3px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.filler {
|
|
min-width: 180px;
|
|
min-height: 180px;
|
|
}
|
|
|
|
.anchor {
|
|
anchor-name: --a;
|
|
}
|
|
|
|
.target {
|
|
position: absolute;
|
|
inset: 0;
|
|
place-self: stretch;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<body onload="checkLayout('.target')">
|
|
|
|
<!-- No default anchor should use the regular containing-block. -->
|
|
<div class="scroller">
|
|
<div class="filler"><div class="anchor"></div></div>
|
|
<div class="target" data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<!-- A default anchor - should use the scrollable containing-block. -->
|
|
<div class="scroller">
|
|
<div class="filler"><div class="anchor"></div></div>
|
|
<div class="target" style="position-anchor: --a;" data-expected-width="200" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<!-- A non-valid default anchor - should use the regular containing-block. -->
|
|
<div class="scroller">
|
|
<div class="filler"><div class="anchor"></div></div>
|
|
<div class="target" style="position-anchor: --b;" data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
|
|
<!-- Only specifying position-area - should use the regular containing-block. -->
|
|
<div class="scroller">
|
|
<div class="filler"><div class="anchor"></div></div>
|
|
<div class="target" style="position-area: top;" data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|