Force image inputs to be clipped as well. by emilio · Pull Request #12491 · whatwg/html

emilio · 2026-05-26T21:40:30Z

Matches Blink and WebKit behavior, and Gecko behavior before https://bugzil.la/1999100

See https://bugzil.la/2038137.

At least two implementers are interested (and none opposed):
- Blink
- WebKit
- Gecko
Tests are written and can be reviewed and commented upon at:
- https://bugzil.la/2038137
Implementation bugs are filed:
- Chromium: https://issues.chromium.org/issues/519900533
- Gecko: https://bugzil.la/2038137
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=316308
The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

/rendering.html ( diff )

Matches Blink and WebKit behavior, and Gecko behavior before https://bugzil.la/1999100 See https://bugzil.la/2038137.

annevk

This looks okay to me. OP needs to be filled out though.

emilio · 2026-06-04T15:29:25Z

Filed the relevant bugs.

annevk · 2026-06-04T16:45:03Z

@chrishtr @bfgeek @nt1m let me know if you have any concerns with this. If not I'll merge somewhere next week.

…r=firefox-style-system-reviewers,boris Matches other browsers' behavior and pre-regression behavior, see whatwg/html#12491. Differential Revision: https://phabricator.services.mozilla.com/D302639

nt1m · 2026-06-04T18:38:15Z

WebKit doesn't support overflow-clip-margin, but I'm sure it probably makes sense.

bfgeek · 2026-06-04T19:23:39Z

So image isn't really special here, its a "button" type. Our manual logic is:
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/layout_box.cc;l=2469-2484;drc=12fb61856625acc9168c166c9fd1db3af2af3f77

E.g. see clipping here:

<!DOCTYPE html>
<style>
input {
box-sizing: border-box;
border: solid transparent 10px;
font-size: 100px;
width: 100px;
height: 100px; 
padding: 30px;
outline: dashed 3px;
vertical-align: bottom
}
</style>
<input type="submit" value="XXX">
<input type="reset" value="XXX">
<input type="button" value="XXX">
<input type="image" value="XXX">

Something more complete which would likely allow us to remove this would be:

/* all button types get overflow-clip-margin of padding-box */
input[type="button" i], input[type="image" i], input[type="reset" i], input[type="submit" i] {
  overflow-clip-margin: padding-box !important;
}

/* all the text input types also get it? */
input[type="email" i], /* etc */ {
  overflow-clip-margin: padding-box !important;
}

I think gecko previously had overflow-clip-box to achieve this previously, but may be doing some other way now?

emilio · 2026-06-04T19:30:34Z

@bfgeek but image clips to the content box, doesn't it? See the rendering of this in Chromium:

data:text/html,<input type=image src="https://wpt.live/images/green.png" style="width: 50px; height: 50px; padding: 10px; overflow: visible">

emilio · 2026-06-04T19:32:17Z

I guess you clip to the content-box when is an image and to the padding-box when it's not? I'd prefer to standardize on this since <input type=image> usually does represent an image (that's the whole point).

Gecko used to not clip at all when not an image, and clip to the content-box when it is.

bfgeek · 2026-06-04T19:46:57Z

Ah yeah thats what we are doing. I think i'd still prefer something like:

input:not([type=range i], [type=checkbox i], [type=radio i]) {
  overflow: clip !important;
  overflow-clip-margin: padding-box !important;
}
input[type=image i] {
  overflow-clip-margin: content-box !important;
}
/* whatever other carveouts we need */

emilio · 2026-06-04T19:49:00Z

@bfgeek That's basically this change, right? But with changing the existing overflow-clip-margin: 0 to overflow-clip-margin: padding-box. I'd rather have that change discussed separately? Gecko and the spec have historically clipped to the border-box of buttons.

bfgeek · 2026-06-04T19:54:39Z

I'd rather have that change discussed separately?

I'd somewhat prefer to change it all in one shot if we are going to start using keyword overflow-margin-clip.

Gecko and the spec have historically clipped to the border-box of buttons.

That doesn't seem to be the case from the testcase I provided above?

FF Nightly:

emilio · 2026-06-04T20:01:17Z

@bfgeek d'oh, you're right, but that's because the default <visual-box> for overflow-clip-margin is the padding-box. So the difference between my PR and your suggestion is afaict just syntactic, right? They should behave the same. Still happy to change it to padding-box if you want then.

annevk · 2026-06-04T20:37:54Z

Does it even impact the computed value? Presumably that’s normalized?

emilio · 2026-06-04T21:34:52Z

Yeah it is:

document.documentElement.style.overflowClipMargin = "padding-box"
document.documentElement.style.overflowClipMargin // 0px in both Blink and Gecko, same in computed value.

bfgeek · 2026-06-04T23:28:33Z

Ah sorry I forgot that it defaulted to the padding-box. Ok you patch looks good then. I think the only weird thing then is how the <select> element works.

emilio · 2026-06-05T00:15:00Z

Curious, why? <select> defaults to overflow: clip (and overflow-clip-margin: 0, since it's the initial value), like <button>. It just doesn't enforce it via !important for legacy / compat / etc reasons...

emilio · 2026-06-05T00:23:28Z

Err, scratch that, I totally mis-grepped our UA sheet...

<select> in Gecko defaults to overflow: clip, but has an internal clip on top here, which is needed mostly so that text doesn't overlap the picker icon...

It seems Blink has overflow: visible !important on select but still clips... Ok, so agreed <select> is weird. It seems Blink clips even in base appearance mode, which seems... unfortunate?

emilio · 2026-06-05T00:36:44Z

I spun off #12521 to discuss <select>, at least in base-select mode...

emilio · 2026-06-05T00:56:55Z

(But ok, seems this should be fine :))

Force image inputs to be clipped as well.

b61eba5

Matches Blink and WebKit behavior, and Gecko behavior before https://bugzil.la/1999100 See https://bugzil.la/2038137.

emilio requested review from annevk and zcorpan May 26, 2026 21:41

emilio added the agenda+ To be discussed at a triage meeting label May 29, 2026

annevk approved these changes Jun 4, 2026

View reviewed changes

moz-wptsync-bot mentioned this pull request Jun 4, 2026

[Gecko Bug 2038137] Include <input type=image> in elements always-clipped. web-platform-tests/wpt#60405

Closed

emilio mentioned this pull request Jun 5, 2026

Select in base-appearance mode should probably not have magic clips #12521

Open

annevk merged commit 7486cd7 into whatwg:main Jun 5, 2026
2 checks passed

Conversation

emilio commented May 26, 2026 • edited by pr-preview Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

annevk left a comment

Choose a reason for hiding this comment

Uh oh!

emilio commented Jun 4, 2026

Uh oh!

annevk commented Jun 4, 2026

Uh oh!

nt1m commented Jun 4, 2026

Uh oh!

bfgeek commented Jun 4, 2026

Uh oh!

emilio commented Jun 4, 2026

Uh oh!

emilio commented Jun 4, 2026

Uh oh!

bfgeek commented Jun 4, 2026

Uh oh!

emilio commented Jun 4, 2026

Uh oh!

bfgeek commented Jun 4, 2026

Uh oh!

emilio commented Jun 4, 2026

Uh oh!

annevk commented Jun 4, 2026

Uh oh!

emilio commented Jun 4, 2026

Uh oh!

bfgeek commented Jun 4, 2026

Uh oh!

emilio commented Jun 5, 2026

Uh oh!

emilio commented Jun 5, 2026

Uh oh!

emilio commented Jun 5, 2026

Uh oh!

emilio commented Jun 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

emilio commented May 26, 2026 •

edited by pr-preview Bot

Loading