Images as children of buttons

[Thomas Steiner]

The `button` element accepts phrasing content like images. How would you expect the button created by HTML like the following to render?

```html

<button type=button>
  <img src="foo.png" width=99 height=99 alt="">
</button>

```

Safari Mobile in 2020:

Safari Mobile in 2021:

All other browsers, including Safari Desktop:

WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=216398 

Demo: https://image-in-button.glitch.me/

[Chris Harrelson]

I wonder if there is a WPT for this situation.

+David Grogan 

--
You received this message because you are subscribed to the Google Groups "Browser Compatibility 2021" group.
To unsubscribe from this group and stop receiving emails from it, send an email to compat2021+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/compat2021/CALgRrLmkoJ%2Bw5iLbm4acYL7BgOj_PVwB3j9qoB2P_k9MtmNniA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[Thomas Steiner]

On Wed 26. May 2021 at 05:29 David Grogan <dgr...@google.com> wrote:

There are no WPTs for this that I can find.

Caveats:

 * https://wpt.fyi/results/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html uses a <button><img></button> as a reference but not a test

 * https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/web_tests/fast/forms/basic-buttons.html is a non-WPT that tests something close (no width/height attributes)

But the screenshots seem to indicate that the bug was fixed in 2021?

I don’t consider the strange rounded corner button fixed in the Safari Mobile in 2021 screenshot to be honest. 

--

Thomas Steiner, PhD—Developer Advocate (https://blog.tomayac.com, https://twitter.com/tomayac)

Google Germany GmbH, ABC-Str. 19, 20354 Hamburg, Germany
Geschäftsführer: Paul Manicle, Halimah DeLaine Prado
Registergericht und -nummer: Hamburg, HRB 86891

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.1.23 (GNU/Linux)

iFy0uwAntT0bE3xtRa5AfeCheCkthAtTh3reSabiGbl0ck0fjumBl3DCharaCTersAttH3b0ttom.hTtPs://xKcd.cOm/1181/
-----END PGP SIGNATURE-----

[David Grogan]

I think that's out of layout's hands and probably a design choice by WebKit or even Apple.

Mason, you gained some expertise on form control appearance with Blink's form control refresh. Can you give your best guess on where the rounded corners in this button come from? Is it something like WebKit defers to the platform's style and this is the style that iOS gives?

[Chris Harrelson]

So is the conclusion that we can't test this with WPT at present, because the web specs don't cover this area?

On Wed, May 26, 2021 at 10:19 AM Mason Freed <mas...@chromium.org> wrote:

My complete guess would be that the iOS button is a native system widget (button) with image content, and the rounded corners are provided by the system widget. Several other of their form controls are native controls (e.g. checkbox) unless their appearance is customized outside of what can be provided by the system control. You could try modifying the border-radius property on the button to see what effect that has?

Thanks,

Mason

[David Grogan]

There are no WPTs for this that I can find.

Caveats:

 * https://wpt.fyi/results/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html uses a <button><img></button> as a reference but not a test

 * https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/web_tests/fast/forms/basic-buttons.html is a non-WPT that tests something close (no width/height attributes)

But the screenshots seem to indicate that the bug was fixed in 2021?

On Mon, May 24, 2021 at 2:15 PM Chris Harrelson <chri...@google.com> wrote:

[Thomas Steiner]

I have added an explicit border-radius of 0, but to no avail:

What’s most surprising is that desktop Safari does the right thing and mobile Safari something else. 

The last screenshot is from iOS 14.7 (18G5023c), which runs Mozilla/5.0 (iPhone; CPU iPhone OS 14_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Mobile/15E148 Safari/604.1. 

On Wed 26. May 2021 at 21:02 Mason Freed <mas...@chromium.org> wrote:

I don't think you could practically test this behavior via WPT at the moment. The appearance of buttons is not specified and not uniform among browsers, unfortunately. You might be able to do the bare minimum, e.g. check that the button width and height get larger when an image is included as a child of the button, to show that at least something is changing. That would have caught at least the "2020 behavior" problem.

Thanks,

Mason