predicted_events_attributes.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /pointerevents/predicted_events_attributes.html?mouse - WPT Dashboard Interop Dashboard
- /pointerevents/predicted_events_attributes.html?pen - WPT Dashboard Interop Dashboard
- /pointerevents/predicted_events_attributes.html?touch - WPT Dashboard Interop Dashboard

<!doctype html>

<title>Predicted events count and properties</title>

<meta name="variant" content="?mouse">

<meta name="variant" content="?pen">

<meta name="variant" content="?touch">

<meta name="viewport" content="width=device-width">

<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>

<script src="pointerevent_support.js"></script>

<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">

<style>

  div {

    width: 100px;

    height: 100px;

</style>

<div id="target"></div>

<div id="done"></div>

<script>

  "use strict";

  assert_true(location.search.length > 0,

      "Test URL should contain pointer_type");

  const pointer_type = location.search.substring(1);

  assert_true(["mouse", "touch", "pen"].includes(pointer_type));

  const target = document.getElementById("target");

  // https://w3c.github.io/pointerevents/#predicted-events

  function checkListAttributes(event) {

    assert_equals(typeof event.getPredictedEvents, "function",

        event.type + ".getPredictedEvents is a function");

    assert_equals(typeof event.getPredictedEvents(), "object",

        event.type + ".getPredictedEvents() returns an object");

    if (event.type == "pointermove") {

      assert_greater_than_equal(event.getPredictedEvents().length, 0,

          event.type + ".getPredictedEvents() has 0 or more entry");

    } else {

      assert_equals(event.getPredictedEvents().length, 0,

          event.type + ".getPredictedEvents() has 0 entry");

  function actionToDragPointerInTarget() {

    return new test_driver.Actions()

        .addPointer("TestPointer", pointer_type)

        .pointerMove(0, 0, {origin: target})

        .pointerDown()

        .pointerMove(20, 20, {origin: target})

        .pointerUp()

  promise_test(async () => {

    const done = document.getElementById("done");

    let pointerover_promise  = getEvent("pointerover",  target);

    let pointerenter_promise = getEvent("pointerenter", target);

    let pointerout_promise   = getEvent("pointerout",   target);

    let pointerleave_promise = getEvent("pointerleave", target);

    await clickInTarget(pointer_type, target);

    await clickInTarget(pointer_type, done);

    checkListAttributes(await pointerover_promise);

    checkListAttributes(await pointerenter_promise);

    checkListAttributes(await pointerout_promise);

    checkListAttributes(await pointerleave_promise);

  }, "Predicted list in boundary events");

  promise_test(async () => {

    // We need "touch-action:none" to guarantee pointermove events.

    target.classList.add("touchActionNone");

    target.addEventListener("pointerdown",

        e => target.setPointerCapture(e.pointerId),

        {once: true});

    target.addEventListener("pointermove",

        e => target.releasePointerCapture(e.pointerId),

        {once: true});

    let gotpointercapture_promise  = getEvent("gotpointercapture",  target);

    let lostpointercapture_promise = getEvent("lostpointercapture", target);

    await actionToDragPointerInTarget().send();

    checkListAttributes(await gotpointercapture_promise);

    checkListAttributes(await lostpointercapture_promise);

    target.classList.remove("touchActionNone");

  }, "Predicted list in pointer-capture events");

  promise_test(async () => {

    // We need "touch-action:none" to guarantee pointermove events.

    target.classList.add("touchActionNone");

    let pointerdown_promise = getEvent("pointerdown", target);

    let pointermove_promise = getEvent("pointermove", target);

    let pointerup_promise   = getEvent("pointerup",   target);

    await actionToDragPointerInTarget().send();

    checkListAttributes(await pointerdown_promise);

    checkListAttributes(await pointermove_promise);

    checkListAttributes(await pointerup_promise);

    target.classList.remove("touchActionNone");

  }, "Predicted list in pointerdown/move/up events");

  promise_test(async () => {

    if (pointer_type !== "touch") {

      assert_true(true, "Skipped for " + pointer_type);

      return;

    let pointercancel_promise  = getEvent("pointercancel", target);

    await actionToDragPointerInTarget().send();

    checkListAttributes(await pointercancel_promise);

  }, "Predicted list in pointercancel event");

</script>