Bug 60353 – REGRESSION(r83256): Validation message for <input type=range> is not rendered

• Status: RESOLVED
• Resolution: FIXED
• Component: Forms

[Kent Tamura]

How to reproduce:

1. Open the following HTML with Google Chrome / Chromium, not Safari:
<form action="">
  <input type=range id=range>
  <input type=submit id=submit>
</form>
<script>
document.getElementById('range').setCustomValidity('Foo bar');
</script>

2. Click the submit button

Results:
Google Chrome 11 shows a validation message with "Foo bar".
Google Chrome 12 shows nothing.


I confirmed shadow DOM tree for a validation message was correctly created and they were attached.

[Kent Tamura]

Probably https://trac.webkit.org/changeset/83256 made the regression.

[Kent Tamura]

Observation:
 * The size of -webkit-validation-bubble element is set to 0x0 by style calculation.
 * If I modify ValidationMessage::buildBubbleTree() as follows, the problem is fixed.

     ExceptionCode ec = 0;
-    host->ensureShadowRoot()->appendChild(m_bubble.get(), ec);
+    host->ensureShadowRoot()->firstChild()->appendChild(m_bubble.get(), ec);
 
     RefPtr<HTMLElement> clipper = ElementWithPseudoId::create(doc, "-webkit-validation-bubble-arrow-clipper");

[Kent Tamura]

(In reply to comment #2)
> Observation:
>  * The size of -webkit-validation-bubble element is set to 0x0 by style calculation.
>  * If I modify ValidationMessage::buildBubbleTree() as follows, the problem is fixed.

Ok, I found the root cause.
RenderSlider, which is a renderer for a host node, doesn't lay out renderers for their light/shadow children.  RenderSlider::layout() doesn't call any layout() for them.

I'm not sure how to fix the problem.
 - Should RenderSlider lay out their children?
  I think we can do so.  But is it a general fix?
 - Shouldn't we attach a validation message tree to each of form controls?

[Kent Tamura]

Created attachment 93266 [details]
work-in-progress

[Kent Tamura]

(In reply to comment #4)
> Created an attachment (id=93266) [details]
> work-in-progress

In this approach, ValidationMessage object should be owned by HTMLFormElement, and HTMLFormElement should provide some functions, which are called by HTMLFormControlElement to control validation messages.

[Dimitri Glazkov (Google)]

(In reply to comment #3)
> (In reply to comment #2)
> > Observation:
> >  * The size of -webkit-validation-bubble element is set to 0x0 by style calculation.
> >  * If I modify ValidationMessage::buildBubbleTree() as follows, the problem is fixed.
> 
> Ok, I found the root cause.
> RenderSlider, which is a renderer for a host node, doesn't lay out renderers for their light/shadow children.  RenderSlider::layout() doesn't call any layout() for them.
> 
> I'm not sure how to fix the problem.
>  - Should RenderSlider lay out their children?

Yes! It is possible and a "good thing" to do. See bug 52920.

>   I think we can do so.  But is it a general fix?
>  - Shouldn't we attach a validation message tree to each of form controls?

This is also a cool idea. The form validating its controls seems like a logical idea. Will this still work for free-standing elements? Or do they always have a form element associated? I can't remember.

[Kent Tamura]

(In reply to comment #6)
> >  - Should RenderSlider lay out their children?
> 
> Yes! It is possible and a "good thing" to do. See bug 52920.

Oh, it's a nice patch! Do you have a plan to proceed it?

> >  - Shouldn't we attach a validation message tree to each of form controls?
> 
> This is also a cool idea. The form validating its controls seems like a logical idea. Will this still work for free-standing elements? Or do they always have a form element associated? I can't remember.

The interactive validation feature works only for controls associated to a <form>, and we show at most one validation message bubble.  So there is no problem.
However I'm a little afraid using ShadowContent to render form content makes regressions.

[Kent Tamura]

This was fixed by r88757.
Now RenderSlider lays out all of children.