summaryrefslogtreecommitdiffstats
path: root/gfx/layers/apz/test/mochitest/helper_position_fixed_scroll_handoff-5.html
blob: 3d62287c7c6167e7e3dd4ae4f3fb42d08d59b5a3 (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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
  <head>
    <title>APZ overscroll handoff for fixed elements in a subdoc</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>
    <meta name="viewport" content="width=device-width"/>
    <style>
      iframe {
        width: 400px;
        height: 400px;
        border: solid 2px black;
      }
      #rootcontent {
        height: 200vh;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <iframe id="subdoc" srcdoc="
      <!DOCTYPE html>
      <html>
        <head>
          <style>
            #fixed {
              position: fixed;
              top: 0;
              height: 100px;
              width: 80%;
              overflow: scroll;
            }
            #fixed-content {
              background: red;
            }
            #rootcontent {
              background: green;
            }
            .spacer {
              height: 200vh;
              width: 100%;
            }
          </style>
        </head>
        <body>
          <div id='fixed'>
            <div id='fixed-content' class='spacer'></div>
          </div>
          <div id='rootcontent' class='spacer'></div>
        </body>
      </html>
    "></iframe>
    <div id="rootcontent"></div>
  </body>
  <script>
async function test() {
  // Scroll to the bottom of the fixed position element to ensure that the following
  // scroll does trigger overscroll handoff to the subdoc root scrollable element.
  subdoc.contentWindow.fixed.scrollTop = subdoc.contentWindow.fixed.scrollHeight;

  // After scrolling to bottom tick the refresh driver.
  await promiseFrame();

  let firstTransformEnd = promiseTransformEnd();

  info("start scroll #1");

  // Async scroll the fixed element by 200 pixels using the mouse-wheel. This should
  // handoff the overscroll to the subdoc's root scrollable element.
  await promiseMoveMouseAndScrollWheelOver(subdoc.contentWindow.fixed, 50, 50, false, 200);

  info("After scroll #1: fixed=" + subdoc.contentWindow.fixed.scrollTop +
       " subdoc window=" + subdoc.contentWindow.scrollY + " window=" + window.scrollY);

  info("wait scroll #1");
  await firstTransformEnd;

  // Do not attempt the second scroll if we did scroll the root document.
  // A scroll in this case would likely cause the test to timeout. The assertions at the
  // end of the test will catch this.

  // If we triggered a scroll handoff to the _root_ document from the subframe, do not
  // make another attempt at a second scroll. The test has already failed.
  if (window.scrollY == 0) {
    let secondTransformEnd = promiseTransformEnd();

    info("start scroll #2");

    await promiseMoveMouseAndScrollWheelOver(subdoc.contentWindow.fixed, 50, 50, false, 200);

    info("After scroll #2: fixed=" + subdoc.contentWindow.fixed.scrollTop +
         " subdoc window=" + subdoc.contentWindow.scrollY + " window=" + window.scrollY);

    info("wait scroll #2");
    await secondTransformEnd;
  }

  // Ensure that the main element has not scrolled and overscroll was handed off to
  // the subdocument root scrollable element.
  is(window.scrollY, 0, "The overscroll should not handoff to the root window");
  isnot(subdoc.contentWindow.scrollY, 0,
        "The overscroll should handoff to the subdocument's root scrollable element");
}

waitUntilApzStable()
.then(test)
.then(subtestDone, subtestFailed);
  </script>
</html>