summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/pointerevents/deviceproperties/unique-id-is-unique-manual.tentative.html
blob: 55db05353f5a2f5d543b2c0ba2caf1f066537341 (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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<!--
   Tentative; contingent on merge of:
   https://github.com/w3c/pointerevents/pull/495

   This manual test validates the behavior of PointerEvent.deviceProperties.uniqueId.
   Specifically, this test ensures that pointing devices get their own unique id, and
   that the unique id is persistent over the session.

   In order to run this test, it is necessary to have multiple pointing devices; such as a
   pen and a mouse. Please follow the instructions exactly as written in order to ensure
   the correct results are obtained.
-->
<title>DeviceProperties.uniqueId is unique for pointer events from different devices</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
    #instructions {
        display: inline-block;
        border-right: 1px solid black;
        padding-right: 10px;
        width: 600px;
    }
    #testcontainer {
        display: inline-block;
        width: 300px;
        touch-action: none;
    }

    #currentuniqueid {
        display: inline-block;
    }

    .point1 {
        height: 50px;
        width: 50px;
        background-color: #00eeee;
        display: inline-block;
    }
    .point2 {
        height: 50px;
        width: 50px;
        background-color: #aa33aa;
        display: inline-block;
        float: right;
    }

    .testarea {
        border: 1px solid #000000;
        margin-bottom: 50px;
        width: 100%;
    }

    p {
        padding-bottom: 10px;
    }

    html {
        font-family: Arial, Helvetica, sans-serif;
    }
</style>
<html>
<div id="instructions">
<h2>Instructions</h2>
<p>1. With one pointing device (pointing device #1), drag the pointer from A to B</p>
<p>2. With another pointing device (pointing device #2), drag the pointer from C to D</p>
<p>3. Repeat step 1.</p>
<p>4. Repeat step 2.</p>
<p>5. Click finish and verify the test passes. There should be 4 passing test cases. </p>
</div>
<div id="testcontainer">
    <div>
        Current pointer's unique id: <p id="currentuniqueid"></p>
    </div>
    <div class="testarea" id="device1">
        <div class="point1">A</div>
        <div class="point2">B</div>
    </div>
    <div class="testarea" id="device2">
        <div class="point1">C</div>
        <div class="point2">D</div>
    </div>

    <p>Click on the button below after completing. If a "PASS" result appears the test
    passes, otherwise it fails</p>
    <button onclick="Finish()">Finish Test</button>
</div>
</html>

<script>
    let device1Ids = [];
    let device2Ids = [];

    setup({explicit_timeout: true, explicit_done: true});

    function LogDeviceId(event, list) {
        if (event.deviceProperties) {
            const uniqueId = event.deviceProperties.uniqueId;
            currentuniqueid.innerText = uniqueId ? uniqueId : "Unknown";
            if (!uniqueId) {
                return;
            }
            list.push(uniqueId);
        }
    }

    function LogDeviceId1(event) {
        LogDeviceId(event, device1Ids);
    }

    function LogDeviceId2(event) {
        LogDeviceId(event, device2Ids);
    }

    function Finish() {
        let device1UniqueIds = new Set(device1Ids);
        let device2UniqueIds = new Set(device2Ids);

        test(function () {
            assert_greater_than(device1Ids.length, 1, "Events from Device 1 have uniqueIds.");
            assert_equals(device1UniqueIds.size, 1, "Device 1 has a consistent uniqueId.");
        }, "uniqueId is consistent for device 1");
        test(function () {
            assert_greater_than(device2Ids.length, 1, "Events from Device 2 have uniqueIds.");
            assert_equals(device2UniqueIds.size, 1, "Device 2 has a consistent uniqueId.");
        }, "uniqueId is consistent for device 2");
        test(function () {
            // Ensure the two sets are different.
            assert_equals(device1UniqueIds.intersection(device2UniqueIds).size, 0, "Device 1 and 2 have different uniqueIds.");
        }, "uniqueId is unique to device 1 and device 2");
        done();
    }

    device1.addEventListener("pointerdown", LogDeviceId1, false);
    device1.addEventListener("pointermove", LogDeviceId1, false);
    device1.addEventListener("pointerup", LogDeviceId1, false);

    device2.addEventListener("pointerdown", LogDeviceId2, false);
    device2.addEventListener("pointermove", LogDeviceId2, false);
    device2.addEventListener("pointerup", LogDeviceId2, false);

</script>