Skip to content

Commit e4ea170

Browse files
Loirooriolmrobinson
authored and
servo-wpt-sync
committed
layout: Implement block-axis centering for buttons
Mark `<button>` elements and `<input>` that lay out as buttons with a new `FragmentFlags::IS_BUTTON` flag. Then, if they contain a block formatting context, center their contents in the block axis. This is done similarly as for `vertical-align` on table cells: we wrap the contents inside a `PositioningFragment`, which is then shifted to appear at the correct place. But unlike table cells, this is done before caching the layout results, not afterwards. In the future, when we implement `align-content` for block containers, we should probably switch to that. Co-authored-by: Martin Robinson <mrobinson@igalia.com> Signed-off-by: Oriol Brufau <obrufau@igalia.com>
1 parent 37cd7ff commit e4ea170

5 files changed

Lines changed: 81 additions & 0 deletions

File tree

‎html/rendering/widgets/button-layout/centering-001-ref.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<style>
4+
div {
5+
display: table-cell;
6+
width: 200px;
7+
height: 200px;
8+
text-align: center;
9+
vertical-align: middle;
10+
}
11+
</style>
12+
<button><div>ABC</div></button>

‎html/rendering/widgets/button-layout/centering-001.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>Text inside of a button gets centered vertically and horizontally</title>
4+
<link rel="author" href="mailto:obrufau@igalia.com" title="Oriol Brufau">
5+
<link rel="help" href="https://html.spec.whatwg.org/#button-layout">
6+
<link rel="match" href="centering-001-ref.html">
7+
<style>
8+
button {
9+
box-sizing: content-box;
10+
width: 200px;
11+
height: 200px;
12+
}
13+
</style>
14+
<button>ABC</button>

‎html/rendering/widgets/button-layout/centering-002.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>Text inside of an input with button layout gets centered vertically and horizontally</title>
4+
<link rel="author" href="mailto:obrufau@igalia.com" title="Oriol Brufau">
5+
<link rel="help" href="https://html.spec.whatwg.org/#button-layout">
6+
<link rel="match" href="centering-001-ref.html">
7+
<style>
8+
input {
9+
box-sizing: content-box;
10+
width: 200px;
11+
height: 200px;
12+
}
13+
</style>
14+
<input type="button" value="ABC">

‎html/rendering/widgets/button-layout/centering-003-ref.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<style>
4+
.wrapper {
5+
display: table-cell;
6+
width: 200px;
7+
height: 200px;
8+
vertical-align: middle;
9+
}
10+
.wrapper > div {
11+
width: 100px;
12+
border: solid;
13+
text-align: center;
14+
}
15+
</style>
16+
<button>
17+
<div class="wrapper">
18+
<div>ABC</div>
19+
</div>
20+
</button>

‎html/rendering/widgets/button-layout/centering-003.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>Block-level inside of a button gets centered vertically but not horizontally</title>
4+
<link rel="author" href="mailto:obrufau@igalia.com" title="Oriol Brufau">
5+
<link rel="help" href="https://html.spec.whatwg.org/#button-layout">
6+
<link rel="help" href="https://github.com/whatwg/html/issues/12701">
7+
<link rel="match" href="centering-003-ref.html">
8+
<style>
9+
button {
10+
box-sizing: content-box;
11+
width: 200px;
12+
height: 200px;
13+
}
14+
button > div {
15+
width: 100px;
16+
border: solid;
17+
}
18+
</style>
19+
<button>
20+
<div>ABC</div>
21+
</button>

0 commit comments

Comments
 (0)