935544 - Inherit 'text-align' through <input type=number>'s anonymous content

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Jonathan Watt [:jwatt]]

I've noticed that B2G code relies on being able to get the text in <input type=number> to right align by setting the 'text-align' property on the <input>. This will be broken by the landing of bug 635240 since the text is now in a nested, anonymous text field which will have the initial value for 'text-align'.

One way to fix this would be to fix the gaia code to style the pseudo-elements, but that won't work if we fix bug 930010 if the B2G apps don't have chrome priv's.

Anyway, as it happens I think we want to honor 'text-align' set on <input type=number>'s even for normal content, so I think we should inherit the property through to the anonymous text control.

Comment 1

[Daniel Holbert [:dholbert]]

MDN says text-align is already inherited:
 https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

In light of that, is there a reason it won't already be inherited to the anonymous text control?

Comment 2

[Jonathan Watt [:jwatt]]

Yes, because this line applies to the anonymous text control:

http://mxr.mozilla.org/mozilla-central/source/layout/style/forms.css?rev=be920ff7556b#64

Comment 3

[Jonathan Watt [:jwatt]]

Attachment: patch

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to Jonathan Watt [:jwatt] from comment #2)
> Yes, because this line applies to the anonymous text control:
> 
> http://mxr.mozilla.org/mozilla-central/source/layout/style/forms.
> css?rev=be920ff7556b#64

Ah -- because we create the anonymous element with tag-name nsGkAtoms::input. OK.

Comment 5

[Daniel Holbert [:dholbert]]

Comment on attachment 8333894 [details] [diff] [review]
patch

>diff --git a/layout/style/forms.css b/layout/style/forms.css
[...]
> input[type=number]::-moz-number-text {
>   -moz-appearance: none;
>   /* work around autofocus bug on initial load */
>   -moz-user-modify: read-write;
>+  /* overwrite the explicit setting of 'text-align' for <input> in the style
>+   * above - we want to inherit our value from our <input type=number>.
>+   */
>+  text-align: inherit;

So initially I read this comment as implying that the anonymous element was getting "input" styling because it's *part* an <input> element (namely, the <input type="number">).  (which is wrong, and fortunately is not what the comment is trying to imply).

Let's extend the comment slightly to avoid causing that confusion.  Maybe add a parenthetical like:
 (The reason this pseudo-element receives "input" styling is that we create it with tag-name nsGkAtoms::input, so that it behaves & renders as a text-input frame.)

r=me with that or a similar clarification

Comment 6

[Jonathan Watt [:jwatt]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/b62093400608

Comment 7

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/b62093400608