tor-browser

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

writing-mode-container-resize.html (1223B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: writing mode on a container</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="writing-mode-container-resize-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 
      9 <style>
     10 #target {
     11  view-transition-name: target;
     12  background: lightblue;
     13  width: 100px;
     14  height: 100px;
     15 }
     16 .vertical {
     17  writing-mode: vertical-lr;
     18 }
     19 ::view-transition-group(root) {
     20  visibility: hidden;
     21  animation-duration: 500s;
     22 }
     23 ::view-transition-old(target) {
     24  animation: unset;
     25  opacity: 1;
     26 }
     27 ::view-transition-new(target) {
     28  animation: unset;
     29  opacity: 0;
     30 }
     31 ::view-transition-group(target) {
     32  height: 50px;
     33  border: 1px solid black;
     34  animation: unset;
     35 }
     36 ::view-transition {
     37  background: pink;
     38 }
     39 </style>
     40 
     41 <div id=target class=vertical></div>
     42 
     43 <script>
     44 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     45 
     46 function runTest() {
     47  const transition = document.startViewTransition(() => target.remove());
     48  transition.ready.then(takeScreenshot);
     49 }
     50 
     51 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     52 </script>