tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

at-rule-cssom.html (3163B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>View transitions: CSSOM for @view-transition rule</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
      5 <link rel="author" href="mailto:bokan@chromium.org">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <style></style>
      9 <script>
     10 function resetStateAndTest(testFunction) {
     11  const sheet = document.styleSheets[0];
     12  while (sheet.cssRules.length > 0) sheet.deleteRule(0);
     13  testFunction();
     14 }
     15 
     16 test(function () {
     17  resetStateAndTest(() => {
     18    document.styleSheets[0].insertRule(`
     19      @view-transition {
     20      }
     21    `);
     22    let rule = document.styleSheets[0].cssRules[0];
     23    assert_true(rule instanceof CSSViewTransitionRule);
     24    assert_equals(rule.type, 0);
     25    assert_equals(rule.cssText, "@view-transition { }");
     26    assert_equals(rule.navigation, '');
     27 
     28  });
     29 }, "CSSViewTransitionRule is correctly parsed and accessible via CSSOM.");
     30 
     31 test(function () {
     32  resetStateAndTest(() => {
     33    document.styleSheets[0].insertRule(`
     34      @view-transition {
     35        navigation: auto;
     36      }
     37    `);
     38    let rule = document.styleSheets[0].cssRules[0];
     39    assert_equals(rule.cssText,
     40        "@view-transition { navigation: auto; }");
     41    assert_equals(rule.navigation, 'auto');
     42 
     43  });
     44 }, "`navigation: auto` is correctly parsed.");
     45 
     46 test(function () {
     47  resetStateAndTest(() => {
     48    document.styleSheets[0].insertRule(`
     49      @view-transition {
     50        navigation: none;
     51      }
     52    `);
     53    let rule = document.styleSheets[0].cssRules[0];
     54    assert_equals(rule.cssText, "@view-transition { navigation: none; }");
     55    assert_equals(rule.navigation, 'none');
     56  });
     57 }, "`navigation: none` is correctly parsed.");
     58 
     59 test(function () {
     60  resetStateAndTest(() => {
     61    assert_throws_dom('SyntaxError', () => {
     62      document.styleSheets[0].insertRule('@view-transition foo {}');
     63    }, "Failed to execute 'insertRule' on 'CSSStyleSheet': " +
     64        "Failed to parse the rule '@view-transition foo {}'");
     65    assert_equals(document.styleSheets[0].cssRules.length, 0);
     66  });
     67 }, "@view-transition fails parsing with a preamble");
     68 
     69 test(function () {
     70  resetStateAndTest(() => {
     71    document.styleSheets[0].insertRule(`
     72      @view-transition {
     73        navigation: foo;
     74      }
     75    `);
     76    let rule = document.styleSheets[0].cssRules[0];
     77    assert_equals(rule.cssText, "@view-transition { }");
     78  });
     79 }, "Invalid `navigation` value fails to parse.");
     80 
     81 test(function () {
     82  resetStateAndTest(() => {
     83    document.styleSheets[0].insertRule(`
     84      @view-transition {
     85        navigation: none !important;
     86      }
     87    `);
     88    let rule = document.styleSheets[0].cssRules[0];
     89    assert_equals(rule.cssText, "@view-transition { }");
     90  });
     91 }, "`navigation` with !important flag should fail to parse.");
     92 
     93 test(function () {
     94  resetStateAndTest(() => {
     95    document.styleSheets[0].insertRule(`
     96      @view-transition {
     97        navigation: none;
     98      }
     99    `);
    100    let rule = document.styleSheets[0].cssRules[0];
    101    rule.navigation = "auto";
    102    assert_equals(rule.navigation, "none");
    103  });
    104 }, "`navigation` descriptor cannot be set.");
    105 
    106 </script>