tor-browser

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

old-content-is-inline.html (3769B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: Old content is an inline element.</title>
      4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
      5 <link rel="author" href="mailto:bokan@chromium.org">
      6 <link rel="match" href="old-content-is-inline-ref.html">
      7 <meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-500">
      8 <script src="/common/reftest-wait.js"></script>
      9 
     10 <style>
     11 body { margin : 0; }
     12 .container {
     13  position: absolute;
     14  left: 100px;
     15  width: 400px;
     16  height: 100px;
     17  background-color: grey;
     18 }
     19 
     20 .container.start {
     21  top: 100px;
     22  view-transition-name: container-start;
     23 }
     24 
     25 .container.end {
     26  top: 300px;
     27  view-transition-name: container-end;
     28 }
     29 
     30 .transitioned .container {
     31  left: 20px;
     32  width: 600px;
     33  transform: translateY(-50px);
     34 }
     35 
     36 .inline {
     37  background-color: limegreen;
     38  /* allow small pixel diff in text */
     39  color: rgba(0, 0, 0, 0);
     40 }
     41 
     42 .start .inline {
     43  view-transition-name: start;
     44 }
     45 
     46 .end .inline {
     47  view-transition-name: end;
     48 }
     49 
     50 .transitioned .inline {
     51  background-color: coral;
     52 }
     53 
     54 /* Overlay the page with purple to ensure screenshots taken are of the view
     55 * transition. */
     56 :root {
     57  view-transition-name: none;
     58 }
     59 ::view-transition {
     60  background-color: rebeccapurple;
     61 }
     62 
     63 /* This step function keeps the old snapshots in their initial state for half
     64 * the duration, then the new snapshots in their final state for the last half
     65 * of the duration. */
     66 html::view-transition-group(*),
     67 html::view-transition-new(*),
     68 html::view-transition-old(*) {
     69  animation-timing-function: steps(2, jump-none);
     70 }
     71 
     72 /* Set different durations for start and end so the two subtrees can be
     73 * differentiated. The test will manually control animation playback so
     74 * duration doesn't matter. */
     75 html::view-transition-group(container-start),
     76 html::view-transition-group(start),
     77 html::view-transition-new(container-start),
     78 html::view-transition-old(container-start) {
     79  animation-duration: 2s;
     80 }
     81 html::view-transition-group(container-end),
     82 html::view-transition-group(end),
     83 html::view-transition-new(container-end),
     84 html::view-transition-old(container-end) {
     85  animation-duration: 3s;
     86 }
     87 
     88 /* Hide the new states for the inlines, they're tested in
     89 * new-content-is-inline.html */
     90 html::view-transition-new(start),
     91 html::view-transition-new(end) {
     92  animation: unset;
     93  opacity: 0;
     94 }
     95 html::view-transition-old(start),
     96 html::view-transition-old(end) {
     97  animation: unset;
     98  opacity: 1;
     99 }
    100 
    101 </style>
    102 
    103 <!--
    104 This subtree will be held at the animation start to test the old content's
    105 starting position.
    106 -->
    107 <div class="container start">
    108  <span>FILLER FILLER</span>
    109  <span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
    110  <p>START STATE</p>
    111 </div>
    112 
    113 <!--
    114 This subtree will be held at the animation end to test the old content's
    115 ending position.
    116 -->
    117 <div class="container end">
    118  <span>FILLER FILLER</span>
    119  <span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
    120  <p>END STATE</p>
    121 </div>
    122 
    123 <script>
    124 if (typeof failIfNot != 'undefined')
    125  failIfNot(document.startViewTransition, "Missing document.startViewTransition");
    126 
    127 async function runTest() {
    128  let transition = document.startViewTransition(() => {
    129    document.body.classList.add('transitioned');
    130  });
    131 
    132  transition.ready.then(() => {
    133    for (const anim of document.getAnimations()) {
    134      anim.pause();
    135      if (anim.effect.getTiming().duration == 3000) {
    136        // This is an animation for the end subtree. Adjust it to the end
    137        // (without finishing the animation) so we're displaying the final
    138        // position.
    139        anim.currentTime = anim.effect.getTiming().duration - 1;
    140      }
    141    }
    142 
    143    requestAnimationFrame(takeScreenshot);
    144  });
    145 }
    146 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
    147 
    148 </script>