Skip to content

Commit ca5abb7

Browse files
emiliomoz-wptsync-bot
emilio
authored and
moz-wptsync-bot
committed
Remove nsHTMLButtonControlFrame.
This removes the implementation of nsHTMLButtonControlFrame, instead reusing nsBlockFrame + align-content (or the relevant display type for flex / grid / columns / etc). This matches what Blink does and, for the most part, it is trivial. It requires moving some special cases around, and override inline flow display, tho so that buttons don't suddenly start fragmenting in the inline axis. It adds a tiny fix for a writing-mode mismatch in nsBlockFrame::AlignContent(), covered by layout/reftests/writing-mode/1138356-1-button-contents-alignment.html containing-block-change-button tests are tweaked to avoid overflowing the 600px viewport from WPT reftests causing scrollbar fuzziness. contain-layout-baseline-005.html removes the <select> element just like https://chromium-review.googlesource.com/c/chromium/src/+/5479489 removed the <button>s, since they align the same now, added a test for that. Differential Revision: https://phabricator.services.mozilla.com/D257149 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1873301 gecko-commit: 197645ffd8065cb1c8bc1137f804091695494284 gecko-reviewers: dholbert, layout-reviewers, dshin
1 parent fc9fc6f commit ca5abb7

7 files changed

Lines changed: 72 additions & 4 deletions

‎css/css-contain/contain-layout-baseline-005.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
<div class="wrapper">
4444
<canvas></canvas>
4545
<div class="inline-block">foo</div>
46-
<select><option>foo</option></select>
4746
<select multiple style="height: 40px;"><option>foo</option></select>
4847
<textarea style="height: 40px;"></textarea>
4948
</div>

‎css/css-contain/contain-layout-select-001.tentative.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
3+
<link rel="help" href="https://github.com/web-platform-tests/wpt/issues/45889">
4+
<link rel="match" href="reference/contain-layout-select-001-ref.html">
5+
<meta name=assert content="Select and button align when layout-contained">
6+
<style>
7+
button, select {
8+
appearance: none;
9+
contain: layout;
10+
width: 20px;
11+
height: 20px;
12+
border: 2px solid;
13+
margin: 5px;
14+
padding: 2px;
15+
}
16+
</style>
17+
<button></button><select></select>

‎css/css-contain/reference/contain-layout-baseline-005-ref.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@
3939
<div class="wrapper">
4040
<canvas></canvas>
4141
<div class="inline-block">foo</div>
42-
<select><option>foo</option></select>
4342
<select multiple style="height: 40px;"><option>foo</option></select>
4443
<textarea style="height: 40px;"></textarea>
4544
</div>

‎css/css-contain/reference/contain-layout-select-001-ref.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<style>
3+
button {
4+
appearance: none;
5+
contain: layout;
6+
width: 20px;
7+
height: 20px;
8+
border: 2px solid;
9+
margin: 5px;
10+
padding: 2px;
11+
}
12+
</style>
13+
<button></button><button></button>

‎css/css-position/containing-block-change-button-ref.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
#button {
55
width: 400px;
66
height: 400px;
7-
margin: 100px;
7+
margin: 50px;
88
padding: 0;
99
border: 0;
1010
background-color: purple;

‎css/css-position/containing-block-change-button.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
#button {
1111
width: 400px;
1212
height: 400px;
13-
margin: 100px;
13+
margin: 50px;
1414
background-color: purple;
1515
border: 0;
1616
padding: 10px;

‎html/rendering/widgets/button-layout/scrollbars.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
4+
<link rel="author" href="https://mozilla.org" title="Mozilla">
5+
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1873301">
6+
<link rel="help" href="https://html.spec.whatwg.org/#button-layout">
7+
<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
8+
<title>Buttons support being scrolled</title>
9+
<style>
10+
button {
11+
display: block;
12+
width: 100px;
13+
height: 100px;
14+
background-color: red;
15+
border: 0;
16+
padding: 0;
17+
margin: 0;
18+
overflow: auto;
19+
scrollbar-width: none;
20+
}
21+
.filler {
22+
display: block;
23+
background: red;
24+
height: 400px;
25+
}
26+
.inner {
27+
display: block;
28+
width: 100px;
29+
height: 100px;
30+
background-color: green;
31+
}
32+
</style>
33+
<p>Test passes if there is a filled green square.</p>
34+
<button>
35+
<span class="filler"></span>
36+
<span class="inner"></span>
37+
</button>
38+
<script>
39+
document.querySelector("button").scrollTop = 400;
40+
</script>

0 commit comments

Comments
 (0)