1370344 - Implement CSS Properties & Values in Firefox, via Stylo/Servo

Status: NEW

(Core :: CSS Parsing and Computation, enhancement, P4)

Description

[Jonathan Chan [:jyc]]

This bug is going to track progress on implementing CSS Houdini "Properties and Values" (https://drafts.css-houdini.org/css-properties-values-api/) via Servo.

The relevant Servo bug is https://github.com/servo/servo/issues/17155.

Comment 1

[Chris Peterson [:cpeterson]]

status-firefox57=wontfix unless someone thinks this bug should block 57

Comment 2

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 2: Add new pref to enable the Properties & Values API.

This will control whether or not CSS.registerProperty and
CSS.unregisterProperty are available. Behavior with existing CSS
variables should be the same.

Comment 3

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 1: Refine custom_properties::parse_name; disallow extra tokens.

This increases standards conformance.

Comment 4

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 1: Add new pref to enable the Properties & Values API. r=#style

This will control whether or not CSS.registerProperty and
CSS.unregisterProperty are available. Behavior with existing CSS
variables should be the same.

Depends on D30857

Comment 5

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 2: Add WebIDL and stubs for CSS.(un)registerProperty. r=#style

Depends on D30858

Comment 6

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 3: Add/refactor types of custom_properties for Properties & Values. r=#style

Add a new ExtraData enum. We carry it along with a custom property's
specified value in order to compute it, if it ends up being registered
as being able to contain URLs through Properties & Values. When the
specified value comes from a declaration, we keep track of the
associated UrlExtraData in the Specified variant. However, specified
values will also be able to come from animations: in that case we will
eventually (when we add support for registered custom properties to
animations) be able to carry along a copy of the computed value in the
Precomputed variant, to save us from recomputation and also to save us
from having to re-resolve the URL.

The properties_and_values module is addded by a later patch in this
series, so we omit the Precomputed variant for now.

Depends on D30859

Comment 7

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 4: Add a properties_and_values module for CSS Properties & Values. r=#style

Typed custom properties are exactly the same as regular custom
properties except when it comes to inheritance, computed values, and
animation, so this module is intended to be as independent from
custom_properties as possible (they do use types from each other,
though, where it would be clumsy to do otherwise).

This commit doesn't hook up the module to anything: that's handled by
later patches in this series.

Depends on D30860

Comment 8

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 5: Introduce SubstitutionMap and ResolutionMap. r=#style

Currently a CustomPropertiesMap parameterizes custom property
substitution (e.g. through substitute_references_in_value) and
resolution (through substitute_all).

To make the extensions introduced for registered custom property
substitution/resolution more clear, abstract out the concept of a
substitution map used for substitution and a resolution map used for
resolution.

This allows the implementation (in two modules, custom_properties and
properties_and_values) to somewhat mirror the specification (in CSS
Variables and CSS Properties and Values), in that the second ostensibly
extends and does not replace the first.

This commit should not change any existing behavior. A future patch in
this series will use these traits to implement registered custom
property substitution and resolution.

Depends on D30861

Comment 9

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 6: Introduce PVSubstitutionMap, PVResolutionMap. r=#style

These are implementations of SubstitutionMap and ResolutionMap,
introduced in the previous commit, that perform registered custom
property substitution/resolution as specified in CSS Properties & Values.

They are used in a later patch in this series.

Depends on D30862

Comment 10

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 7: Attach registered property set to the Stylist. r=#style

CSS Properties and Values specifies that the 'property set' containing
registered custom properties lives on the Document.1 Attach it to the
Stylist here so that it can be used during the cascade and computation.

The attached property set is actually used in a later patch in this
series.

Depends on D30863

Comment 11

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 8: Add RegisteredPropertySet to computed::Context. r=#style

The registered property set is necessary to resolve variable references
to registered custom properties without declarations and with initial
values.

Depends on D30864

Comment 12

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 9: Cascade typed custom properties. r=#style

Depends on D30865

Comment 13

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 10: Return initial values of typed properties in CSSOM. r=#style

The initial value for unregistered custom properties is the (invalid)
empty token stream. We also store the (possibly non-empty) initial value
of registered custom properties this way. This means that during
variable substitution and access through CSSOM, we must return the
initial value that was registered, if any, rather than the stored empty
value. We already implement the former; now implement the latter.

Depends on D30866

Comment 14

[Jonathan Chan [:jyc]]

Attachment: Bug 1370344 - Part 11: Add tests for CSS Properties and Values. r=#style

The tests that fail are those that involve:

• animations (not implemented)
• integer calc()s
• serialization of certain values (colors, degrees, resolutions)

Depends on D30867

Comment 15

[709922234]

chrome 78 supported: https://developers.google.com/web/updates/2019/10/nic78

Comment 16

[Sebastian Zartner [:sebo]]

As far as I can see, the patches attached here are meant to add the code to register custom properties and implement the JavaScript APIs around that features. Though they do not cover the declarative version via the @property CSS rule.

Because the changes here are already bigger, I assume a separate bug should be filed for implementing that rule, right?

Sebastian

Comment 17

[Cameron McCormack (:heycam) (away)]

Yes, feel free to file a separate bug if you'd like to track that outside of this bug. It'd depend on this one though.