mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
layout: Rewrite Servo's vertical-align support to match CSS 2.1 §
10.8, and implement `vertical-align: middle` per CSS 2.1 § 10.8.1. `InlineMetrics` has been split into `InlineMetrics` for fragments and `LineMetrics` for lines. Both structures' fields have been renamed in order to more clearly delineate the difference between *space* and *content*. Vertical positioning of fragments has been reworked to take margins and borders into account only for replaced content. This patch fixes the `vertical_align_super_a.html` reftest. Servo now matches the rendering that Gecko and WebKit produce. Additionally, this includes a test for the popular inline-block centering technique described here: https://s.codepen.io/shshaw/fullpage/gEiDt?#Inline-Block
This commit is contained in:
Patrick Walton
parent
56b41fa2ea
commit
773614f84c
35 changed files with 522 additions and 389 deletions
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox-flex-direction-default.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox-flex-direction-row-reverse.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox-flex-direction-row.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox-flex-wrap-wrap-reverse.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox-flex-wrap-wrap.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[c5501-imrgn-t-000.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[c5503-imrgn-b-000.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[inline-block-valign-002.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[line-height-129.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[margin-applies-to-012.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-007.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-008.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-019.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-020.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-031.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-032.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-043.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-044.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-055.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-056.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-067.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-068.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-079.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[vertical-align-080.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -2528,6 +2528,18 @@
|
|||
"url": "/_mozilla/css/inline_block_border_intrinsic_size_a.html"
|
||||
}
|
||||
],
|
||||
"css/inline_block_centering_a.html": [
|
||||
{
|
||||
"path": "css/inline_block_centering_a.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/inline_block_centering_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/inline_block_centering_a.html"
|
||||
}
|
||||
],
|
||||
"css/inline_block_height_with_out_of_flow_child_a.html": [
|
||||
{
|
||||
"path": "css/inline_block_height_with_out_of_flow_child_a.html",
|
||||
|
|
@ -5688,6 +5700,18 @@
|
|||
"url": "/_mozilla/css/vertical_align_inside_table_a.html"
|
||||
}
|
||||
],
|
||||
"css/vertical_align_middle_a.html": [
|
||||
{
|
||||
"path": "css/vertical_align_middle_a.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/vertical_align_middle_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/vertical_align_middle_a.html"
|
||||
}
|
||||
],
|
||||
"css/vertical_align_sub_a.html": [
|
||||
{
|
||||
"path": "css/vertical_align_sub_a.html",
|
||||
|
|
@ -16286,6 +16310,18 @@
|
|||
"url": "/_mozilla/css/inline_block_border_intrinsic_size_a.html"
|
||||
}
|
||||
],
|
||||
"css/inline_block_centering_a.html": [
|
||||
{
|
||||
"path": "css/inline_block_centering_a.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/inline_block_centering_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/inline_block_centering_a.html"
|
||||
}
|
||||
],
|
||||
"css/inline_block_height_with_out_of_flow_child_a.html": [
|
||||
{
|
||||
"path": "css/inline_block_height_with_out_of_flow_child_a.html",
|
||||
|
|
@ -19446,6 +19482,18 @@
|
|||
"url": "/_mozilla/css/vertical_align_inside_table_a.html"
|
||||
}
|
||||
],
|
||||
"css/vertical_align_middle_a.html": [
|
||||
{
|
||||
"path": "css/vertical_align_middle_a.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/vertical_align_middle_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/vertical_align_middle_a.html"
|
||||
}
|
||||
],
|
||||
"css/vertical_align_sub_a.html": [
|
||||
{
|
||||
"path": "css/vertical_align_sub_a.html",
|
||||
|
|
|
|||
33
tests/wpt/mozilla/tests/css/inline_block_centering_a.html
Normal file
33
tests/wpt/mozilla/tests/css/inline_block_centering_a.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="match" href="inline_block_centering_ref.html">
|
||||
<!--
|
||||
Tests that the popular inline-block centering technique works.
|
||||
|
||||
See: https://s.codepen.io/shshaw/fullpage/gEiDt?#Inline-Block
|
||||
-->
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
}
|
||||
#a {
|
||||
background: blue;
|
||||
position: absolute;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#a:after, #b {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#a:after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
}
|
||||
#b {
|
||||
background: green;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<div id=a><div id=b>
|
||||
26
tests/wpt/mozilla/tests/css/inline_block_centering_ref.html
Normal file
26
tests/wpt/mozilla/tests/css/inline_block_centering_ref.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<!--
|
||||
Tests that the popular inline-block centering technique works.
|
||||
|
||||
See: https://s.codepen.io/shshaw/fullpage/gEiDt?#Inline-Block
|
||||
-->
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
left: 0;
|
||||
}
|
||||
#a {
|
||||
background: blue;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
}
|
||||
#b {
|
||||
background: green;
|
||||
height: 50px;
|
||||
top: 25px;
|
||||
}
|
||||
</style>
|
||||
<div id=a><div id=b>
|
||||
|
||||
14
tests/wpt/mozilla/tests/css/vertical_align_middle_a.html
Normal file
14
tests/wpt/mozilla/tests/css/vertical_align_middle_a.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="match" href="vertical_align_middle_ref.html">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<img width=50 height=50 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYPj/HwADAgH/xCAAOgAAAABJRU5ErkJggg=="><!--
|
||||
--><img width=100 height=100 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgaGD4DwAChAGA2FJdiQAAAABJRU5ErkJggg==">
|
||||
|
||||
27
tests/wpt/mozilla/tests/css/vertical_align_middle_ref.html
Normal file
27
tests/wpt/mozilla/tests/css/vertical_align_middle_ref.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
#a {
|
||||
left: 0;
|
||||
top: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: blue;
|
||||
}
|
||||
#b {
|
||||
left: 50px;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id=a></div>
|
||||
<div id=b></div>
|
||||
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
div {
|
||||
color: blue;
|
||||
margin-top: 100px;
|
||||
margin-top: 82px;
|
||||
}
|
||||
.align {
|
||||
color: red;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue