tor-browser

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

transition-behavior.html (4359B)

      1 <!DOCTYPE html>
      2 <link rel=author href="mailto:jarhar@chromium.org">
      3 <link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-behavior-property">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/css/css-animations/support/testcommon.js"></script>
      7 <style>
      8 .testcase {
      9  float: left;
     10  width: 100px;
     11  height: 100px;
     12  transition: all 1s;
     13 }
     14 #discrete {
     15  transition-behavior: allow-discrete;
     16 }
     17 .animated {
     18  float: right;
     19 }
     20 </style>
     21 <body>
     22  <div class=testcase id=discrete>Allow discrete</div>
     23  <div class=testcase id=normal>No discrete</div>
     24 </body>
     25 <script>
     26 promise_test(async () => {
     27  await waitForAnimationFrames(2);
     28  // Regression test for https://crbug.com/1518561
     29  normal.classList.add('animated');
     30  const normalAnims = normal.getAnimations();
     31  assert_equals(normalAnims.length, 0,
     32                "Should not start a discrete property transition");
     33 
     34  discrete.classList.add('animated');
     35  const anims = discrete.getAnimations();
     36  assert_equals(anims.length, 1,
     37                "Should start a discrete property transition");
     38  assert_equals(anims[0].transitionProperty, 'float');
     39 }, 'transition-behavior:allow-discrete should animate discrete properties.');
     40 
     41 promise_test(async t => {
     42  const div = addDiv(t, {
     43    style: 'transition: all 1s normal, float 1s allow-discrete; float: left',
     44  });
     45  getComputedStyle(div).float;
     46 
     47  div.style.float = 'right';
     48  const anims = div.getAnimations();
     49  assert_equals(anims.length, 1,
     50                "Should start a discrete property transition");
     51 }, 'transition-behavior:allow-discrete overlaps the previous normal value.');
     52 
     53 promise_test(async t => {
     54  const div = addDiv(t, {
     55    style: 'transition: all 1s allow-discrete, float 1s normal; float: left',
     56  });
     57  getComputedStyle(div).float;
     58 
     59  div.style.float = 'right';
     60  const anims = div.getAnimations();
     61  assert_equals(anims.length, 0,
     62                "Should not start a discrete property transition");
     63 }, 'transition-behavior:normal overlaps the previous allow-discrete value.');
     64 
     65 promise_test(async t => {
     66  const div = addDiv(t, {
     67    style: 'transition: position 1s allow-discrete; position: relative',
     68  });
     69  getComputedStyle(div).position;
     70 
     71  div.style.position = 'static';
     72  assert_equals(div.getAnimations().length, 1,
     73                "Should start a discrete property transition");
     74 
     75  div.style.transitionBehavior = "normal";
     76  div.style.position = 'absolute';
     77  assert_equals(getComputedStyle(div).position, "absolute");
     78  assert_equals(div.getAnimations().length, 0,
     79                "The running transition should be cancelled");
     80 }, 'transition-behavior changed to normal should stop the running discrete ' +
     81   'transitions.');
     82 
     83 promise_test(async t => {
     84  const div = addDiv(t, {
     85    style: 'transition: clip-path 5s normal; clip-path: circle(50px)',
     86  });
     87  getComputedStyle(div).transition;
     88 
     89  div.style.clipPath = "circle(farthest-side)";
     90  assert_equals(getComputedStyle(div).clipPath, "circle(farthest-side)");
     91  assert_equals(div.getAnimations().length, 0,
     92                "Should not start a transition of discrete animation values");
     93 
     94  div.style.transitionBehavior = "allow-discrete";
     95  div.style.clipPath = "circle(200px)";
     96  assert_equals(getComputedStyle(div).clipPath, "circle(farthest-side)");
     97  assert_equals(div.getAnimations().length, 1,
     98                "Should start a transition for discrete animation values");
     99 }, 'transition-behavior:allow-discrete should animate for values fallback to ' +
    100   'discrete animations.');
    101 
    102 promise_test(async t => {
    103  const div = addDiv(t, {
    104    style: 'transition: clip-path 5s allow-discrete; clip-path: circle(50px)',
    105  });
    106  getComputedStyle(div).transition;
    107 
    108  div.style.clipPath = "circle(farthest-side)";
    109  assert_equals(getComputedStyle(div).clipPath, "circle(50px)");
    110  assert_equals(div.getAnimations().length, 1,
    111                "Should start a transition for discrete animation values");
    112 
    113  div.style.transitionBehavior = "normal";
    114  div.style.clipPath = "ellipse()";
    115  assert_equals(getComputedStyle(div).clipPath, "ellipse()");
    116  assert_equals(div.getAnimations().length, 0,
    117                "The running transition should be cancelled");
    118 }, 'transition-behavior:normal should cancel the running transitions whose ' +
    119   'animation values are not interpolatable');
    120 
    121 </script>