зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1705246
[wpt PR 28497] - [LayoutNG] Fixedpos offset in a nested multicol, a=testonly
Automatic update from web-platform-tests [LayoutNG] Fixedpos offset in a nested multicol When a fixedpos is nested in another OOF inside a nested multicol, and the outer OOF is not positioned at top:0 inside the containing block of the fixedpos, the offset of the fixedpos was incorrect. The reason being that its static position was getting updated in NGContainerFragmentBuilder::PropagateOOFPositionedInfo() to take the offset of the OOF into account. This change makes sure that the static position no longer adds in this offset and instead is relative to its containing block. Bug: 1198672 Change-Id: I79ec28a036637b4a985fe41752be323845b8c440 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2827007 Commit-Queue: Alison Maher <almaher@microsoft.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#873160} -- wpt-commits: d69b6ed41a784586305b02fdafcc486acad20038 wpt-pr: 28497
This commit is contained in:
Родитель
d82d62eaf8
Коммит
31b7a7be9f
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Fixedpos in a nested multicol with transform container.
|
||||
</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.multicol {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0px;
|
||||
}
|
||||
#outer {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#inner {
|
||||
width: 50px;
|
||||
margin-left: -100px;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 400px;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
width: 25px;
|
||||
height: 400px;
|
||||
background: green;
|
||||
top: 0px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="multicol" id="outer">
|
||||
<div class="multicol" id="inner">
|
||||
<div style="height: 400px;"></div>
|
||||
<div style="transform: translateX(0);">
|
||||
<div style="height: 400px; background: red;"></div>
|
||||
<div class="abs">
|
||||
<div style="height: 400px;"></div>
|
||||
<div class="abs" style="top: 0px;">
|
||||
<div class="fixed"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Fixedpos static position in a nested multicol with transform container.
|
||||
</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.multicol {
|
||||
column-count: 2;
|
||||
column-fill: auto;
|
||||
column-gap: 0px;
|
||||
}
|
||||
#outer {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#inner {
|
||||
width: 50px;
|
||||
margin-left: -200px;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 400px;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
width: 25px;
|
||||
height: 400px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="multicol" id="outer">
|
||||
<div class="multicol" id="inner">
|
||||
<div style="height: 400px;"></div>
|
||||
<div style="transform: translateX(0);">
|
||||
<div style="height: 400px;"></div>
|
||||
<div class="abs">
|
||||
<div style="height: 400px; background: red;"></div>
|
||||
<div class="abs" style="top: 0px;">
|
||||
<div class="fixed"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
Загрузка…
Ссылка в новой задаче