tor-browser

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

file_fullscreen-top-layer.html (4450B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4  <meta charset="UTF-8">
      5  <title>Test for Bug 1126230</title>
      6  <style>
      7    #back {
      8      position: fixed !important;
      9      z-index: 2147483647 !important;
     10      top: 0 !important; left: 0 !important;
     11      right: 0 !important; bottom: 0 !important;
     12      width: 100% !important; height: 100% !important;
     13    }
     14    #parent {
     15      position: fixed;
     16      z-index: -2147483748;
     17      width: 0; height: 0;
     18      overflow: hidden;
     19      opacity: 0;
     20      mask: url(#mask);
     21      clip: rect(0, 0, 0, 0);
     22      clip-path: url(#clipPath);
     23      filter: opacity(0%);
     24      will-change: transform;
     25      perspective: 10px;
     26      transform: scale(0);
     27    }
     28    /* The following styles are copied from ua.css to ensure that
     29     * no other style change may trigger frame reconstruction */
     30    :root {
     31      overflow: hidden !important;
     32    }
     33    .two #fullscreen {
     34      position: fixed !important;
     35      top: 0 !important;
     36      left: 0 !important;
     37      right: 0 !important;
     38      bottom: 0 !important;
     39      z-index: 2147483647 !important;
     40      width: 100% !important;
     41      height: 100% !important;
     42      margin: 0 !important;
     43      min-width: 0 !important;
     44      max-width: none !important;
     45      min-height: 0 !important;
     46      max-height: none !important;
     47      box-sizing: border-box !important;
     48    }
     49  </style>
     50  <script src="/tests/SimpleTest/SimpleTest.js"></script>
     51  <script src="/tests/SimpleTest/EventUtils.js"></script>
     52  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
     53  <script type="text/javascript" src="file_fullscreen-utils.js"></script>
     54 </head>
     55 <body>
     56 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1126230">Mozilla Bug 1126230</a>
     57 <div id="parent">
     58  <div id="fullscreen" style="background-color: green"></div>
     59 </div>
     60 <div id="back" style="background-color: red"></div>
     61 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     62  <defs>
     63    <clipPath id="clipPath"></clipPath>
     64    <mask id="mask"></mask>
     65  </defs>
     66 </svg>
     67 <script>
     68 const gParentProperties = [
     69  "position", "zIndex", "overflow",
     70  "opacity", "mask", "clip", "clipPath",
     71  "filter", "willChange", "transform"
     72 ];
     73 
     74 var gInitialVals = {};
     75 
     76 const gParent = document.getElementById("parent");
     77 const gFullscreen = document.getElementById("fullscreen");
     78 const gBack = document.getElementById("back");
     79 
     80 function is(a, b, msg) {
     81  opener.is(a, b, "[top-layer] " + msg);
     82 }
     83 
     84 function isnot(a, b, msg) {
     85  opener.isnot(a, b, "[top-layer] " + msg);
     86 }
     87 
     88 function ok(cond, msg) {
     89  opener.ok(cond, "[top-layer] " + msg);
     90 }
     91 
     92 function synthesizeMouseAtWindowCenter() {
     93  synthesizeMouseAtPoint(innerWidth / 2, innerHeight / 2, {});
     94 }
     95 
     96 
     97 var tests = ["one", "two"];
     98 
     99 function begin() {
    100  // record initial computed style of #parent
    101  const style = getComputedStyle(gParent);
    102  for (var prop of gParentProperties) {
    103    gInitialVals[prop] = style[prop];
    104  }
    105 
    106  nextTest();
    107 }
    108 
    109 function nextTest() {
    110  document.body.className = tests.shift();
    111  // trigger a reflow to ensure the state of frames before fullscreen
    112  gFullscreen.getBoundingClientRect();
    113 
    114  ok(!document.fullscreenElement, "Shouldn't be in fullscreen");
    115  // check window snapshot
    116  assertWindowPureColor(window, "red");
    117  // simulate click
    118  window.addEventListener("click", firstClick);
    119  synthesizeMouseAtWindowCenter();
    120 }
    121 
    122 function firstClick(evt) {
    123  window.removeEventListener("click", firstClick);
    124  is(evt.target, gBack, "Click target should be #back before fullscreen");
    125  addFullscreenChangeContinuation("enter", enterFullscreen);
    126  gFullscreen.requestFullscreen();
    127 }
    128 
    129 function enterFullscreen() {
    130  ok(document.fullscreenElement, "Should now be in fullscreen");
    131  // check window snapshot
    132  assertWindowPureColor(window, "green");
    133  // check computed style of #parent
    134  const style = getComputedStyle(gParent);
    135  for (var prop of gParentProperties) {
    136    is(style[prop], gInitialVals[prop],
    137       `Computed style ${prop} of #parent should not be changed`);
    138  }
    139  // simulate click
    140  window.addEventListener("click", secondClick);
    141  synthesizeMouseAtWindowCenter();
    142 }
    143 
    144 function secondClick(evt) {
    145  window.removeEventListener("click", secondClick);
    146  is(evt.target, gFullscreen, "Click target should be #fullscreen now");
    147  addFullscreenChangeContinuation("exit", exitFullscreen);
    148  document.exitFullscreen();
    149 }
    150 
    151 function exitFullscreen() {
    152  if (tests.length) {
    153    nextTest();
    154  } else {
    155    opener.nextTest();
    156  }
    157 }
    158 </script>
    159 </body>
    160 </html>