1189923 - [GTK3] Checkboxes stick above their line of text, with GTK3

Status: RESOLVED WONTFIX

(Core :: Widget: Gtk, defect, P4)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Load testcase.
 2. Compare the top of the checkbox to the top of the text alongside it.

ACTUAL RESULTS: The top of the checkbox is noticeably higher than the top of the text.

EXPECTED RESULTS: Better alignment. (e.g. top of the text should be near the top of the checkbox)


In Firefox 39 (pre-GTK3) and Chrome 46, they top of the text looks like it's at the same position as the top of the checkbox.

In Firefox 42 nightly (with GTK3), the top of the text is noticeably lower than the top of the checkbox.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot (comparing Chrome to Firefox to Nightly)

Here's a screenshot comparing Chrome to Firefox 39 to Nightly.

In this screenshot, it looks like the top of the checkbox is 1px above the top of the text in Firefox 39, and 2px above in Chrome (so both pretty subtle), vs. 5px in Nightly.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot on Bugzilla with e.g. "patch" checkbox's label awkwardly further-down than its checkbox

Comment 4

[Tom S [:evilpie]]

Attachment: possible fix

I don't really know what I am doing here, but I assume indicator_spacing is the border and must be included?

Comment 5

[Karl Tomlinson (:karlt)]

Comment on attachment 8642088 [details] [diff] [review]
possible fix

The rectangle passed to gtk_render_check is indicator_size square, so the
indicator_spacing surround for the focus is not involved in the centering
maths.

indicator_spacing is considered in GetExtraSizeForWidget().  This enlarges the
area potentially affected by drawing, but doesn't (or at least shouldn't)
change the rect passed to moz_gtk_toggle_paint().

Comment 6

[Karl Tomlinson (:karlt)]

I suspect the checkbox input doesn't have a baseline.  vertical-align
is baseline.  It seems that the bottom of the checkbox aligns with the
baseline of the text.

The GTK3 checkbox in attachment 8641864 [details] seems to be larger than the GTK2
checkbox, and the issue is more pronounced with small text.

When the text is large, the padding or border around the checkbox increases,
the checkbox is apparently centred in some respect and the issue is less
noticeable.

I guess we want the centre of the input aligned with the point half way
between the extents of text line-height, but, once the widget is at minimum
size, there is little widget code can do to reposition AFAICS.

If widget code shifted the drawing down by moving more into overflow, then the
rect for hit testing would be smaller and not align with the visible box.

Perhaps the minimum size could be zero and the widget code could scale instead of centering.

Comment 7

[Karl Tomlinson (:karlt)]

This issue exists with GTK2 and small text or themes having large text boxes, so I don't think we need to block shipping GTK3 on this.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

We don't render native checkboxes in content anymore.