tor-browser

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

dialog-in-top-layer-during-transition-new.html (1568B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: element in top layer during transition</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="author" href="mailto:khushalsagar@chromium.org">
      6 <link rel="match" href="dialog-in-top-layer-during-transition-ref.html">
      7 
      8 <script src="/common/reftest-wait.js"></script>
      9 <style>
     10 #target {
     11  width: 100px;
     12  height: 100px;
     13  background: lightblue;
     14 
     15  border: unset;
     16  margin: 0;
     17  padding: 0;
     18 
     19  view-transition-name: dialog;
     20  outline: none;
     21 }
     22 
     23 #target::backdrop {
     24  width: 100px;
     25  height: 100px;
     26  background: grey;
     27 
     28  view-transition-name: backdrop;
     29 }
     30 
     31 .hidden {
     32  contain: paint;
     33  width: 10px;
     34  height: 10px;
     35  background: grey;
     36  view-transition-name: hidden;
     37 }
     38 
     39 html::view-transition-group(hidden) { animation-duration: 300s; }
     40 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     41 
     42 html::view-transition-group(backdrop) {
     43  position: fixed;
     44  top: 120px;
     45  left: 0;
     46 }
     47 
     48 html::view-transition-new(backdrop), html::view-transition-new(dialog) {
     49  opacity: 1;
     50  animation: unset;
     51 }
     52 </style>
     53 
     54 <dialog id="target"></dialog>
     55 <div id=hidden class=hidden></div>
     56 
     57 <script>
     58 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     59 
     60 async function runTest() {
     61  const transition = document.startViewTransition(() => {
     62    target.showModal();
     63    target.style.background = "lightgreen";
     64  });
     65  await transition.ready;
     66  takeScreenshot();
     67 }
     68 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     69 </script>