wpt/css/selectors/active-flex-order-persistence.html at 3a80e93a1882e9a30924f3785e57e23b5ed19fd3 · web-platform-tests/wpt · GitHub

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
<!DOCTYPE html>
<title>:active state persists when flex order changes on mousedown</title>
<link rel="help" href="https://github.com/servo/servo/issues/43862">
<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>
<style>
#container {
    display: flex;
    flex-flow: column;
    width: 200px;
}
#target {
    order: -1;
    height: 50px;
    background: tomato;
}
#target:active {
    order: 1;
    background: yellow;
}
.sibling {
    height: 50px;
    background: cornflowerblue;
}
</style>
<div id="container">
    <div class="sibling"></div>
    <div class="sibling"></div>
    <div id="target"></div>
    <div class="sibling"></div>
    <div class="sibling"></div>
</div>
<script>
function captureActiveState(target) {
    return new Promise(resolve => {
        target.addEventListener("mousedown", () => {
            resolve(target.matches(":active"));
        }, { once: true });
    });
}

promise_test(async t => {
    const target = document.getElementById("target");
    const statePromise = captureActiveState(target);

    await new test_driver.Actions()
        .pointerMove(5, 5, { origin: target })
        .pointerDown()
        .pointerUp()
        .send();

    const wasActive = await statePromise;
    assert_true(wasActive, ":active should be set on mousedown");
}, ":active is set when element is clicked");

promise_test(async t => {
    const target = document.getElementById("target");

    await new test_driver.Actions()
        .pointerMove(5, 5, { origin: target })
        .pointerDown()
        .send();

    // Move the pointer off the target to trigger a hover state change
    await new test_driver.Actions()
        .pointerMove(50, 50)
        .send();

    // Check the active state after moving, but before releasing the mouse
    const isActiveDuringDrag = target.matches(":active");

    await new test_driver.Actions()
        .pointerUp()
        .send();

    assert_true(isActiveDuringDrag, ":active should persist through drag");
}, ":active state persists through mousemove during drag");
</script>