Bug 1930427: Don't stretch abs-positioned frames if any inset is auto. r=layout-reviewers,emilio

Differential Revision: https://phabricator.services.mozilla.com/D228666
This commit is contained in:
David Shin 2024-11-13 17:36:24 +00:00
parent ee24230231
commit 5c67a60245
6 changed files with 94 additions and 5 deletions

View File

@ -6827,7 +6827,17 @@ LogicalSize nsIFrame::ComputeAbsolutePosAutoSize(
: LogicalSize(aWM);
auto shouldStretch = [](StyleSelfAlignment aAlignment, const nsIFrame* aFrame,
bool aStartIsAuto, bool aEndIsAuto) {
const bool insetNonAuto = !aStartIsAuto && !aEndIsAuto;
if (aStartIsAuto || aEndIsAuto) {
// Note(dshin, bug 1930427): This is not part of the current spec [1];
// however, no one implements the new inset behaviour [2], and the old
// behaviour [3] ends up computing the static size if both or one inset is
// auto.
//
// [1]: https://drafts.csswg.org/css-position-3/#abspos-auto-size
// [2]: https://drafts.csswg.org/css-position-3/#resolving-insets
// [3]: https://drafts.csswg.org/css-position-3/#abspos-old
return false;
}
// Don't care about flag bits for auto-sizing.
aAlignment &= ~StyleSelfAlignment::FLAG_BITS;
@ -6838,8 +6848,7 @@ LogicalSize nsIFrame::ComputeAbsolutePosAutoSize(
if (aAlignment == StyleSelfAlignment::NORMAL) {
// Some replaced elements behave as semi-replaced elements - we want them
// to stretch (See bug 1740580).
return insetNonAuto && !aFrame->HasReplacedSizing() &&
!aFrame->IsTableWrapperFrame();
return !aFrame->HasReplacedSizing() && !aFrame->IsTableWrapperFrame();
}
return false;

View File

@ -28,3 +28,6 @@
[Offsets for position-area: bottom span-all]
expected: FAIL
[Offsets for position-area: span-all]
expected: FAIL

View File

@ -28,3 +28,6 @@
[Offsets for position-area: bottom span-all]
expected: FAIL
[Offsets for position-area: span-all]
expected: FAIL

View File

@ -128,8 +128,8 @@
[Offsets for: span-bottom span-all]
expected: FAIL
[Offsets for: none]
[Offsets for: span-all]
expected: FAIL
[Offsets for: span-all top]
[Offsets for: span-all span-all]
expected: FAIL

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-layout">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-old">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11195">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1930427">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1930850">
<meta name="assert" content="Ensures that absolutely positioned elements stretch only when both insets are non-auto.">
<style>
.container {
width: 25px;
height: 25px;
border: 1px solid;
position: relative;
display: inline-block;
}
.ref {
background: purple;
}
</style>
<!-- All insets auto -->
<div class="container"></div><br>
<!-- One inset auto -->
<div class="container"></div
><div class="container"></div
><div class="container"></div
><div class="container"></div><br>
<!-- Neither inset auto -->
<div class="container"><div class="ref" style="width: 10px; height: 100%;"></div></div
><div class="container"><div class="ref" style="width: 100%; height: 10px;"></div></div>

View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-layout">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-old">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11195">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1930427">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1930850">
<link rel="match" href="align-self-stretch-auto-size-ref.tentative.html">
<meta name="assert" content="Ensures that absolutely positioned elements stretch only when both insets are non-auto.">
<style>
.container {
width: 25px;
height: 25px;
border: 1px solid;
position: relative;
display: inline-block;
}
.abs {
position: absolute;
align-self: stretch;
justify-self: stretch;
background: purple;
}
.w {
width: 10px;
}
.h {
height: 10px;
}
</style>
<!-- All insets auto -->
<div class="container"><div class="abs"></div></div><br>
<!-- One inset auto -->
<div class="container"><div class="abs w" style="top: 0;"></div></div
><div class="container"><div class="abs w" style="bottom: 0;"></div></div
><div class="container"><div class="abs h" style="left: 0;"></div></div
><div class="container"><div class="abs h" style="right: 0;"></div></div><br>
<!-- Neither inset auto -->
<div class="container"><div class="abs w" style="top: 0; bottom: 0;"></div></div
><div class="container"><div class="abs h" style="left: 0; right: 0;"></div></div>