tor-browser

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

new-content-is-inline.html (3884B)

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