tor-browser

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

at-property-stylesheets.html (2913B)

      1 <!DOCTYPE html>
      2 <title>Verify that the correct registration is selected for mutated stylesheets</title>
      3 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#determining-registration">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="./resources/utils.js"></script>
      7 <div id=div></div>
      8 <script>
      9 
     10 test(() => {
     11  with_at_property({
     12    syntax: '"<length>"',
     13    inherits: false,
     14    initialValue: '1px'
     15  }, (name) => {
     16    assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
     17  });
     18 }, '@property detected when stylesheet appears');
     19 
     20 test(() => {
     21  let name = generate_name();
     22  with_at_property({
     23    name: name,
     24    syntax: '"<length>"',
     25    inherits: false,
     26    initialValue: '1px'
     27  }, (name) => {
     28    assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
     29  });
     30  assert_equals(getComputedStyle(div).getPropertyValue(name), '');
     31 }, '@property removal detected when last @property rule disappears');
     32 
     33 test(() => {
     34  with_at_property({
     35    syntax: '"<length>"',
     36    inherits: false,
     37    initialValue: '1px'
     38  }, (name1) => {
     39    with_at_property({
     40      syntax: '"<length>"',
     41      inherits: false,
     42      initialValue: '2px'
     43    }, (name2) => {
     44      assert_equals(getComputedStyle(div).getPropertyValue(name2), '2px');
     45    });
     46  });
     47 }, '@property detected in second stylesheet');
     48 
     49 test(() => {
     50  let name2 = generate_name();
     51  with_at_property({
     52    syntax: '"<length>"',
     53    inherits: false,
     54    initialValue: '1px'
     55  }, (name1) => {
     56    with_at_property({
     57      name2: name2,
     58      syntax: '"<length>"',
     59      inherits: false,
     60      initialValue: '2px'
     61    }, (name2) => {
     62      assert_equals(getComputedStyle(div).getPropertyValue(name2), '2px');
     63    });
     64    assert_equals(getComputedStyle(div).getPropertyValue(name2), '');
     65  });
     66 }, '@property removal detected with removal of second stylesheet');
     67 
     68 test(() => {
     69  let name1 = generate_name();
     70  let name2 = generate_name();
     71 
     72  let sheet1 = `
     73    @property ${name1} {
     74      inherits: false;
     75      syntax: "<length>";
     76      initial-value: 1px;
     77    }
     78  `;
     79  let sheet2 = `
     80    @property ${name2} {
     81      inherits: false;
     82      syntax: "<length>";
     83      initial-value: 2px;
     84    }
     85  `;
     86 
     87  let node1 = document.createElement('style');
     88  let node2 = document.createElement('style');
     89 
     90  node1.textContent = sheet1;
     91  node2.textContent = sheet2;
     92 
     93  try {
     94    document.body.append(node1, node2);
     95    assert_equals(getComputedStyle(div).getPropertyValue(name1), '1px');
     96    assert_equals(getComputedStyle(div).getPropertyValue(name2), '2px');
     97    node1.remove();
     98    assert_equals(getComputedStyle(div).getPropertyValue(name1), '');
     99    assert_equals(getComputedStyle(div).getPropertyValue(name2), '2px');
    100  } finally {
    101    node1.remove();
    102    node2.remove();
    103  }
    104 }, '@property removal detected with removal of first stylesheet');
    105 
    106 </script>