зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
95bfca9851
Коммит
c317117475
|
@ -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>
|
Загрузка…
Ссылка в новой задаче