tor-browser

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

helper_checkerboard_zoomoverflowhidden.html (4575B)

      1 <!DOCTYPE HTML>
      2 <html id="root-element">
      3 <head>
      4  <meta charset="utf-8">
      5  <meta name="viewport" content="width=device-width; initial-scale=1.0">
      6  <title>Checkerboarding in while scrolling a subframe when root scrollframe has
      7         overflow hidden and pinch zoomed in</title>
      8  <script type="application/javascript" src="apz_test_utils.js"></script>
      9  <script type="application/javascript" src="apz_test_native_event_utils.js"></script>
     10  <script src="/tests/SimpleTest/paint_listener.js"></script>
     11  <script type="application/javascript">
     12 
     13 async function test() {
     14  var utils = SpecialPowers.getDOMWindowUtils(window);
     15 
     16  var initial_resolution = await getResolution();
     17  ok(initial_resolution > 0,
     18      "The initial_resolution is " + initial_resolution + ", which is some sane value");
     19 
     20  var subframe = document.getElementById('bugzilla-body');
     21 
     22  // layerize subframe
     23  await promiseNativeMouseEventWithAPZAndWaitForEvent({
     24    type: "click",
     25    target: subframe,
     26    offsetX: 10,
     27    offsetY: 10,
     28  });
     29 
     30  // verify layerization
     31  await promiseAllPaintsDone();
     32  ok(isLayerized("bugzilla-body"), "subframe should be layerized at this point");
     33  var subframeScrollId = utils.getViewId(subframe);
     34  ok(subframeScrollId > 0, "subframe should have a scroll id");
     35 
     36  // wait for the dust to settle
     37  await promiseAllPaintsDone();
     38 
     39  let touchEndPromise = promiseTouchEnd(document.documentElement, 2);
     40 
     41  // Ensure that APZ gets updated hit-test info
     42  await promiseAllPaintsDone();
     43 
     44  var zoom_in = [
     45      [ { x: 130, y: 280 }, { x: 150, y: 300 } ],
     46      [ { x: 120, y: 250 }, { x: 160, y: 380 } ],
     47      [ { x: 115, y: 200 }, { x: 180, y: 410 } ],
     48      [ { x: 110, y: 150 }, { x: 200, y: 440 } ],
     49      [ { x: 105, y: 120 }, { x: 210, y: 470 } ],
     50      [ { x: 100, y: 100 }, { x: 230, y: 500 } ],
     51  ];
     52 
     53  var touchIds = [0, 1];
     54  await synthesizeNativeTouchSequences(document.body, zoom_in, null, touchIds);
     55 
     56  await touchEndPromise;
     57  // Flush state and get the resolution we're at now
     58  await promiseApzFlushedRepaints();
     59  let final_resolution = await getResolution();
     60  ok(final_resolution > initial_resolution, "The final resolution (" + final_resolution + ") is greater than the initial resolution");
     61 
     62  touchEndPromise = promiseTouchEnd(document.documentElement);
     63 
     64  // pan back up to the top left
     65  await promiseNativeTouchDrag(window,
     66                               5,
     67                               5,
     68                               500,
     69                               500,
     70                               2);
     71 
     72  await touchEndPromise; // wait for the touchend listener to fire
     73  await promiseApzFlushedRepaints();
     74  await promiseAllPaintsDone();
     75 
     76  touchEndPromise = promiseTouchEnd(document.documentElement);
     77 
     78  // pan right to expose the bug
     79  await promiseNativeTouchDrag(window,
     80                               100,
     81                               20,
     82                               -180,
     83                               0,
     84                               3);
     85 
     86  await touchEndPromise; // wait for the touchend listener to fire
     87  await promiseApzFlushedRepaints();
     88 
     89  assertNotCheckerboarded(utils, subframeScrollId, "Subframe");
     90 }
     91 
     92 waitUntilApzStable()
     93 .then(test)
     94 .then(subtestDone, subtestFailed);
     95 
     96  </script>
     97  <style>
     98 html,
     99 body {
    100  overflow-y: hidden;
    101  height: 100%;
    102 }
    103 
    104 body {
    105  position: absolute;
    106  margin: 0;
    107  width: 100%;
    108  height: 100%;
    109 }
    110 
    111 #wrapper {
    112  position: initial !important;
    113  display: flex;
    114  flex-direction: column;
    115  position: absolute;
    116  overflow: hidden;
    117  width: 100%;
    118  height: 100%;
    119 }
    120 
    121 #bugzilla-body {
    122  flex: auto;
    123  position: relative;
    124  outline: none;
    125  padding: 0 15px;
    126  overflow-x: auto;
    127  overflow-y: scroll;
    128  will-change: transform;
    129 }
    130  </style>
    131 </head>
    132 <body>
    133      <div id="wrapper">
    134         <main id="bugzilla-body">
    135           <p>STR:</p>
    136           <ol>
    137              <li>set <code>apz.allow_zoom</code> to <code>true</code></li>
    138              <li>visit any bugzilla site (like this one)</li>
    139              <li>zoom into the page and observe the left edge of the viewport</li>
    140           </ol>
    141           <p>ER: content should be shown<br>
    142              AR: foreground content seems to disappear, looks like it's being cut off
    143           </p>
    144           <p>I attached a video of the STR to show the problem a little bit better. So far, I could only reproduce this on bugzilla. Words words words words words words words words words words words words words words words words words words words words words words.</p>
    145 
    146           <div style="height: 10000px;"></div>
    147         </main>
    148      </div>
    149 </body>
    150 </html>