private-cssom-serialization.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 16 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-mixins/private/private-cssom-serialization.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSS @private: CSSOM serialization</title>

<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14243#issuecomment-5180782117">

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

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

<script>

  function testSerialization(description, input, expected = input) {

    test(() => {

      const sheet = new CSSStyleSheet();

      sheet.replaceSync(`.target { ${input} }`);

      const styleRule = sheet.cssRules[0];

      assert_equals(styleRule.cssRules.length, 1);

      const privateRule = styleRule.cssRules[0];

      assert_true(privateRule instanceof CSSPrivateRule);

      assert_equals(privateRule.cssText, expected);

    }, description);

  // Basic declarations.

  testSerialization('Empty @private rule', '@private { }');

  testSerialization('Untyped variable with a default', '@private { --x: red; }');

  testSerialization('Multiple variables', '@private { --a: red; --b <color>: green; }');

  testSerialization('Repeated variable name', '@private { --x: 1px; --x: 2px; }');

  testSerialization('Trailing whitespace is omitted', '@private { --a    ; --b: 1px    ; --c <length>    ; --d <length>: 2px    ; }',

                                                      '@private { --b: 1px; --d <length>: 2px; }');

  // Types.

  testSerialization('Typed variable with a default', '@private { --x <length>: 10px; }');

  testSerialization('Multi-component type', '@private { --x type(<length> | <color>): 1px; }');

  testSerialization('Single-component type() is unwrapped', '@private { --x type(<length>): 10px; }', '@private { --x <length>: 10px; }');

  // Values and escaping.

  testSerialization('Structured default value', '@private { --x: var(--fallback, rgb(1, 2, 3)); }');

  testSerialization('Escaped variable name', '@private { --escaped-\\9 -tab: 1px; }');

  testSerialization('Escaped custom-ident type', '@private { --x I\\ dent: I\\ dent; }');

  // Invalid declarations.

  testSerialization('An all-invalid block serializes as an empty rule', '@private { color: red; }', '@private { }');

  testSerialization('Invalid declarations are omitted', '@private { --x: green; background: red; }', '@private { --x: green; }');

  testSerialization('A variable without a value is omitted', '@private { --x; }', '@private { }');

  testSerialization('A typed variable without a value is omitted', '@private { --x <length>; }', '@private { }');

  testSerialization('!important declaration is omitted', '@private { --x: 1px; --y: 2px !important; }', '@private { --x: 1px; }');

</script>