mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Fix vertical alignment at the root of an IFC (#31636)
At the root of an inline formatting context, we used its vertical-align in order to compute the strut. That was wrong, since vertical-align on a block container shouldn't affect the contents, it should only affect the alignment of the block container (if it's inline-level) within the parent IFC. This was only working well if the block container was block-level, since effective_vertical_align_for_inline_layout returned `baseline` for block-level boxes. Instead of the outer display type, this patch changes the logic to check whether we are at the root of the IFC.
This commit is contained in:
Oriol Brufau
GitHub
parent
63527f56ca
commit
0860deba05
7 changed files with 223 additions and 58 deletions
|
|
@ -63058,6 +63058,19 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"vertical-align-122.xht": [
|
||||
"1d7c180f197b9262dd98aa162595b3eb914f60d1",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/CSS2/linebox/vertical-align-122-ref.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"vertical-align-applies-to-001.xht": [
|
||||
"fca1480f7367209223f370ff01acbc45ef7b3778",
|
||||
[
|
||||
|
|
@ -371510,6 +371523,10 @@
|
|||
"c0db9e0e8bbc2bbec91ffaa564e326b4744dd2fd",
|
||||
[]
|
||||
],
|
||||
"vertical-align-122-ref.xht": [
|
||||
"86b4856266285a3a9b66b5c426384d2699cbaceb",
|
||||
[]
|
||||
],
|
||||
"vertical-align-applies-to-001-ref.xht": [
|
||||
"8ed51e0c21a0613e67c49e3e36e488e176027165",
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[inline-formatting-context-011.xht]
|
||||
expected: FAIL
|
||||
87
tests/wpt/tests/css/CSS2/linebox/vertical-align-122-ref.xht
Normal file
87
tests/wpt/tests/css/CSS2/linebox/vertical-align-122-ref.xht
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"/>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
body {
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
}
|
||||
.person {
|
||||
position: absolute;
|
||||
width: 6em;
|
||||
height: 8.9em;
|
||||
}
|
||||
.face {
|
||||
position: relative;
|
||||
height: 4.2em;
|
||||
background: currentcolor;
|
||||
}
|
||||
.face > div {
|
||||
position: absolute;
|
||||
background: white;
|
||||
}
|
||||
.face > .mouth {
|
||||
left: 2em;
|
||||
top: 3em;
|
||||
width: 2em;
|
||||
height: .2em;
|
||||
}
|
||||
.face > .eye {
|
||||
top: 1em;
|
||||
width: 1em;
|
||||
height: 1.2em;
|
||||
}
|
||||
.face > .eye.left {
|
||||
left: 1em;
|
||||
}
|
||||
.face > .eye.right {
|
||||
right: 1em;
|
||||
}
|
||||
.torso {
|
||||
margin-top: 0.5em;
|
||||
height: 2.2em;
|
||||
border: 1em solid;
|
||||
}
|
||||
]]>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="person" style="left: 0em; top: 0em">
|
||||
<div class="face">
|
||||
<div class="eye left"></div>
|
||||
<div class="eye right"></div>
|
||||
<div class="mouth"></div>
|
||||
</div>
|
||||
<div class="torso"></div>
|
||||
</div>
|
||||
<div class="person" style="left: 7em; top: 0em">
|
||||
<div class="face">
|
||||
<div class="eye left"></div>
|
||||
<div class="eye right"></div>
|
||||
<div class="mouth"></div>
|
||||
</div>
|
||||
<div class="torso"></div>
|
||||
</div>
|
||||
<div class="person" style="left: 14em; top: .5em">
|
||||
<div class="face">
|
||||
<div class="eye left"></div>
|
||||
<div class="eye right"></div>
|
||||
<div class="mouth"></div>
|
||||
</div>
|
||||
<div class="torso"></div>
|
||||
</div>
|
||||
<div class="person" style="left: 21em; top: .5em">
|
||||
<div class="face">
|
||||
<div class="eye left"></div>
|
||||
<div class="eye right"></div>
|
||||
<div class="mouth"></div>
|
||||
</div>
|
||||
<div class="torso"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
62
tests/wpt/tests/css/CSS2/linebox/vertical-align-122.xht
Normal file
62
tests/wpt/tests/css/CSS2/linebox/vertical-align-122.xht
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: vertical-align on inline-block</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" />
|
||||
<link rel="help" href="https://github.com/servo/servo/issues/31604" />
|
||||
<link rel="help" href="https://github.com/servo/servo/issues/31634" />
|
||||
<link rel="match" href="vertical-align-122-ref.xht" />
|
||||
<meta name="assert" content="When vertical-align is used on an inline-block, it aligns the inline-block itself, not the contents inside it." />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
body {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
border: 1em solid;
|
||||
}
|
||||
.wrapper > div {
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
background: currentcolor;
|
||||
}
|
||||
.wrapper > canvas {
|
||||
width: 4em;
|
||||
height: 2em;
|
||||
}
|
||||
]]>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper" style="vertical-align: baseline">
|
||||
X<div></div><span>X</span>
|
||||
</div>
|
||||
<div class="wrapper" style="vertical-align: top">
|
||||
X<div></div><span>X</span>
|
||||
</div>
|
||||
<div class="wrapper" style="vertical-align: middle">
|
||||
X<div></div><span>X</span>
|
||||
</div>
|
||||
<div class="wrapper" style="vertical-align: bottom">
|
||||
X<div></div><span>X</span>
|
||||
</div>
|
||||
<br />
|
||||
<div class="wrapper" style="vertical-align: baseline">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
<div class="wrapper" style="vertical-align: top">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
<div class="wrapper" style="vertical-align: middle">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
<div class="wrapper" style="vertical-align: bottom">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue