summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointerrawupdate_in_pointerlock.html
blob: 73aa4e5a58a2f86ac99ceed3525d03589dc36dbd (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
<!doctype html>
<html>
    <head>
        <title>pointerrawupdate</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css">
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <script src="/resources/testdriver.js"></script>
        <script src="/resources/testdriver-actions.js"></script>
        <script src="/resources/testdriver-vendor.js"></script>
        <!-- Additional helper script for common checks across event types -->
        <script type="text/javascript" src="../pointerevent_support.js"></script>
    </head>
    <body onload="run()">
        <h2>pointerrawupdate</h2>
        <h4>Test Description: This test checks if pointerrawupdate is dispatched correctly while in pointerlock mode.
            <ol>
                <li>Click in the black box (and accept the pointerlock permission if asked).</li>
                <li>Move your mouse.</li>
                <li>Click in the purple box inside the iframe</li>
                <li>Move your mouse.</li>
            </ol>
        </h4>
        <div id="target0"></div>
        <iframe id="innerframe" src="../resources/pointerevent_pointerrawupdate_in_pointerlock-iframe.html"></iframe>
        <script>
            window.name="outerframe";
            var test_pointerrawupdate = async_test("pointerrawupdate event received");

            var outerframe_pointerrawupdateReceived = false;
            var innerframe_pointerrawupdateReceived = false;

            async function run() {
                var target0 = document.getElementById("target0");
                var innerframe = document.getElementById('innerframe');
                var target1 = innerframe.contentDocument.getElementById('target1');

                innerframe.contentWindow.name = "innerframe";

                on_event(document, "pointerlockchange", function(event) {
                  if (document.pointerLockElement == target0) {
                    on_event(target0, "pointerrawupdate", function (event) {
                      outerframe_pointerrawupdateReceived = true;
                      test_pointerrawupdate.step(function() {
                        assert_equals(event.view.name, "outerframe", "View attribute of pointerrawupdate should be the target frame. target0 pointerrawupdate");
                      }, "View attribute of pointerrawupdate should be the target frame.");
                    });
                    on_event(target0, "pointermove", function (event) {
                      test_pointerrawupdate.step(function() {
                        assert_true(outerframe_pointerrawupdateReceived,
                                    "Pointerrawupdate event should have been received before pointermove while in pointerlock mode.");
                        assert_equals(event.view.name, "outerframe", "View attribute of pointerrawupdate should be the target frame. target0 pointermove");
                      }, "Pointerrawupdate event should have been received before pointermove while in pointerlock mode.");
                      document.exitPointerLock();

                      on_event(target1, "click", function(event) {
                        target1.requestPointerLock();
                      });

                      on_event(innerframe.contentDocument, "pointerlockchange", function(event) {
                        if (innerframe.contentDocument.pointerLockElement == target1) {
                          on_event(target1, "pointerrawupdate", function (event) {
                            innerframe_pointerrawupdateReceived = true;
                            test_pointerrawupdate.step(function() {
                              assert_equals(event.view.name, "innerframe", "View attribute of pointerrawupdate should be the target frame. target1");
                            }, "View attribute of pointerrawupdate should be the target frame.");
                          });
                          on_event(target1, "pointermove", function (event) {
                            test_pointerrawupdate.step(function() {
                              assert_true(innerframe_pointerrawupdateReceived,
                                    "Pointerrawupdate event should have been received before pointermove while in pointerlock mode.");
                            }, "Pointerrawupdate event should have been received before pointermove while in pointerlock mode.");
                            innerframe.contentDocument.exitPointerLock();
                            test_pointerrawupdate.done();
                          });
                        }
                      });

                    });
                  }
                });
                on_event(target0, "click", function(event) {
                  target0.requestPointerLock();
                });

                // Inject input
                var iframeRect = innerframe.getClientRects()[0];
                var rect = target1.getClientRects()[0];
                var center_x = Math.round(iframeRect.left + (rect.left + rect.right) / 2);
                var center_y = Math.round(iframeRect.top + (rect.top + rect.bottom) / 2);
                await new test_driver.Actions()
                                 .pointerMove(0, 0, {origin: target0})
                                 .pointerDown()
                                 .pointerUp()
                                 .pointerMove(10, 0, {origin: target0})
                                 .pointerMove(center_x, center_y)
                                 .pointerDown()
                                 .pointerUp()
                                 .pointerMove(center_x + 10, center_y)
                                 .send();
            }

        </script>
        <div id="complete-notice">
        </div>
    </body>
</html>