1438704 - Drop border coloring from flexbox-writing-mode-01* tests, due to fuzzy pixels on borders

Status: RESOLVED FIXED

(Core :: Layout, enhancement)

Description

[Daniel Holbert [:dholbert]]

The flexbox-writing-mode-01* testcases in bug 1267462 (part 2, 3, and 4) all have different-color borders for the sides of the elements, to more easily visualize the block-start/block-end & inline-start/inline-end directions in the various writing modes:
>     border-block-start-color: orange;
>     border-inline-start-color: lime;

You can see this here, for example:
https://hg.mozilla.org/mozilla-central/raw-file/27fd083ed7ee5782e52a5eaf0286c5ffa8b35a9e/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html

However, I'd like to remove this different-color-per-side styling now, because:
 a) The coloring here (and sides of the children) aren't really what's actually being tested.

 b) No other browser supports these logical properties (though the reftest is written to tall back gracefully & still pass, so this on its own isn't a huge deal).  So no other browser is actually painting these colors right now anyway.

...and most importantly for my immediate needs:
 c) The different-colored-borders cause occasional subtle "fuzzy" reftest failures. Specifically, sometimes there's a single-pixel difference in the middle of the diagonal between two adjoining border-sides, with a difference of 1 in some color-channel on that single pixel -- e.g. rgb(0,96,0) vs rgb(0,95,0). (See e.g. bug 1437008, bug 1436918)  This isn't a human-visible issue & it's likely due to a painting-order / compositing subtlety, so it's not really something to worry about, but it is reported as a test failure.  The test failure is easy to paper over in our reftests directory with "fuzzy" annotations, but I'm not sure we can do that in web-platform-tests (and this set of reftests will eventually get reimported in a second location in a web-platform-tests sync).

I'm pretty sure the fuzzy mismatch will go away if the borders are just a single solid color.  So, given all of the above, I'd like to remove this coloring.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: Bug 1438704: Adjust some flexbox reftests to use special Ahem character rather than border-color to signal directionality.

This is just removing the following styles from these reftests:
     border-block-start-color: orange;
     border-inline-start-color: lime;
...which latest Chrome, Safari, and Edge don't support anyway.

Review commit: https://reviewboard.mozilla.org/r/220772/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/220772/

Comment 2

[Mats Palmgren (inactive)]

Comment on attachment 8951470 [details]
Bug 1438704: Adjust some flexbox reftests to use special Ahem character rather than border-color to signal directionality.

https://reviewboard.mozilla.org/r/220772/#review226686

It does degrade the tests though since if an UA renders an item in the wrong direction it won't be detected (AFAICT), because of the Ahem font and nothing to indicate the block/inline-start side.  Not using the Ahem font would make the text not render as expected with such a bug though.  Would that be feasable?

Comment 3

[Mats Palmgren (inactive)]

Or we could add a small 'text-indent' to indicate the inline-start side?
https://drafts.csswg.org/css-text-3/#text-indent-property
It appears to be a logical property and perhaps other UAs supports it correctly?

Comment 4

[Mats Palmgren (inactive)]

(I filed https://bugs.chromium.org/p/chromium/issues/detail?id=812918 FWIW)

Comment 5

[Mats Palmgren (inactive)]

Even easier solution is to use "p" as the first char in the text.  It renders
different in Ahem:  http://web-platform-tests.org/writing-tests/ahem.html

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to Mats Palmgren (:mats) from comment #2)
> It does degrade the tests though since if an UA renders an item in the wrong
> direction it won't be detected (AFAICT), because of the Ahem font and
> nothing to indicate the block/inline-start side.

It is still somewhat detectable -- in many of the flex items, the text (with the ahem font) is wider than the item, and it overflows off of the inline-end edge.  (And if we got the wrong direction, it'd overflow off of the wrong edge.)

But, true, it's a bit iffy. I'll see about using "p" -- that's a good idea...

Comment 7

[Daniel Holbert [:dholbert]]

Comment on attachment 8951470 [details]
Bug 1438704: Adjust some flexbox reftests to use special Ahem character rather than border-color to signal directionality.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/220772/diff/1-2/

Comment 8

[Mats Palmgren (inactive)]

Comment on attachment 8951470 [details]
Bug 1438704: Adjust some flexbox reftests to use special Ahem character rather than border-color to signal directionality.

https://reviewboard.mozilla.org/r/220772/#review226708

Thanks!

Comment 9

[Daniel Holbert [:dholbert]]

Try run with that change: https://treeherder.mozilla.org/#/jobs?repo=try&revision=80b75fcd4772135ddfc9b3091f5fe04b3a3ca225

ni=me to land this assuming Try is happy

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6ba349d419dd
Adjust some flexbox reftests to use special Ahem character rather than border-color to signal directionality. r=mats

Comment 11

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/6ba349d419dd