Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-syntax/var-with-blocks.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Syntax: {}-blocks in declaration values</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Standard properties -->
<style id=plain_var>
.a {
color: rgb(2, 2, 2);
color:var(--x); /* Valid */
background-color:rgb(1, 1, 1);
}
</style>
<script>
test(() => {
let rules = plain_var.sheet.rules;
assert_equals(rules.length, 1);
let declarations = rules[0].style;
assert_equals(declarations.color, 'var(--x)');
assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)');
}, 'Plain var()');
</script>
<style id=whole_value_block>
.a {
color: rgb(2, 2, 2);
color:{var(--x)}; /* Valid */
background-color:rgb(1, 1, 1);
}
</style>
<script>
test(() => {
let rules = whole_value_block.sheet.rules;
assert_equals(rules.length, 1);
let declarations = rules[0].style;
assert_equals(declarations.color, '{var(--x)}');
assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)');
}, 'Whole-value block with var()');
</script>
<style id=whole_value_block_with_space>
.a {
color: rgb(2, 2, 2);
color: { var(--x) }; /* Valid */
background-color:rgb(1, 1, 1);
}
</style>
<script>
test(() => {
let rules = whole_value_block_with_space.sheet.rules;
assert_equals(rules.length, 1);
let declarations = rules[0].style;
assert_equals(declarations.color, '{ var(--x) }');
assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)');
}, 'Whole-value block with var() (spaces)');
</script>
<style id=trailing_block>
.a {
color: rgb(2, 2, 2);
color:var(--x) { }; /* Invalid */
background-color:rgb(1, 1, 1);
}
</style>
<script>
test(() => {
let rules = trailing_block.sheet.rules;
assert_equals(rules.length, 1);
let declarations = rules[0].style;
assert_equals(declarations.color, 'rgb(2, 2, 2)');
assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)');
}, 'Trailing block, leading var()');
</script>
<style id=leading_block>
.a {
color: rgb(2, 2, 2);
color:{ } var(--x); /* Invalid */
background-color:rgb(1, 1, 1);
}
</style>
<script>
test(() => {
let rules = leading_block.sheet.rules;
assert_equals(rules.length, 1);
let declarations = rules[0].style;
assert_equals(declarations.color, 'rgb(2, 2, 2)');
assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)');
}, 'Leading block, trailing var()');
</script>
<style id=in_block_var_with_trailing_token>
.a {
color: rgb(2, 2, 2);
color:{ var(--x) } A; /* Invalid */
background-color:rgb(1, 1, 1);
}
</style>
<script>
test(() => {
let rules = in_block_var_with_trailing_token.sheet.rules;
assert_equals(rules.length, 1);
let declarations = rules[0].style;
assert_equals(declarations.color, 'rgb(2, 2, 2)');
assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)');
}, 'In-block var() with trailing token');
</script>
<style id=in_block_var_with_leading_token>
.a {
color: rgb(2, 2, 2);
color:A { var(--x) }; /* Invalid */
background-color:rgb(1, 1, 1);
}
</style>
<script>
test(() => {
let rules = in_block_var_with_leading_token.sheet.rules;
assert_equals(rules.length, 1);
let declarations = rules[0].style;
assert_equals(declarations.color, 'rgb(2, 2, 2)');
assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)');
}, 'In-block var() with leading token');
</script>
<!-- Custom Properties -->
<style id=plain_var_custom>
.a {
--y:var(--x); /* Valid */
}
</style>
<script>
test(() => {
let rules = plain_var_custom.sheet.rules;
assert_equals(rules.length, 1);
assert_equals(rules[0].style.getPropertyValue('--y'), 'var(--x)');
}, 'Plain var() (custom property)');
</script>
<style id=whole_value_block_custom>
.a {
--y:{var(--x)}; /* Valid */
}
</style>
<script>
test(() => {
let rules = whole_value_block_custom.sheet.rules;
assert_equals(rules.length, 1);
assert_equals(rules[0].style.getPropertyValue('--y'), '{var(--x)}');
}, 'Whole-value block with var() (custom property)');
</script>
<style id=whole_value_block_with_space_custom>
.a {
--y: { var(--x) }; /* Valid */
}
</style>
<script>
test(() => {
let rules = whole_value_block_with_space_custom.sheet.rules;
assert_equals(rules.length, 1);
assert_equals(rules[0].style.getPropertyValue('--y'), '{ var(--x) }');
}, 'Whole-value block with var() (spaces, custom property)');
</script>
<style id=trailing_block_custom>
.a {
--y:var(--x) { }; /* Valid */
}
</style>
<script>
test(() => {
let rules = trailing_block_custom.sheet.rules;
assert_equals(rules.length, 1);
assert_equals(rules[0].style.getPropertyValue('--y'), 'var(--x) { }');
}, 'Trailing block, leading var() (custom property)');
</script>
<style id=leading_block_custom>
.a {
--y:{ } var(--x); /* Valid */
}
</style>
<script>
test(() => {
let rules = leading_block_custom.sheet.rules;
assert_equals(rules.length, 1);
assert_equals(rules[0].style.getPropertyValue('--y'), '{ } var(--x)');
}, 'Leading block, trailing var() (custom property)');
</script>
<style id=in_block_var_with_trailing_token_custom>
.a {
--y:{ var(--x) } A; /* Valid */
}
</style>
<script>
test(() => {
let rules = in_block_var_with_trailing_token_custom.sheet.rules;
assert_equals(rules.length, 1);
assert_equals(rules[0].style.getPropertyValue('--y'), '{ var(--x) } A');
}, 'In-block var() with trailing token (custom property)');
</script>
<style id=in_block_var_with_leading_token_custom>
.a {
--y:A { var(--x) }; /* Valid */
}
</style>
<script>
test(() => {
let rules = in_block_var_with_leading_token_custom.sheet.rules;
assert_equals(rules.length, 1);
assert_equals(rules[0].style.getPropertyValue('--y'), 'A { var(--x) }');
}, 'In-block var() with leading token (custom property)');
</script>