tor-browser

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

display-none-dont-cancel.tentative.html (4613B)

      1 <!DOCTYPE html>
      2 <link rel=author href="mailto:jarhar@chromium.org">
      3 <link rel=help href="https://drafts.csswg.org/css-display-4/#display-animation">
      4 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/6429">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/css/css-animations/support/testcommon.js"></script>
      8 
      9 <div id=target1>hello</div>
     10 <style>
     11 @keyframes display1 {
     12  0% { display: none; }
     13  100% { display: inline; }
     14 }
     15 .animate1 {
     16  animation: display1 1s infinite;
     17 }
     18 </style>
     19 <script>
     20 promise_test(async (t) => {
     21  t.add_cleanup(() => target1.classList.remove('animate1'));
     22 
     23  let numAnimationstartFired = 0;
     24  target1.addEventListener('animationstart', () => numAnimationstartFired++);
     25 
     26  await waitForAnimationFrames(1);
     27  target1.classList.add('animate1');
     28  await waitForAnimationFrames(2);
     29 
     30  assert_equals(getComputedStyle(target1).display, 'inline',
     31    'The display should be inline during the animation.');
     32  assert_equals(numAnimationstartFired, 1,
     33    'Only one animation should start.');
     34 }, 'display:none animating to display:inline should be inline for the whole animation.');
     35 </script>
     36 
     37 <div id=target2>hello</div>
     38 <style>
     39 @keyframes display2 {
     40  0% { display: var(--none-value); }
     41  100% { display: inline; }
     42 }
     43 .animate2 {
     44  animation: display2 1s infinite;
     45 }
     46 #target2 {
     47  --none-value: none;
     48 }
     49 </style>
     50 <script>
     51 promise_test(async (t) => {
     52  t.add_cleanup(() => target2.classList.remove('animate2'));
     53 
     54  let numAnimationstartFired = 0;
     55  target2.addEventListener('animationstart', () => numAnimationstartFired++);
     56 
     57  await waitForAnimationFrames(1);
     58  target2.classList.add('animate2');
     59  await waitForAnimationFrames(2);
     60 
     61  assert_equals(getComputedStyle(target2).display, 'inline',
     62    'The display should be inline during the animation.');
     63  assert_equals(numAnimationstartFired, 1,
     64    'Only one animation should start.');
     65 }, 'A CSS variable of display:none animating to display:inline should be inline for the whole animation.');
     66 </script>
     67 
     68 <div id=target3>hello</div>
     69 <style>
     70 @keyframes display3 {
     71  0% { display: none; }
     72  100% { display: none; }
     73 }
     74 .animate3 {
     75  animation: display3 1s infinite;
     76 }
     77 </style>
     78 <script>
     79 promise_test(async (t) => {
     80  t.add_cleanup(() => target3.classList.remove('animate3'));
     81 
     82  let numAnimationstartFired = 0;
     83  target3.addEventListener('animationstart', () => numAnimationstartFired++);
     84 
     85  await waitForAnimationFrames(1);
     86  target3.classList.add('animate3');
     87  await waitForAnimationFrames(2);
     88 
     89  assert_equals(getComputedStyle(target3).display, 'none',
     90    'The display should be none and the animation should keep running.');
     91  assert_equals(numAnimationstartFired, 1,
     92    'Only one animation should start.');
     93 }, 'Animating from display:none to display:none should not cancel the animation.');
     94 </script>
     95 
     96 <div id=target4>hello</div>
     97 <style>
     98 @keyframes display4 {
     99  0% { display: var(--none-value); }
    100  100% { display: var(--none-value); }
    101 }
    102 .animate4 {
    103  animation: display4 1s infinite;
    104 }
    105 #target4 {
    106  --none-value: none;
    107 }
    108 </style>
    109 <script>
    110 promise_test(async (t) => {
    111  t.add_cleanup(() => target4.classList.remove('animate4'));
    112 
    113  let numAnimationstartFired = 0;
    114  target4.addEventListener('animationstart', () => numAnimationstartFired++);
    115 
    116  await waitForAnimationFrames(1);
    117  target4.classList.add('animate4');
    118  await waitForAnimationFrames(2);
    119 
    120  assert_equals(getComputedStyle(target4).display, 'none',
    121    'The display should be none and the animation should keep running.');
    122  assert_equals(numAnimationstartFired, 1,
    123    'Only one animation should start.');
    124 }, 'Animating from display:none to display:none with an intermediate variable should not cancel the animation.');
    125 </script>
    126 
    127 <div id=target5>hello</div>
    128 <style>
    129 @keyframes display5 {
    130  0% { --display: none; }
    131  100% { --display: none; }
    132 }
    133 .animate5 {
    134  animation: display5 1s infinite;
    135 }
    136 #target5 {
    137  display: var(--display, block);
    138 }
    139 </style>
    140 <script>
    141 promise_test(async (t) => {
    142  t.add_cleanup(() => target5.classList.remove('animate5'));
    143 
    144  let numAnimationstartFired = 0;
    145  target5.addEventListener('animationstart', () => numAnimationstartFired++);
    146 
    147  await waitForAnimationFrames(1);
    148  target5.classList.add('animate5');
    149  await waitForAnimationFrames(2);
    150 
    151  assert_equals(getComputedStyle(target5).display, 'none',
    152    'The display should be none and the animation should keep running.');
    153  assert_equals(numAnimationstartFired, 1,
    154    'Only one animation should start.');
    155 }, 'Animating a variable of "none" which gets set to display elsewhere should not cancel the animation.');
    156 </script>