[css-values] Implement argument grammar for var()/env()/attr() arbitrary substitution functions
Categories
(Core :: CSS Parsing and Computation, enhancement)
Tracking
()
People
(Reporter: sajidanwar, Assigned: sajidanwar)
References
(Blocks 2 open bugs)
Details
(Keywords: dev-doc-needed)
Attachments
(3 external files)
(Related are Bug 2032131 and w3c/csswg-drafts#11500)
Arbitrary substitution functions are now defined with "argument grammars" which indicate how they are parsed at parse time, while the function definition specifies the syntax used at substitution time; see: var(), env(), attr().
Three key changes that this introduces:
- Nested references are now possible in the first parameter of these functions, like
var(var(--prop-name))orenv(var(--offset-env), 10px)). These are resolved at substitution time. - Substitution functions that were previously invalid at parse time (like
var(1px)) are now considered valid so long as they match the argument grammar. Parsing into the function's syntax occurs at substitution time (at which point,var(1px)would cause the property to be IACVT). - Cycles are only evaluated through used arguments. Unused arguments like unused fallbacks in
var()/env()/attr(), unvisited branches inif(), or the non-selected options inrandom-item()are not checked for cycles.
|
Assignee | |
Updated•20 days ago
|
|
|
Assignee | |
Comment 1•18 days ago
|
||
The behavior of these substitution functions is unchanged; refactoring
should make it easier to extend these existing functions, as well as to
introduce additional arbitrary substitution functions.
-
The new var/env/attr modules hold most of the function-specific logic.
The new substitution module contains most of the shared substitution
logic, including new context structs for parsing and replacement to
replace long parameter lists. -
The
VariableFallbacktype is renamed toArbitraryDeclarationValue,
and always stores its own end index (previously it always inferred
it fromreference.end - 1). This is in preparation for functions
that have multiple non-fallback<declaration-value>arguments
(likerandom-item()), and to support free-form production syntax
(wrapped in curly braces).
|
||
Updated•18 days ago
|
|
|
Assignee | |
Comment 2•18 days ago
|
||
Arbitrary substitution functions are specified using a lenient argument
grammar that defines their syntax at parse time. The actual arguments
are only parsed into their semantic forms at substitution time. For
var()/env()/attr(), this makes nested references in the first
parameter newly possible, like var(var(--prop-name)). Functions that
were previously considered invalid at parse time (like var(1px)) are
now considered valid so long as they match the argument grammar. The new
argument grammar handling also adds support for free-form production
matching, so that {}-values work properly.
In this change, the core type that enables this functionality is
SubstitutionArgument<T>. It can hold the <declaration-value> for the
argument, but also eagerly parses it into the final T if there are no
nested substitution functions. This enables parse-time usage of
arguments where possible, like attribute dependency tracking.
In order to handle functions with nested references, cycle detection
runs Tarjan's algorithm through those references, and also performs
substitution on those arguments to obtain the final referenced names.
This change passes existing WPTs for var() and attr() argument
grammar handling. New WPTs were added to test argument grammar handling
for env().
|
|
Assignee | |
Comment 3•18 days ago
|
||
|
|
||
Updated•17 days ago
|
|
||
Comment 5•2 days ago
|
||
| bugherder | ||
|
|
Assignee | |
Comment 6•2 days ago
|
||
(Forgot that merging part of a stack on a single bug will still close that bug, I probably should have split them out. Re-opening since the bulk of the work is in the remaining two patches in the stack.)
|
||
Updated•2 days ago
|
|
|
Assignee | |
Comment 8•15 hours ago
|
||
Flipping relnote on this since it provides new capabilities.
Release Note Request
[Why is this notable]: New CSS feature
[Affects Firefox for Android]: Yes
[Suggested wording]: Firefox now supports nested arbitrary substitution functions in the primary parameters of var(), attr(), and env(); for example, var(attr(data-theme-prop type(<custom-ident>))) and env(var(--safe-area-block-start)).
[Links (documentation, blog post, etc)]: https://drafts.csswg.org/css-values-5/#replace-an-arbitrary-substitution-function
|
|
Assignee | |
Updated•15 hours ago
|
|
||
Comment 10•14 hours ago
|
||
Backed out for causing multiple failures
Backout Link
Push with failures
Failure Log's
Failure Log's
Failure Log's
Failure line's
REFTEST TEST-UNEXPECTED-FAIL | layout/reftests/bugs/456147.xhtml == layout/reftests/bugs/456147-ref.html | image comparison, max difference: 255, number of differing pixels: 3399
TEST-UNEXPECTED-FAIL | /html/rendering/widgets/baseline-alignment-and-overflow.tentative.html | <input type="image" src="data:,broken" alt="x" style="overflow: visible; appearance: auto;"> - assert_equals: <span>.offsetTop expected 34 but got 40
TEST-UNEXPECTED-FAIL | /css/css-overflow/overflow-img-scroll-non-replaced.html | Testing http://web-platform.test:8000/css/css-overflow/overflow-img-scroll-non-replaced.html == http://web-platform.test:8000/css/css-overflow/overflow-img-scroll-non-replaced-ref.html
|
||
Comment 11•13 hours ago
|
||
|
|
Assignee | |
Updated•12 hours ago
|
Description
•