Revision 29ad6b8c4b678cdb1ab4649f8b3acf54cd56bccc authored by Anne van Kesteren on 24 September 2018, 14:41:07 UTC, committed by Anne van Kesteren on 24 September 2018, 14:41:07 UTC
For https://github.com/httpwg/http-core/issues/136.
1 parent 00c1fd9
Raw File
pointerevent_on_event_handlers.html
<!doctype html>
<html>
    <head>
        <title>PointerEvent: Constructor test</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>
        <!-- Additional helper script for common checks across event types -->
        <script type="text/javascript" src="pointerevent_support.js"></script>
    </head>
    <body>
    <h1>PointerEvent: Dispatch custom event</h1>
    <h4>Test Description: This test checks if on pointer event handlers through attributes works properly using synthetic pointerevents. For valid results, this test must be run without generating real (trusted) events on the black rectangle below.</h4>
    <div id="target0"
         onpointercancel="window.eventHappened = 'pointercancel';"
         onpointerdown="window.eventHappened = 'pointerdown';"
         onpointerup="window.eventHappened = 'pointerup';"
         onpointermove="window.eventHappened = 'pointermove';"
         onpointerout="window.eventHappened = 'pointerout';"
         onpointerover="window.eventHappened = 'pointerover';"
         onpointerleave="window.eventHappened = 'pointerleave';"
         onpointerenter="window.eventHappened = 'pointerenter';"
         ongotpointercapture="window.eventHappened = 'gotpointercapture';"
         onlostpointercapture="window.eventHappened = 'lostpointercapture';"
    ></div>
    <script>
        window.eventHappened = '';

        All_Pointer_Events.forEach(function(event) {
            var on_event = "on" + event;

            test(function() {
              const htmlElement = document.createElement("span");
              const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
              for (var location of [window, htmlElement, svgElement, document]) {
                assert_equals(location[on_event], null,
                  `The default value of the property is null for a ${location.constructor.name} instance`);
              }
            }, "The default value of " + on_event + " is always null");

            test(function() {
              window.eventHappened = '';
              const element = document.querySelector("#target0");
              const compiledHandler = element[on_event];
              assert_equals(typeof compiledHandler, "function", "The " + on_event + " property must be a function");
              compiledHandler();
              assert_equals(window.eventHappened, event, "Calling the handler must run the code");
            }, "The " + on_event + " content attribute must be compiled into the " + on_event + " property");

            var handlerTest = async_test("dispatching a " + event + " event must trigger element." + on_event);
            const element = document.createElement("meta");
            element[on_event] = function(e) {
              handlerTest.step(function() {
                assert_equals(e.currentTarget, element, "The event must be fired at the <meta> element");
              });
              handlerTest.done();
            };
            element.dispatchEvent(new Event(event));
        });
    </script>
    <div id="complete-notice">
    <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
    </div>
    <div id="log"></div>
    </body>
</html>
back to top