Emilio Cobos Álvarez
fd1f57b58d
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
41 lines
1.0 KiB
HTML
41 lines
1.0 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
|
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1873301">
|
|
<link rel="help" href="https://html.spec.whatwg.org/#button-layout">
|
|
<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
|
|
<title>Buttons support being scrolled</title>
|
|
<style>
|
|
button {
|
|
display: block;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: red;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.filler {
|
|
display: block;
|
|
background: red;
|
|
height: 400px;
|
|
}
|
|
.inner {
|
|
display: block;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
<p>Test passes if there is a filled green square.</p>
|
|
<button>
|
|
<span class="filler"></span>
|
|
<span class="inner"></span>
|
|
</button>
|
|
<script>
|
|
document.querySelector("button").scrollTop = 400;
|
|
</script>
|