tor-browser

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

new-content-object-fit-fill.html (1722B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: display content in a pseudo with object-fit: fill</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="author" href="mailto:vmpstr@chromium.org">
      6 <link rel="match" href="content-object-fit-fill-ref.html">
      7 <meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-20">
      8 <script src="/common/reftest-wait.js"></script>
      9 <style>
     10 #target {
     11  width: 100px;
     12  height: 100px;
     13  contain: paint;
     14  position: absolute;
     15  top: 20px;
     16  left: 20px;
     17  view-transition-name: target;
     18  background: lightblue;
     19 }
     20 #inner {
     21  width: 10px;
     22  height: 10px;
     23  background: green;
     24  top: 5px;
     25  left: 10px;
     26 }
     27 #hidden {
     28  background: pink;
     29  width: 10px;
     30  height: 10px;
     31  view-transition-name: hidden;
     32 }
     33 
     34 html::view-transition-group(target) {
     35  animation: unset;
     36  transform: unset;
     37  position: absolute;
     38  top: 10px;
     39  left: 10px;
     40  width: 50px;
     41  height: 50px;
     42 }
     43 
     44 html::view-transition-new(target) {
     45  animation: unset;
     46  opacity: 1;
     47  object-fit: fill;
     48 }
     49 html::view-transition-old(target) {
     50  animation: unset;
     51  opacity: 0;
     52 }
     53 
     54 html::view-transition-group(hidden) {
     55  animation-duration: 500s;
     56  visibility: hidden;
     57 }
     58 
     59 html::view-transition-group(root) { animation: unset; opacity: 0; }
     60 html::view-transition { background: lightpink; }
     61 </style>
     62 
     63 <div id=target><div id=inner></div></div>
     64 <div id=hidden></div>
     65 
     66 <script>
     67 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     68 
     69 async function runTest() {
     70  document.startViewTransition(() => {
     71    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
     72  });
     73 }
     74 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     75 </script>