forked from mirrors/gecko-dev
Automatic update from web-platform-tests [layout] Fix self-collapsing end-margins contributing to overflow. Previously we just took the end margin-strut, and used this for the scrollable-overflow. This was incorrect. As the end margin-strut is used for positioning self-collapsing blocks we ended up "double counting" these margins. This patch uses the "final" margin-strut, and subtracts the self-collapsing end margin-strut to correctly determine the block-end margin which contributes to scrollable-overflow. Bug: 1136403 Change-Id: I7d0d0fe801948c3ce818719f28f1a7c795a7ec56 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2466379 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#816586} -- wpt-commits: c808aa3d15a42648d8b25a838024813990959e37 wpt-pr: 26084
23 lines
1.3 KiB
HTML
23 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta name="assert" content="This ensures that an end self-collapsing block contributes to the scrollable overflow correctly.">
|
|
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<body onload="checkLayout('.target')">
|
|
<div class="target" style="width: 100px; height: 100px; overflow: scroll;" data-expected-scroll-height="110">
|
|
<div style="width: 50px; height: 100px; margin-bottom: 10px; background: lime;"></div>
|
|
<div></div> <!-- self-collapsing -->
|
|
</div>
|
|
<div class="target" style="width: 100px; height: 100px; overflow: scroll;" data-expected-scroll-height="150">
|
|
<div style="width: 50px; height: 100px; margin-bottom: 10px; background: lime;"></div>
|
|
<div style="margin-bottom: 50px;"></div> <!-- self-collapsing -->
|
|
</div>
|
|
<div class="target" style="width: 100px; height: 100px; overflow: scroll;" data-expected-scroll-height="180">
|
|
<div style="width: 50px; height: 100px; margin-bottom: 30px; background: lime;"></div>
|
|
<div style="margin-bottom: 100px;"> <!-- self-collapsing -->
|
|
<div style="margin-top: -20px;"></div>
|
|
</div>
|
|
</div>
|
|
<div id=log></div>
|
|
</body>
|