Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-15 18:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Layout floats as children of their inline ancestors (#30130)

Browse source 
When layout was split into two phases, floats were laid out as direct
children of the inline formatting context. This meant that they were
positioned properly, but not properly made children of their inline
ancestors' stacking contexts. This change maintains the proper
positioning of floats, but positions them relatively to their inline
ancestors.

The big change here is that `text-align` needs to be taken into account
before actually laying out LineItems. This has the added benefit of
setting inline layout for the implementation of `text-align: full`. Now
all line items are laid out at the real final position and we can adjust
the `start_corner` property of float `BoxFragments` when their ancestors
are laid out.
This commit is contained in:
Martin Robinson 2023-08-22 22:10:34 +02:00 • committed by GitHub
parent 1c41ed93ff
commit bd285f543e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 314 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

2
tests/wpt/meta-legacy-layout/css/css-text/text-indent/text-indent-overflow.html.ini Normal file
View file

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

34
tests/wpt/meta/MANIFEST.json
View file

@ -244958,6 +244958,19 @@
{}
]
],
"text-indent-overflow.html": [
"c8678bf8aa85513a2d883341dd6bde7d53380ec2",
[
null,
[
[
"/css/css-text/text-indent/reference/text-indent-overflow-ref.html",
"=="
]
],
{}
]
],
"text-indent-percentage-001.xht": [
"6da26308b266e6d1574d78238f9d12cf5a404b25",
[
@ -245023,6 +245036,19 @@
{}
]
],
"text-indent-text-align-end.html": [
"df37463ae7b04a06c3267395df1d9aafa9fa3356",
[
null,
[
[
"/css/css-text/text-indent/reference/text-indent-text-align-end-ref.html",
"=="
]
],
{}
]
],
"text-indent-with-absolute-pos-child.html": [
"16a6deb4769d444c88f95e1018efc5144a327f1d",
[
@ -407119,6 +407145,10 @@
"faa6adc4dca1b68585d06bece5d8982c18377180",
[]
],
"text-indent-overflow-ref.html": [
"578cc760677e7c3540b307254f052420ff00a587",
[]
],
"text-indent-percentage-001-ref.xht": [
"5b065d1db7ac1e399668e8588727be09922bf62b",
[]
@ -407131,6 +407161,10 @@
"4d85456dd172b108486b51eedddb687209a30b2a",
[]
],
"text-indent-text-align-end-ref.html": [
"c4619235d395cd2e10ea3e50c784880048508812",
[]
],
"text-indent-with-absolute-pos-child-ref.html": [
"e5feb2c7f98dcf426a7874ca2b57e0d15f18ffe3",
[]

2
tests/wpt/meta/css/css-color/inline-opacity-float-child.html.ini
View file

@ -1,2 +0,0 @@
[inline-opacity-float-child.html]
expected: FAIL

2
tests/wpt/meta/css/filter-effects/filtered-inline-applies-to-float.html.ini
View file

@ -1,2 +0,0 @@
[filtered-inline-applies-to-float.html]
expected: FAIL

24
tests/wpt/tests/css/css-text/text-indent/reference/text-indent-overflow-ref.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: text-indent causing text to overflow container</title>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
<style>
.container {
border: solid;
width: 200px;
}
.content {
display: inline-block;
width: 50px;
height: 20px;
background: green;
}
</style>
<p>Test passes if the green square is positioned just past the content edge of the box.</p>
<div class="container">
<span style="margin-left: 200px;"><div class="content"></div></span>
</div>

26
tests/wpt/tests/css/css-text/text-indent/reference/text-indent-text-align-end-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: text-indent with text-align: end</title>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
<meta name="assert" content="Percentages in text-indent refer to width of the element's content box">
<style>
.container {
border: solid;
width: 200px;
text-align: end;
}
.content {
display: inline-block;
width: 50px;
height: 20px;
background: green;
}
</style>
<p>Test passes if the green square is positioned against the right edge of the box.</p>
<div class="container">
<div class="content"></div>
</div>

33
tests/wpt/tests/css/css-text/text-indent/text-indent-overflow.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: text-indent causing text to overflow container</title>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
<link rel="match" href="reference/text-indent-overflow-ref.html">
<meta name="assert" content="Percentages in text-indent refer to width of the element's content box">
<style>
.container {
border: solid;
width: 200px;
text-indent: 200px;
text-align: right;
}
.content {
display: inline-block;
width: 50px;
height: 20px;
background: green;
}
</style>
<p>Test passes if the green square is positioned just past the content edge of the box.</p>
<!--
In this case the `text-indent` is as wide as the container, but should be
handled like the linebox had a large left margin, causing the content to
overflow the container.
-->
<div class="container">
<div class="content"></div>
</div>

32
tests/wpt/tests/css/css-text/text-indent/text-indent-text-align-end.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: text-indent with text-align: end</title>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
<link rel="match" href="reference/text-indent-text-align-end-ref.html">
<meta name="assert" content="Percentages in text-indent refer to width of the element's content box">
<style>
.container {
border: solid;
width: 200px;
text-indent: 50px;
text-align: end;
}
.content {
display: inline-block;
width: 50px;
height: 20px;
background: green;
}
</style>
<p>Test passes if the green square is positioned against the right edge of the box.</p>
<!--
In this case the `text-indent` doesn't affect the positioning of the content
when text-align positions it further than the indent does.
-->
<div class="container">
<div class="content"></div>
</div>