css/css-nesting/nested-declarations-matching.html

<!DOCTYPE html>
<title>CSS Nesting: CSSNestedDeclarations matching</title>
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style>
  .trailing {
    --x: FAIL;
    & { --x: FAIL; }
    --x: PASS;
  }
</style>
<div class=trailing></div>
<script>
  test(() => {
    let e = document.querySelector('.trailing');
    assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
  }, 'Trailing declarations apply after any preceding rules');
</script>


<style>
  .trailing_no_leading {
    & { --x: FAIL; }
    --x: PASS;
  }
</style>
<div class=trailing_no_leading></div>
<script>
  test(() => {
    let e = document.querySelector('.trailing_no_leading');
    assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
  }, 'Trailing declarations apply after any preceding rules (no leading)');
</script>


<style>
  .trailing_multiple {
    --x: FAIL;
    --y: FAIL;
    --z: FAIL;
    --w: FAIL;
    & { --x: FAIL; }
    --x: PASS;
    --y: PASS;
    & { --z: FAIL; }
    --z: PASS;
    --w: PASS;
  }
</style>
<div class=trailing_multiple></div>
<script>
  test(() => {
    let e = document.querySelector('.trailing_multiple');
    let s = getComputedStyle(e);
    assert_equals(s.getPropertyValue('--x'), 'PASS');
    assert_equals(s.getPropertyValue('--y'), 'PASS');
    assert_equals(s.getPropertyValue('--z'), 'PASS');
    assert_equals(s.getPropertyValue('--w'), 'PASS');
  }, 'Trailing declarations apply after any preceding rules (multiple)');
</script>


<style>
  .trailing_specificity {
    --x: FAIL;
    :is(&, div.nomatch2) { --x: PASS; } /* Specificity: (0, 1, 1) */
    --x: FAIL; /* Specificity: (0, 1, 0) */
  }
</style>
<div class=trailing_specificity></div>
<script>
  test(() => {
    let e = document.querySelector('.trailing_specificity');
    assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
  }, 'Nested declarations rule has same specificity as outer selector');
</script>


<style>
  #nomatch, .specificity_top_level {
    --x: FAIL;
    :is(&, div.nomatch2) { --x: PASS; } /* Specificity: (0, 1, 1) */
    --x: FAIL; /* Specificity: (0, 1, 0). In particular, this does not have
               specificity like :is(#nomatch, .specificity_top_level). */
  }
</style>
<div class=specificity_top_level></div>
<script>
  test(() => {
    let e = document.querySelector('.specificity_top_level');
    assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
  }, 'Nested declarations rule has top-level specificity behavior');
</script>


<style>
  #nomatch, .specificity_top_level_max, div.specificity_top_level_max {
    --x: FAIL;
    :is(:where(&), div.nomatch2) { --x: FAIL; } /* Specificity: (0, 1, 1) */
    --x: PASS; /* Specificity: (0, 1, 1) (for div.specificity_top_level_max) */
  }
</style>
<div class=specificity_top_level_max></div>
<script>
  test(() => {
    let e = document.querySelector('.specificity_top_level_max');
    assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
  }, 'Nested declarations rule has top-level specificity behavior (max matching)');
</script>

<style>
  .nested_pseudo::after {
    --x: FAIL;
    @media (width > 0px) {
      --x: PASS;
    }
  }
</style>
<div class=nested_pseudo></div>
<script>
  test(() => {
    let e = document.querySelector('.nested_pseudo');
    assert_equals(getComputedStyle(e, '::after').getPropertyValue('--x'), 'PASS');
  }, 'Bare declartaion in nested grouping rule can match pseudo-element');
</script>

<style>
  #nomatch, .nested_group_rule {
    --x: FAIL;
    @media (width > 0px) {
      --x: FAIL; /* Specificity: (0, 1, 0) */
    }
    --x: PASS;
  }
</style>
<div class=nested_group_rule></div>
<script>
  test(() => {
    let e = document.querySelector('.nested_group_rule');
    assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
  }, 'Nested group rules have top-level specificity behavior');
</script>


<style>
  .nested_scope_rule {
    div:where(&) { /* Specificity: (0, 0, 1) */
      --x: PASS;
    }
    @scope (&) {
      --x: FAIL; /* Specificity: (0, 0, 0) */
    }
  }
</style>
<div class=nested_scope_rule></div>
<script>
  test(() => {
    let e = document.querySelector('.nested_scope_rule');
    assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
  }, 'Nested @scope rules behave like :where(:scope)');
</script>


<style>
  .nested_scope_rule_trailing {
    div:where(&) { /* Specificity: (0, 0, 1) */
      --x: PASS;
    }
    @scope (&) {
      --ignored: 1;
      .ignored {}
      --x: FAIL; /* Specificity: (0, 0, 0) */
    }
  }
</style>
<div class=nested_scope_rule_trailing></div>
<script>
  test(() => {
    let e = document.querySelector('.nested_scope_rule_trailing');
    assert_equals(getComputedStyle(e).getPropertyValue('--x'), 'PASS');
  }, 'Nested @scope rules behave like :where(:scope) (trailing)');
</script>


<style id=set_parent_selector_text_style>
  .set_parent_selector_text {
    div {
      color: red;
    }
    .a1 {
      .ignored {}
      color: green;
    }
  }
</style>
<div class=set_parent_selector_text>
  <div class=a1>A1</div>
  <div class=a2>A2</div>
</div>
<script>
  test(() => {
    let a1 = document.querySelector('.set_parent_selector_text > .a1');
    let a2 = document.querySelector('.set_parent_selector_text > .a2');
    assert_equals(getComputedStyle(a1).color, 'rgb(0, 128, 0)');
    assert_equals(getComputedStyle(a2).color, 'rgb(255, 0, 0)');

    let rules = set_parent_selector_text_style.sheet.cssRules;
    assert_equals(rules.length, 1);
    assert_equals(rules[0].cssRules.length, 2);

    let a_rule = rules[0].cssRules[1];
    assert_equals(a_rule.selectorText, '& .a1');
    a_rule.selectorText = '.a2';
    assert_equals(a_rule.selectorText, '& .a2');

    assert_equals(getComputedStyle(a1).color, 'rgb(255, 0, 0)');
    assert_equals(getComputedStyle(a2).color, 'rgb(0, 128, 0)');
  }, 'Nested declarations rule responds to parent selector text change');
</script>