tor-browser

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

fractional-translation-from-position.html (1302B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: fractional translation from position</title>
      4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
      5 <link rel="author" href="mailto:khushalsagar@chromium.org">
      6 <link rel="match" href="fractional-translation-from-position-ref.html">
      7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      8 <script src="/common/reftest-wait.js"></script>
      9 <style>
     10 body {
     11  width: 100vw;
     12  height: 100vh;
     13  background: grey;
     14  font: 12px/1 Ahem;
     15 }
     16 
     17 #target {
     18  width: 100px;
     19  height: 100px;
     20  position: fixed;
     21  top: 100.52px;
     22  left: 100.37px;
     23 
     24  view-transition-name: target;
     25  contain: layout;
     26 }
     27 
     28 ::view-transition-new(root), ::view-transition-old(root) {
     29  animation-play-state: paused;
     30 }
     31 
     32 ::view-transition-new(target) {
     33  opacity: 1;
     34  animation: unset;
     35 }
     36 ::view-transition-old(target) {
     37  opacity: 0;
     38  animation: unset;
     39 }
     40 </style>
     41 
     42 <div id=target>
     43  Here is some text which should not be blurry.
     44 </div>
     45 
     46 <script>
     47 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     48 
     49 function runTest() {
     50  document.startViewTransition(() => {
     51    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
     52  });
     53 }
     54 
     55 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     56 </script>