Anonymous boxes that wrap inlines should not inherit overflow (#30579)

In legacy layout, anonymous text wrappers were inheriting the `overflow`
and `text-overflow` properties. This results in the creation of extra
clipping for these anonymous wrappers which could clip away floats. We
will likely implement `text-overflow` differently in non-legacy layout.

This change marks all legacy layout pseudo elements as "legacy" and also
adds a new pseudo element for non-legacy layout that does not inherit
`overflow`.

Fixes #30562.

Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Martin Robinson 2023-10-19 15:43:55 +02:00 committed by GitHub
parent 634a5d9cf5
commit fd31da9102
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 120 additions and 88 deletions

View file

@ -61432,6 +61432,19 @@
{}
]
],
"float-in-inline-anonymous-block-with-overflow-hidden.html": [
"948394e7f9b348c72a13cc64f4852a988b2fa59c",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"float-in-nested-multicol-001.html": [
"8e1a257e389d0fdc6a4a69f63b81f32378a7b944",
[

View file

@ -1,2 +0,0 @@
[text-overflow-on-flexbox-001.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[position-sticky-hyperlink.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[filtered-inline-is-container.html]
expected: FAIL

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<title>CSS Test: A float wrapped in an anonymous block should be visible within a container with overflow: hidden.</title>
<link rel="author" href="mailto:obrufrau@igalia.com" title="Oriol Brufrau">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="overflow: hidden; width: 100px; height: 100px; background: red">
<div style="height: 50px; background: green"></div>
<span>
<div style="float: left; width: 100px; height: 50px; background: green"></div>
</span>
</div>