summaryrefslogtreecommitdiffstats
path: root/gfx/layers/apz/test/mochitest/helper_zoomed_pan.html
blob: 0692c2f588d761611df45fbf69fa2049d418988e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0,minimum-scale=1.0">
  <title>Ensure layout viewport responds to panning while pinched</title>
  <script type="application/javascript" src="apz_test_utils.js"></script>
  <script type="application/javascript" src="apz_test_native_event_utils.js"></script>
  <script src="/tests/SimpleTest/paint_listener.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #content {
      height: 5000px;
      width: 5000px;
      background: repeating-linear-gradient(#EEE, #EEE 100px, #DDD 100px, #DDD 200px);
    }
  </style>
</head>
<body>
  <div id="content"></div>
  <script type="application/javascript">
    const RESOLUTION = 4;
    const OFFSET_SCREEN_PX = 50;
    const OFFSET_CSS_PX = OFFSET_SCREEN_PX / RESOLUTION;

    function computeDelta(visual) {
      // Compute the distance from the right/bottom edge of the visual
      // viewport to the same edge of the layout viewport and add the desired
      // offset to that.
      // We can ignore scrollbar width here since the scrollbar is layouted at
      // the right/bottom edge of this content, not of this window in the case
      // of containerful scrolling.
      return visual - (visual / RESOLUTION) + OFFSET_CSS_PX;
    }

    async function test() {
      const cases = [
        {
          x: 0,
          y: 0,
          dx: (width) => -computeDelta(width),
          dy: () => 0,
          expected: {
            x: [OFFSET_CSS_PX, "x-offset was adjusted"],
            y: [0, "y-offset was not affected"],
          },
        },
        {
          x: OFFSET_CSS_PX,
          y: 0,
          dx: () => 0,
          dy: (height) => -computeDelta(height),
          expected: {
            x: [OFFSET_CSS_PX, "x-offset was not affected"],
            y: [OFFSET_CSS_PX, "y-offset was adjusted"],
          },
        },
      ];

      for (let c of cases) {
        await promiseNativeTouchDrag(window,
                                     c.x,
                                     c.y,
                                     c.dx(document.documentElement.clientWidth),
                                     c.dy(document.documentElement.clientHeight));
        await promiseApzFlushedRepaints();
        is(window.scrollX, c.expected.x[0], c.expected.x[1]);
        is(window.scrollY, c.expected.y[0], c.expected.y[1]);
      }
    }

    SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(RESOLUTION);
    waitUntilApzStable().then(test).then(subtestDone, subtestFailed);
  </script>
</body>
</html>