<input> element does not render its .validationMessage, only an empty tooltip

[tirithen]

Describe the bug

The native input element validation error tooltip renders empty without the error message.

Steps To Reproduce

1. Pull the wry repository
2. Add a plain <input type="number" min="10"> element to the examples/custom_protocol/index.html example file
3. Run the example
4. Enter a number lower than 10 in the field
5. Open the developer tools by right clicking and open the Console tab
6. Run document.querySelector('input[type="number"]').reportValidity()
7. Observe that there is a tooltip popping up above the input field, but that it is empty where it would have been populated with a user error message in an ordinary browser like Firefox or Chromium.
8. Observe that the actual error string is present on the element and can be read via document.querySelector('input[type="number"]').validationMessage, it reads "Value must be greater than or equal to 10" but is not rendered in the tooltip as expected.

Expected behavior

The expected result is the message "Value must be greater than or equal to 10" should render inside the now empty tooltip when the .reportValidity() runs on the element, such as when the form that the input is part of is submitted or when the method is called directly.

Screenshots

The tooltip renders empty with the wry webkitgtk web view even if the error message itself is available:

Opening the same index.html file in Firefox results in the expected error tooltip:

Platform and Versions (please complete the following information):
OS: Arch Linux, Gnome 45.3 with Wayland and the package extra/webkitgtk-6.0 2.42.4-2 installed
Rustc: rustc 1.75.0 (82e1608df 2023-12-21)

Additional context

If I can get some hints where the problem likely originates I can do some experimentation, but I need some pointers. Is the likely to be within wry itself or more likely to be further down the line like within webkitgtk itself or similar?

I'm currently not sure if this is a Linux only problem, or if the problem is with any OS setup. I got stuck on the problem while using wry through a dioxus project, and I can see the same behavior here so I'm trying to follow the error step by step down through the dependencies.

[FabianLars]

Is the likely to be within wry itself or more likely to be further down the line like within webkitgtk itself or similar?

You can test that by installing the epiphany browser (also known as Gnome Web). If it has the same issue it's webkitgtk, if not it's wry or webkitgtk's gtk3 dist (epiphany is using gtk4)

[tirithen]

@FabianLars thanks for the suggestions!

I had the epiphany installed already, so I tried again with it installed, and now after uninstalling the epiphany package (Arch Linux so pacman -Rdd epiphany). I got the same result both times, an empty bubble without the validation error being rendered.

Anyhow I also saw that the error is present in the epiphany browser itself, so I suppose that I should continue to investigate with those project maintainers. Thanks for pointing me in that direction, I wonder how much of the rendering that belongs to the epiphany browser project, and how much is webkit2, we'll see.

Rendering within the epiphany browser:

[tirithen]

Here is a bug report I made on the WebKit Bugzilla for reference in case someone else runs in to this problem, or have an idea on how to fix it: https://bugs.webkit.org/show_bug.cgi?id=268222