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:
Alison Maher 2021-04-23 10:20:31 +00:00 коммит произвёл moz-wptsync-bot
Родитель d82d62eaf8
Коммит 31b7a7be9f
2 изменённых файлов: 95 добавлений и 0 удалений

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

@ -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>