Bug 1502295 [wpt PR 13731] - Use the correct out-of-flow containing block in continuations., a=testonly

Automatic update from web-platform-testsUse the correct out-of-flow containing block in continuations.

We cannot just use the innermost inline, without checking if it's a
valid containing block for absolutely positioned descendants. Find the
right ancestor.

The idea of using the *next* inline in the continuation chain may not be
ideal, but it's not obvious that using the previous one would be much
better (it's more work to find that one anyway), so leaving it as it is.
The spec says that if the relatively positioned inline occurs on
multiple lines, CSS 2 doesn't define exact behavior. Therefore, in the
test, put the same amount of stuff on the line preceding the
interrupting block-level element as on the line following it, to be sure
that the abspos descendant is sized the way we want it to be.

Bug: 897535
Change-Id: Ie9bc4e83400bc283b9c95aafef821000f2303d12
Reviewed-on: https://chromium-review.googlesource.com/c/1301457
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Reviewed-by: vmpstr <vmpstr@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#603466}

--

wpt-commits: 38470be9afc947a30b9b1a066d8419cec4d0a3a8
wpt-pr: 13731
This commit is contained in:
Morten Stenshorne 2018-11-09 16:54:08 +00:00 коммит произвёл moz-wptsync-bot
Родитель 95bfca9851
Коммит c317117475
1 изменённых файлов: 33 добавлений и 0 удалений

Просмотреть файл

@ -0,0 +1,33 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#containing-block-details">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">
<style>
.rel { position:relative; }
.inline-block { display:inline-block; width:100px; height:1px; }
.inline-block.large { width:200px; }
#target { position:absolute; width:100%; height:100px; background:green; }
</style>
<p>There should be a green square below.</p>
<div style="height:200px;">
<span class="rel" id="notContainingBlockOfTarget">
<div class="large inline-block"></div>
<br>
<span id="containingBlockOfTarget" class="rel">
<div class="inline-block"></div>
<span>
<div>
<div id="target"></div>
</div>
</span>
<div class="inline-block"></div></span><br>
<div class="large inline-block"></div>
</span>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> {
assert_equals(document.getElementById("target").offsetWidth, 100);
}, "Make sure that we're sized by the right ancestor");
</script>