tor-browser

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

non-rendered-element-001.html (3440B)

      1 <!doctype html>
      2 <html>
      3 <head>
      4 <meta charset=utf-8>
      5 <title>CSS Transitions Test: Transitions do not run for an element that is not being rendered</title>
      6 <link rel="help" title="Starting transitions"
      7  href="https://drafts.csswg.org/css-transitions/#starting">
      8 
      9 <script src="/resources/testharness.js" type="text/javascript"></script>
     10 <script src="/resources/testharnessreport.js" type="text/javascript"></script>
     11 <script src="./support/helper.js" type="text/javascript"></script>
     12 
     13 </head>
     14 <body>
     15 <div id="log"></div>
     16 
     17 <script>
     18 promise_test(async t => {
     19  // Create element that is not rendered
     20  const div = addDiv(t, {
     21    style:
     22      'transition: background-color 100s;' +
     23      'background-color: red;' +
     24      'display: none',
     25  });
     26 
     27  // Attach event listeners
     28  div.addEventListener(
     29    'transitionrun',
     30    t.step_func(() => {
     31      assert_unreached('transitionrun event should not be fired');
     32    })
     33  );
     34 
     35  // Resolve before-change style
     36  getComputedStyle(div).backgroundColor;
     37 
     38  // Set up and resolve after-change style
     39  div.style.backgroundColor = 'green';
     40  getComputedStyle(div).backgroundColor;
     41 
     42  // There should be no events received for the triggered transition.
     43  await waitForFrame();
     44  await waitForFrame();
     45 }, 'Transitions do not run on an element not being rendered');
     46 
     47 test(t => {
     48  // Create element that is not rendered
     49  const div = addDiv(t, {
     50    style:
     51      'transition: background-color 100s;' +
     52      'background-color: red;' +
     53      'display: none',
     54  });
     55 
     56  // Resolve before-change style
     57  getComputedStyle(div).backgroundColor;
     58 
     59  // Make it rendered
     60  div.style.display = 'block';
     61 
     62  // Set up and resolve after-change style
     63  div.style.backgroundColor = 'green';
     64  getComputedStyle(div).backgroundColor;
     65 
     66  // We should have jumped immediately to the after-change style rather than
     67  // transitioning to it.
     68  assert_equals(
     69    getComputedStyle(div).backgroundColor,
     70    'rgb(0, 128, 0)',
     71    'No transition should run'
     72  );
     73 }, 'Transitions do not run for an element newly rendered');
     74 
     75 promise_test(async t => {
     76  // Create element
     77  const div = addDiv(t, {
     78    style: 'transition: background-color 100s; background-color: red',
     79  });
     80 
     81  // Attach event listeners
     82  div.addEventListener('transitionrun', t.step_func(() => {
     83    assert_unreached('transitionrun event should not be fired');
     84  }));
     85 
     86  // Resolve before-change style
     87  getComputedStyle(div).backgroundColor;
     88 
     89  // Set up after-change style
     90  div.style.backgroundColor = 'green';
     91 
     92  // But make the element non-rendered
     93  div.style.display = 'none';
     94 
     95  // There should be no events received for the triggered transition.
     96  await waitForFrame();
     97  await waitForFrame();
     98 }, 'Transitions do not run for an element newly made not rendered');
     99 
    100 promise_test(async t => {
    101  // Create element
    102  const div = addDiv(t, {
    103    style: 'transition: background-color 100s; background-color: red',
    104  });
    105 
    106  // Attach event listeners
    107  const eventWatcher = new EventWatcher(t, div, [
    108    'transitionrun',
    109    'transitioncancel',
    110  ]);
    111 
    112  // Trigger transition
    113  getComputedStyle(div).backgroundColor;
    114  div.style.backgroundColor = 'green';
    115  getComputedStyle(div).backgroundColor;
    116 
    117  await eventWatcher.wait_for('transitionrun');
    118 
    119  // Make the element no longer rendered
    120  div.style.display = 'none';
    121 
    122  await eventWatcher.wait_for('transitioncancel');
    123 }, 'Transitions are canceled when an element is no longer rendered');
    124 </script>
    125 
    126 </body>
    127 </html>