Bug 1713787 - Fix whitespace handling inside CSS variables. r=xidorn

As per w3c/csswg-drafts#881 and w3c/csswg-drafts#774.

Differential Revision: https://phabricator.services.mozilla.com/D116459
This commit is contained in:
Emilio Cobos Álvarez 2021-06-06 12:10:28 +00:00
Родитель 53804f0e05
Коммит e3a7c5102a
21 изменённых файлов: 69 добавлений и 141 удалений

Просмотреть файл

@ -28,6 +28,8 @@ function runTest()
"(color: var( --a ) )",
"(color: var(--a, ))",
"(color: var(--a,/**/a))",
"(color: var(--a,))",
"(color: var(--a,/**/))",
"(color: 1px var(--a))",
"(color: var(--a) 1px)",
"(color: something 3px url(whereever) calc(var(--a) + 1px))",
@ -59,6 +61,8 @@ function runTest()
"(--a: var( --b ) )",
"(--a: var(--b, ))",
"(--a: var(--b,/**/a))",
"(--a: var(--b,))",
"(--a: var(--b,/**/))",
"(--a: 1px var(--b))",
"(--a: var(--b) 1px)",
"(--a: something 3px url(whereever) calc(var(--b) + 1px))",
@ -86,11 +90,10 @@ function runTest()
"(--a: '",
"(--a: '\\",
"(--a: \\",
"(--a:)",
];
var failingConditions = [
"(color: var(--a,))",
"(color: var(--a,/**/))",
"(color: var(--a,!))",
"(color: var(--a,!important))",
"(color: var(--a) !important !important)",
@ -104,14 +107,11 @@ function runTest()
"(color: var(--",
"(color: var(--))",
"(--a: var(--b,))",
"(--a: var(--b,/**/))",
"(--a: var(--b,!))",
"(--a: var(--b,!important))",
"((--a: var(--b) !important !important))",
"(--a: var(--b,;))",
"(--a: var(--b);)",
"(--a:)",
"(--a: var(1px))",
"(--a: a))",
"(--a: \"\n",
@ -150,6 +150,8 @@ function runTest()
["color", "var(--a, '"],
["color", "var(--a, '\\"],
["color", "var(--a, \\"],
["color", "var(--a,)"],
["color", "var(--a,/**/)"],
["--a", " var(--b)"],
["--a", "var(--b)"],
@ -157,6 +159,8 @@ function runTest()
["--a", "var( --b ) "],
["--a", "var(--b, )"],
["--a", "var(--b,/**/a)"],
["--a", "var(--b,)"],
["--a", "var(--b,/**/)"],
["--a", "1px var(--b)"],
["--a", "var(--b) 1px"],
["--a", "something 3px url(whereever) calc(var(--b) + 1px)"],
@ -167,6 +171,7 @@ function runTest()
["--a", "{ [ var(--b) ] }"],
["--a", "[;] var(--b)"],
["--a", " "],
["--a", ""],
["--a", "var(--a)"],
["--0", "a"],
["--\\30", "a"],
@ -187,8 +192,6 @@ function runTest()
];
var failingDeclarations = [
["color", "var(--a,)"],
["color", "var(--a,/**/)"],
["color", "var(--a,!)"],
["color", "var(--a,!important)"],
["color", "var(--a,;)"],
@ -202,14 +205,11 @@ function runTest()
["color", "var(a)"],
["color", "var(--"],
["--a", "var(--b,)"],
["--a", "var(--b,/**/)"],
["--a", "var(--b,!)"],
["--a", "var(--b,!important)"],
["--a", "var(--b) !important !important"],
["--a", "var(--b,;)"],
["--a", "var(--b);"],
["--a", ""],
["--a", "var(1px)"],
["(VAR-a", "a"],
["--a", "a)"],

Просмотреть файл

@ -156,7 +156,7 @@ function test_property(property)
var value_has_variable_reference = resolved_value != null;
var is_system_font = property == "font" && value in gSystemFont;
var colon = value == "var(--a)" ? ":" : ": ";
var colon = ": ";
gDeclaration.setProperty(property, value, "");
var idx;

Просмотреть файл

@ -318,11 +318,6 @@ fn parse_declaration_value<'i, 't>(
missing_closing_characters: &mut String,
) -> Result<(TokenSerializationType, TokenSerializationType), ParseError<'i>> {
input.parse_until_before(Delimiter::Bang | Delimiter::Semicolon, |input| {
// Need at least one token
let start = input.state();
input.next_including_whitespace()?;
input.reset(&start);
parse_declaration_value_block(input, references, missing_closing_characters)
})
}
@ -334,6 +329,7 @@ fn parse_declaration_value_block<'i, 't>(
mut references: Option<&mut VarOrEnvReferences>,
missing_closing_characters: &mut String,
) -> Result<(TokenSerializationType, TokenSerializationType), ParseError<'i>> {
input.skip_whitespace();
let mut token_start = input.position();
let mut token = match input.next_including_whitespace_and_comments() {
Ok(token) => token,
@ -477,10 +473,8 @@ fn parse_fallback<'i, 't>(input: &mut Parser<'i, 't>) -> Result<(), ParseError<'
// Exclude `!` and `;` at the top level
// https://drafts.csswg.org/css-syntax/#typedef-declaration-value
input.parse_until_before(Delimiter::Bang | Delimiter::Semicolon, |input| {
// At least one non-comment token.
input.next_including_whitespace()?;
// Skip until the end.
while let Ok(_) = input.next_including_whitespace_and_comments() {}
while input.next_including_whitespace_and_comments().is_ok() {}
Ok(())
})
}
@ -981,12 +975,12 @@ fn substitute_block<'i>(
while input.next().is_ok() {}
} else {
input.expect_comma()?;
input.skip_whitespace();
let after_comma = input.state();
let first_token_type = input
.next_including_whitespace_and_comments()
// parse_var_function() ensures that .unwrap() will not fail.
.unwrap()
.serialization_type();
.ok()
.map_or_else(TokenSerializationType::nothing, |t| t.serialization_type());
input.reset(&after_comma);
let mut position = (after_comma.position(), first_token_type);
last_token_type = substitute_block(

Просмотреть файл

@ -1080,9 +1080,9 @@ impl PropertyDeclarationBlock {
// AppendableValue::Css.
let mut v = CssString::new();
let value = match appendable_value {
AppendableValue::Css { css, with_variables } => {
AppendableValue::Css(css) => {
debug_assert!(!css.is_empty());
AppendableValue::Css { css, with_variables }
appendable_value
},
other => {
append_declaration_value(&mut v, other)?;
@ -1094,14 +1094,13 @@ impl PropertyDeclarationBlock {
continue;
}
AppendableValue::Css {
AppendableValue::Css({
// Safety: serialization only generates valid utf-8.
#[cfg(feature = "gecko")]
css: unsafe { v.as_str_unchecked() },
unsafe { v.as_str_unchecked() }
#[cfg(feature = "servo")]
css: &v,
with_variables: false,
}
&v
})
},
};
@ -1183,12 +1182,7 @@ where
DeclarationsForShorthand(ShorthandId, I),
/// A raw CSS string, coming for example from a property with CSS variables,
/// or when storing a serialized shorthand value before appending directly.
Css {
/// The raw CSS string.
css: &'a str,
/// Whether the original serialization contained variables or not.
with_variables: bool,
},
Css(&'a str),
}
/// Potentially appends whitespace after the first (property: value;) pair.
@ -1213,7 +1207,7 @@ where
I: Iterator<Item = &'a PropertyDeclaration>,
{
match appendable_value {
AppendableValue::Css { css, .. } => dest.write_str(css),
AppendableValue::Css(css) => dest.write_str(css),
AppendableValue::Declaration(decl) => decl.to_css(dest),
AppendableValue::DeclarationsForShorthand(shorthand, decls) => {
shorthand.longhands_to_css(decls, &mut CssWriter::new(dest))
@ -1236,25 +1230,7 @@ where
handle_first_serialization(dest, is_first_serialization)?;
property_name.to_css(&mut CssWriter::new(dest))?;
dest.write_char(':')?;
// for normal parsed values, add a space between key: and value
match appendable_value {
AppendableValue::Declaration(decl) => {
if !decl.value_is_unparsed() {
// For normal parsed values, add a space between key: and value.
dest.write_str(" ")?
}
},
AppendableValue::Css { with_variables, .. } => {
if !with_variables {
dest.write_str(" ")?
}
},
// Currently append_serialization is only called with a Css or
// a Declaration AppendableValue.
AppendableValue::DeclarationsForShorthand(..) => unreachable!(),
}
dest.write_str(": ")?;
append_declaration_value(dest, appendable_value)?;

Просмотреть файл

@ -1521,7 +1521,7 @@ impl ShorthandId {
// https://drafts.csswg.org/css-variables/#variables-in-shorthands
if let Some(css) = first_declaration.with_variables_from_shorthand(self) {
if declarations2.all(|d| d.with_variables_from_shorthand(self) == Some(css)) {
return Some(AppendableValue::Css { css, with_variables: true });
return Some(AppendableValue::Css(css));
}
return None;
}
@ -1529,10 +1529,7 @@ impl ShorthandId {
// Check whether they are all the same CSS-wide keyword.
if let Some(keyword) = first_declaration.get_css_wide_keyword() {
if declarations2.all(|d| d.get_css_wide_keyword() == Some(keyword)) {
return Some(AppendableValue::Css {
css: keyword.to_str(),
with_variables: false,
});
return Some(AppendableValue::Css(keyword.to_str()))
}
return None;
}
@ -1725,7 +1722,8 @@ impl UnparsedValue {
let mut input = ParserInput::new(&css);
let mut input = Parser::new(&mut input);
input.skip_whitespace(); // Unnecessary for correctness, but may help try() rewind less.
input.skip_whitespace();
if let Ok(keyword) = input.try_parse(CSSWideKeyword::parse) {
return Cow::Owned(PropertyDeclaration::css_wide_keyword(longhand_id, keyword));
}
@ -2441,12 +2439,11 @@ impl PropertyDeclaration {
debug_assert!(id.allowed_in(context), "{:?}", id);
let non_custom_id = id.non_custom_id();
input.skip_whitespace();
let start = input.state();
match id {
PropertyId::Custom(property_name) => {
// FIXME: fully implement https://github.com/w3c/csswg-drafts/issues/774
// before adding skip_whitespace here.
// This probably affects some test results.
let value = match input.try_parse(CSSWideKeyword::parse) {
Ok(keyword) => CustomDeclarationValue::CSSWideKeyword(keyword),
Err(()) => CustomDeclarationValue::Value(
@ -2461,7 +2458,6 @@ impl PropertyDeclaration {
}
PropertyId::LonghandAlias(id, _) |
PropertyId::Longhand(id) => {
input.skip_whitespace(); // Unnecessary for correctness, but may help try() rewind less.
input.try_parse(CSSWideKeyword::parse).map(|keyword| {
PropertyDeclaration::css_wide_keyword(id, keyword)
}).or_else(|()| {
@ -2491,7 +2487,6 @@ impl PropertyDeclaration {
}
PropertyId::ShorthandAlias(id, _) |
PropertyId::Shorthand(id) => {
input.skip_whitespace(); // Unnecessary for correctness, but may help try() rewind less.
if let Ok(keyword) = input.try_parse(CSSWideKeyword::parse) {
if id == ShorthandId::All {
declarations.all_shorthand = AllShorthand::CSSWideKeyword(keyword)

Просмотреть файл

@ -2,6 +2,3 @@
[target6]
expected: FAIL
[target9]
expected: FAIL

Просмотреть файл

@ -1,13 +0,0 @@
[variable-invalidation.html]
[css rule test]
expected: FAIL
[css rule test important]
expected: FAIL
[inline style test]
expected: FAIL
[inline style test important]
expected: FAIL

Просмотреть файл

@ -58,8 +58,8 @@
initializeStyles();
inner.style.cssText = testcase.property + ': var(--x)';
testcase.values.forEach(function (value) {
outer.style.cssText = "--x:" + value.outer;
inbetween.style.cssText = "--x:" + value.inbetween;
outer.style.cssText = value.outer ? "--x:" + value.outer : "";
inbetween.style.cssText = value.inbetween ? "--x:" + value.inbetween : "";
let computedStyle = getComputedStyle(inner);
let actualValue = computedStyle.getPropertyValue(testcase.property);
assert_equals(actualValue, value.expected, value.Id);

Просмотреть файл

@ -3,15 +3,15 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having no tokens in its fallback.</title>
<title>CSS Test: Test declaring a variable with valid syntax due to a variable reference having no tokens in its fallback.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
p {
color: red;
--a: green;
--b: crimson;
--a: crimson;
--b: green;
--a: var(--b,);
color: var(--a);
}

Просмотреть файл

@ -3,15 +3,15 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having only a comment in its fallback.</title>
<title>CSS Test: Test declaring a variable with a variable reference having only a comment in its fallback.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
p {
color: red;
--a: green;
--b: crimson;
--a: crimson;
--b: green;
--a: var(--b,/**/);
color: var(--a);
}

Просмотреть файл

@ -1,21 +0,0 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a variable with invalid syntax due to having no tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
p {
color: red;
}
p {
color: orange;
--a: green;
--a:;
color: var(--a);
}
</style>
<p>This text must be green.</p>

Просмотреть файл

@ -23,19 +23,19 @@
{ varName:"--v", expectedValue:"value", style:"--v:value", testName:"single char variable"},
{ varName:"---", expectedValue:"value", style:"---:value", testName:"single char '-' variable"},
{ varName:"--", expectedValue:"", style:"--:value", testName:"no char variable"},
{ varName:"--var", expectedValue:" ", style:"--var: ", testName:"white space value (single space)"},
{ varName:"--var", expectedValue:" ", style:"--var: ", testName:"white space value (double space)"},
{ varName:"--var", expectedValue:"", style:"--var: ", testName:"white space value (single space)"},
{ varName:"--var", expectedValue:"", style:"--var: ", testName:"white space value (double space)"},
{ varName:"--var", expectedValue:"value2", style:"--var:value1; --var:value2", testName:"overwrite"},
{ varName:"--var", expectedValue:"value", style:"--var:value;--var:;", testName:"can't overwrite with no value"},
{ varName:"--var", expectedValue:" ", style:"--var:value;--var: ;", testName:"can overwrite with space value"},
{ varName:"--var", expectedValue:"", style:"--var:value;--var:;", testName:"can't overwrite with no value"},
{ varName:"--var", expectedValue:"", style:"--var:value;--var: ;", testName:"can overwrite with space value"},
{ varName:"--var", expectedValue:"value1", style:"--var:value1; --Var:value2", testName:"case sensetivity"},
{ varName:"--Var", expectedValue:"value2", style:"--var:value1; --Var:value2", testName:"case sensetivity2"},
{ varName:"---var", expectedValue:"value", style:"---var:value;", testName:"parsing three dashes at start of variable"},
{ varName:"-var4" , expectedValue:"", style:"-var4:value3", testName:"parsing multiple dashes with one dash at start of variable"},
{ varName:"--var", expectedValue:" value", style:"--var: value", testName:" leading white space (single space)"},
{ varName:"--var", expectedValue:"value", style:"--var: value", testName:" leading white space (single space)"},
{ varName:"--var", expectedValue:"value1 value2", style:"--var:value1 value2", testName:" middle white space (single space)"},
{ varName:"--var", expectedValue:"value ", style:"--var:value ", testName:" trailing white space (single space)"},
{ varName:"--var", expectedValue:" value", style:"--var: value", testName:" leading white space (double space) 2"},
{ varName:"--var", expectedValue:"value", style:"--var: value", testName:" leading white space (double space) 2"},
{ varName:"--var", expectedValue:"value1 value2", style:"--var:value1 value2",testName:" middle white space (double space) 2"},
{ varName:"--var", expectedValue:"value ", style:"--var:value ", testName:" trailing white space (double space) 2"},
{ varName:"--var", expectedValue:"value1 ", style:"--var:value1 !important;", testName:"!important"},

Просмотреть файл

@ -3,17 +3,17 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains no tokens.</title>
<title>CSS Test: Test declaring a non-custom property with a variable reference whose fallback contains no tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body {
--a: crimson;
--a: green;
color: red;
}
p {
color: green;
color: crimson;
color: var(--a,);
}
</style>

Просмотреть файл

@ -3,17 +3,17 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains nothing but a comment.</title>
<title>CSS Test: Test declaring a non-custom property with a variable reference whose fallback contains nothing but a comment.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body {
--a: crimson;
--a: green;
color: red;
}
p {
color: green;
color: crimson;
color: var(--a,/**/);
}
</style>

Просмотреть файл

@ -34,11 +34,11 @@
{ cssText: "width: var(--prop1, var(--prop2));", expectedPropertyValue: "var(--prop1, var(--prop2))" },
{ cssText: "width: var(--prop1, var(--prop2, var(--prop3, auto)));", expectedPropertyValue: "var(--prop1, var(--prop2, var(--prop3, auto)))" },
{ cssText: "width: var(--prop1) var(--prop2)", expectedPropertyValue: "var(--prop1) var(--prop2)" },
{ cssText: "width: var(--prop,);", expectedPropertyValue: "var(--prop,)" },
{ cssText: "width: var();", expectedPropertyValue: "" },
{ cssText: "width: var(prop);", expectedPropertyValue: "" },
{ cssText: "width: var(-prop);", expectedPropertyValue: "" },
{ cssText: "width: var(--prop,);", expectedPropertyValue: "" },
{ cssText: "width: var(--prop 20px);", expectedPropertyValue: "" },
{ cssText: "width: var(--prop, var(prop));", expectedPropertyValue: "" },
{ cssText: "width: var(--prop, var(-prop));", expectedPropertyValue: "" },

Просмотреть файл

@ -101,7 +101,7 @@
"use strict";
var testcases = [
{ element: "target1", propertyName: "--var2", expectedPropertyValue: " 23px 13px 17px 10px" },
{ element: "target1", propertyName: "--var2", expectedPropertyValue: "23px 13px 17px 10px" },
{ element: "target1", propertyName: "margin-top", expectedPropertyValue: "23px" },
{ element: "target1", propertyName: "margin-right", expectedPropertyValue: "13px" },
{ element: "target1", propertyName: "margin-bottom", expectedPropertyValue: "17px" },
@ -109,15 +109,15 @@
{ element: "target2parent", propertyName: "--var1", expectedPropertyValue: "" },
{ element: "target2parent", propertyName: "--var2", expectedPropertyValue: "" },
{ element: "target2", propertyName: "--var1", expectedPropertyValue: " good" },
{ element: "target2", propertyName: "--var1", expectedPropertyValue: "good" },
{ element: "target2", propertyName: "--var2", expectedPropertyValue: "" },
{ element: "target3", propertyName: "--var1", expectedPropertyValue: " 5px" },
{ element: "target3", propertyName: "--var2", expectedPropertyValue: " 5px" },
{ element: "target3", propertyName: "--var1", expectedPropertyValue: "5px" },
{ element: "target3", propertyName: "--var2", expectedPropertyValue: "5px" },
{ element: "target4", propertyName: "--varA", expectedPropertyValue: "" },
{ element: "target4", propertyName: "--varB", expectedPropertyValue: "" },
{ element: "target4", propertyName: "--varC", expectedPropertyValue: " 13px" },
{ element: "target4", propertyName: "--varC", expectedPropertyValue: "13px" },
{ element: "target5", propertyName: "--varA", expectedPropertyValue: "" },
{ element: "target5", propertyName: "--varB", expectedPropertyValue: "" },
@ -132,9 +132,9 @@
{ element: "target7", propertyName: "--varC", expectedPropertyValue: "" },
{ element: "target8", propertyName: "--varA", expectedPropertyValue: "" },
{ element: "target8", propertyName: "--varB", expectedPropertyValue: " 7px" },
{ element: "target8", propertyName: "--varB", expectedPropertyValue: "7px" },
{ element: "target9", propertyName: "--varA", expectedPropertyValue: " good" },
{ element: "target9", propertyName: "--varA", expectedPropertyValue: "good" },
{ element: "target9", propertyName: "--varB", expectedPropertyValue: "" },
{ element: "target9", propertyName: "--varC", expectedPropertyValue: "" },
@ -152,4 +152,4 @@
});
</script>
</body>
</html>
</html>

Просмотреть файл

@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens.</title>
<title>CSS Test: Test a non-custom property declaration in an @supports rule where the property value contains a variable reference having no fallback tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (color: var(--a)) and (not (color: var(--a,))) {
@supports (color: var(--a)) and (color: var(--a,)) {
p { color: green; }
}
</style>

Просмотреть файл

@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens, just a comment.</title>
<title>CSS Test: Test a non-custom property declaration in an @supports rule where the property value contains a variable reference having no fallback tokens, just a comment.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (color: var(--a)) and (not (color: var(--a,/**/))) {
@supports (color: var(--a)) and (color: var(--a,/**/)) {
p { color: green; }
}
</style>

Просмотреть файл

@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens.</title>
<title>CSS Test: Test a custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (--a: a) and (not (--a: var(--b,))) {
@supports (--a: a) and (--a: var(--b,)) {
p { color: green; }
}
</style>

Просмотреть файл

@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens, just a comment.</title>
<title>CSS Test: Test a property declaration in an @supports rule whose value contains a variable reference with no fallback tokens, just a comment.</title>
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (--a: a) and (not (--a: var(--b,/**/))) {
@supports (--a: a) and (--a: var(--b,/**/)) {
p { color: green; }
}
</style>

Просмотреть файл

@ -9,7 +9,7 @@
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (--a: a) and (not (--a:)) {
@supports (--a: a) and (--a:) {
p { color: green; }
}
</style>