Skip to content

layout: Fix abspos position when it would be preceded by phantom line #57757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
servo-wpt-sync wants to merge 1 commit into
base: master
Choose a base branch
from
+160 −0
Open

layout: Fix abspos position when it would be preceded by phantom line #57757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions css/CSS2/abspos/static-inside-inline-001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<title>Static position inside inline</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#inline-formatting">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
If the #abspos would have had `position: static`, then it would split the #inline (§9.2.1.1).

The line box containing the preceding fragment of the #inline would have no text, padding,
border, margin, preserved newline nor any atomic in-flow content. Thus, it would be treated
as a zero-height line box (§9.4.2).

Therefore, the #abspos' static position for `top` is at the top of the #wrapper (§10.6.4).
This is despite the fact that when the #abspos is actually taken out of flow, the #inline
isn't split, so the line box has content and it's no longer a treated as a zero-height.
">

<style>
#wrapper {
overflow: hidden;
width: 100px;
height: 100px;
}
#inline {
line-height: 100px;
color: transparent;
}
#abspos {
position: absolute;
background-color: green;
width: 100px;
height: 100px;
}
#red {
position: absolute;
width: 100px;
height: 100px;
background: red;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="red"></div>

<div id="wrapper">
<span id="inline">
<div id="abspos"></div>
X
</span>
</div>
53 changes: 53 additions & 0 deletions css/CSS2/abspos/static-inside-inline-002.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<title>Static position inside inline</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#inline-formatting">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
If the #abspos would have had `position: static`, then it would split the #inline (§9.2.1.1).

The line box containing the preceding fragment of the #inline would have non-zero margin
and border. Thus, it wouldn't be treated as a zero-height line box (§9.4.2).

Therefore, the #abspos' static position for `top` is at 100px from the #wrapper (§10.6.4).
">

<style>
#wrapper {
overflow: hidden;
width: 100px;
height: 100px;
margin-top: -100px;
}
#inline {
line-height: 100px;
color: transparent;
border-left: 100px solid transparent;
margin-left: -100px;
}
#abspos {
position: absolute;
background-color: green;
width: 100px;
height: 100px;
}
#red {
position: absolute;
width: 100px;
height: 100px;
background: red;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="red"></div>

<div id="wrapper">
<span id="inline">
<div id="abspos"></div>
X
</span>
</div>
54 changes: 54 additions & 0 deletions css/CSS2/abspos/static-inside-inline-003.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<title>Static position inside inline</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#inline-formatting">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
If the #abspos would have had `position: static`, then it would split the #inline (§9.2.1.1).

The line box containing the preceding fragment of the #inline would have no text, padding,
border, margin, preserved newline nor any atomic in-flow content. Thus, it would be treated
as a zero-height line box (§9.4.2).

Therefore, the #abspos' static position for `top` is at the top of the #wrapper (§10.6.4).
This is despite the fact that when the #abspos is actually taken out of flow, the #inline
isn't split, so the line box has content and it's no longer a treated as a zero-height.
">

<style>
#wrapper {
overflow: hidden;
width: 100px;
height: 100px;
}
#inline {
line-height: 100px;
color: transparent;
border-right: 100px solid transparent;
}
#abspos {
position: absolute;
background-color: green;
width: 100px;
height: 100px;
}
#red {
position: absolute;
width: 100px;
height: 100px;
background: red;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="red"></div>

<div id="wrapper">
<span id="inline">
<div id="abspos"></div>
X
</span>
</div>