cssstyledeclaration-nested.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/cssstyledeclaration-nested.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSSNestedDeclarationBlock cssom interactions</title>

<link rel="help" href="https://drafts.csswg.org/css-nesting/#the-cssnestrule">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style id="s1">

.parent {

  color: red;

  .child { background: blue; }

  font-size: 20px;

</style>

<div class="parent"><div class="child">C</div></div>

<script>

test(function() {

  const sheet = document.getElementById('s1').sheet;

  const nested = sheet.cssRules[0].cssRules[1];

  assert_true(nested instanceof CSSNestedDeclarations, "Should be a nested declarations rule");

  nested.style.color = "green";

  assert_equals(

    getComputedStyle(document.querySelector(".parent")).color,

    "rgb(0, 128, 0)",

    "Parent should be green now"

);

});

</script>