css/css-syntax/var-with-blocks.html

<!DOCTYPE html>
<title>CSS Syntax: {}-blocks in declaration values</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9317">
<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>