1823479 - WPT test css/css-masking/parsing/mask-position-valid.html fails in Firefox due to serialization issues (where we seem to match the spec)

Status: RESOLVED MOVED

(Core :: CSS Parsing and Computation, task)

Description

[Daniel Holbert [:dholbert]]

This WPT test (in the interop-2023 set) has some failures in Firefox:
https://wpt.fyi/results/css/css-masking/parsing/mask-position-valid.html

The issues all seem to be cases where the test is checking for a serialized value and we're providing a slightly different serialization, e.g.:

e.style['mask-position'] = "left" should set the property value
assert_equals: serialization should be canonical
expected "left" but got "left center"

...and:

e.style['mask-position'] = "center bottom" should set the property value
assert_equals: serialization should be canonical
expected "bottom" but got "center bottom"

This might be a bug in the test's expectations...? Some spec reasoning:

• mask-position is defined as taking <position># (one or more <position> expressions) at https://www.w3.org/TR/css-masking-1/#the-mask-position
• <position> is defined at https://drafts.csswg.org/css-values-4/#position-serialization and includes instructions for serialization:

When serializing the specified value of a <position>:
If only one component is specified:
      The implied 'center' keyword is added, and a 2-component value is serialized.
If two components are specified:
       Keywords are serialized as keywords.
       [...]
       Components are serialized horizontal first, then vertical.

That's what we're doing -- we're filling in the implied center keyword (or keeping two keywords if specified as such), to reliably serialize with a 2-component value.

So we're matching the spec, and this is a test bug. We should fix the test.

Comment 1

[Boris Chiou [:boris]]

It seems these test cases were updated in https://github.com/web-platform-tests/wpt/pull/37537, according to the shortest serialization principle. However, I agree with comment 0. We should follow https://drafts.csswg.org/css-values-4/#position-serialization, instead of the shortest serialization principle, for <position> because its NOTE:

<position> values are never serialized as a single value, even when a single value would produce the same behavior, to avoid causing parsing ambiguities in some grammars where a <position> is placed next to a <length>, such as transform-origin.

it shouldn't be serialized as a single value.

Comment 2

[Boris Chiou [:boris]]

Attachment: Bug 1823479 - The specified values of mask-position shouldn't be serialized as a single value.

This patch reverts the update in
https://github.com/web-platform-tests/wpt/pull/37537.

Per spec in [css-values-4], when we serialize the specified value of
<position>, <position> values are never serialized as a single value,
even when a single value would produce the same behavior, to avoid causing
parsing ambiguities in some grammars where a <position> is placed next to
a <length>, such as transform-origin.

Although mask-position doesn't have this kind of ambiguity, we should
still follow this spec, instead of the shortest serialization principle.

https://drafts.csswg.org/css-values-4/#position-serialization

Comment 3

[Daniel Holbert [:dholbert]]

Per https://phabricator.services.mozilla.com/D188629#6253266 I think we can close as MOVED, since it's being fixed elsewhere in
https://github.com/web-platform-tests/wpt/pull/42112

That PR was just merged, so we should be seeing updated results shortly. And in fact we can already see that we're fully passing this test with the updated test, looking at the wpt.fyi run for the PR, here:
https://wpt.fyi/results/css/css-masking/parsing/mask-position-valid.html?sha=37c876c0a5&label=pr_head&max-count=1

Firefox Nightly is shown as 23/23 for this test there, no failures. \o/