Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 11:25:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1807644 - Fix container units in ::before/::after/::marker with ::first-line. r=emilio

Browse Source 
Container units in a ::before, ::after, or inside positioned ::marker
were being resolved against the viewport when these pseudo-elements
generate a box.

That's because RestyleManager::DoReparentComputedStyleForFirstLine used
nullptr as the element, thus making it impossible to iterate the
ancestor chain to find a container for resolving the units.

Differential Revision: https://phabricator.services.mozilla.com/D165541
This commit is contained in:
Oriol Brufau 2022-12-27 08:59:29 +00:00
parent 56681edcbc
commit 06d07db8b6
3 changed files with 63 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
layout/base/RestyleManager.cpp
View File

@ -3611,10 +3611,7 @@ void RestyleManager::DoReparentComputedStyleForFirstLine(
// GeckoRestyleManager does here, because that relies on knowing the parents
// of ComputedStyles, and we don't know those.
ComputedStyle* oldStyle = aFrame->Style();
Element* ourElement =
oldStyle->GetPseudoType() == PseudoStyleType::NotPseudo && isElement
? aFrame->GetContent()->AsElement()
: nullptr;
Element* ourElement = isElement ? aFrame->GetContent()->AsElement() : nullptr;
ComputedStyle* newParent = newParentStyle;
ComputedStyle* newParentIgnoringFirstLine;

3
testing/web-platform/meta/css/css-contain/container-queries/pseudo-elements-008.html.ini Normal file
View File

@ -0,0 +1,3 @@
[pseudo-elements-008.html]
[Originating element container for ::backdrop]
expected: FAIL

59
testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-008.html Normal file
View File

@ -0,0 +1,59 @@
<!doctype html>
<title>@container: originating element container for pseudo elements</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
.container { container-type: inline-size; }
#target { display: list-item; }
#target::before { content: "PASS"; font-size: 10cqw; }
#target::after { font-size: 10cqw; }
#target::marker { font-size: 10cqw; }
#target::first-line { font-size: 10cqw; }
#target::first-letter { font-size: 10cqw; }
#outer::first-line { font-size: 10cqw; }
#outer::first-letter { font-size: 10cqw; }
dialog::backdrop { font-size: 10cqw; }
</style>
<div style="width: 400px" class="container">
<div style="width: 300px" class="container">
<div id="target" class="container" style="width: 200px">First-line</div>
<dialog id="dialog" class="container" style="width: 100px"></dialog>
</div>
<div style="width: 400px" class="container">
<div id="outer" style="width: 300px" class="container">
<div class="container" style="width: 200px">First-line</div>
</div>
</div>
<script>
setup(() => assert_implements_container_queries());
test(() => {
assert_equals(getComputedStyle(target, "::before").fontSize, "20px");
}, "Originating element container for ::before");
test(() => {
assert_equals(getComputedStyle(target, "::after").fontSize, "20px");
}, "Originating element container for ::after");
test(() => {
assert_equals(getComputedStyle(target, "::marker").fontSize, "20px");
}, "Originating element container for ::marker");
test(() => {
assert_equals(getComputedStyle(target, "::first-line").fontSize, "20px");
}, "Originating element container for ::first-line");
test(() => {
assert_equals(getComputedStyle(target, "::first-letter").fontSize, "20px");
}, "Originating element container for ::first-letter");
test(() => {
assert_equals(getComputedStyle(outer, "::first-line").fontSize, "30px");
}, "Originating element container for outer ::first-line");
test(() => {
assert_equals(getComputedStyle(outer, "::first-letter").fontSize, "30px");
}, "Originating element container for outer ::first-letter");
test((t) => {
t.add_cleanup(() => dialog.close());
assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "30px", "::backdrop not rendered");
dialog.showModal();
assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "10px", "::backdrop rendered");
}, "Originating element container for ::backdrop");
</script>