Corrupt CSS instructions are not in error with a variables
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: zefling, Unassigned)
Details
Attachments
(1 file)
|
4.46 KB,
image/png
|
Details |
example.png
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0
Steps to reproduce:
In css inspector write on DOM element:
color: xxxxxrgba(255, 255, 255, var(--foo, .2)/ !important )
Actual results:
No error for this CSS value.
Expected results:
Make it be wrong.
I found this error when I add a test for http://css3test.com/
In Chrome, an incorrect instruction is on error, but not in Firefox.
What sort of "error" do you expect?
In particular, with this case, the declaration isn't rejected at parse time; variables introduce the concept of declarations that are invalid at computed value time: https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time .
Are you asking that such errors be reported to the console, or that the CSS behave in a different way?
|
||
Comment 3•7 years ago
|
||
This is invalid, the parse-time error in Chrome is a Chrome bug, which is already fixed in https://bugs.chromium.org/p/chromium/issues/detail?id=921152.
Please reopen if you want a console error or such, but per that comment it looks that you want Chrome's behavior, which is clearly against the spec.
Ok this is valid:
color: xxxxxrgba(255, 255, 255, var(--foo, .2)/ !important)
And this invalid:
color: xxxxxrgba(255, 255, 255, .2 / !important )
Why not.
|
|
||
Comment 5•7 years ago
|
||
For the same reason padding: xxxxfooo var(--foo, 10px) is valid, but padding: xxxxfoo 10px is invalid. From https://drafts.csswg.org/css-variables/#using-variables:
If a property contains one or more var() functions, and those functions are syntactically valid, the entire property’s grammar must be assumed to be valid at parse time. It is only syntax-checked at computed-value time, after var() functions have been substituted.
Description
•