pointerevents/pointerevent_pointercapture-in-custom-element.html

<!DOCTYPE html>
<html>
  <head>
    <title>PointerCapture for Custome Shadow DOM</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="help" href= "https://bugs.chromium.org/p/chromium/issues/detail?id=810882">
    <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>
       class WC extends HTMLElement{
        constructor(){
          super();
          let template = document.getElementById('template-wc');
          let node = template.content.cloneNode(true) ;

          let shadowRoot = this.attachShadow({mode: 'open'});
          shadowRoot.appendChild(node);
        }
       }
       customElements.define("wc-wc", WC);
    </script>
    </head>
  <body onload="onLoad()">
    <template id="template-wc">
      <style>
          #content{
              height:50px;
              width:50px;
              background-color: magenta;
          }
      </style>
      <div id="content"></div>
    </template>
    <h4>PointerCapture by Custom Element's Shadow DOM</h4>
      The magenta box below is part of a custom element's Shadow DOM.
    <ul>
      <li> Click left mouse button inside the box and keep mouse button depressed</li>
      <li> Move the mouse</li>
      <li> There should be a message stating <em>Pointer was captured by custom element's Shadow DOM!</em></li>
      <li> Release left mouse button</li>
      <li> There should be a message stating <em>Pointer was released by custom element's Shadow DOM!</em></li>
    </ul>

    <wc-wc id="wc-wc"></wc-wc>
    <div id="log"></div>
    <script>
      function onLoad(){
        var logDiv = document.getElementById("log");
        function logMessage(message){
          var log = document.createElement("div");
          var messageNode = document.createTextNode(message);
          log.appendChild(messageNode);
          logDiv.appendChild(log);
        }
        var events = [];

        var content = document.getElementById("wc-wc")
           .shadowRoot.getElementById("content");

        content.addEventListener("pointerdown", function(e){
          content.setPointerCapture(e.pointerId);
          events.push("pointerdown@content");
        });
        content.addEventListener("gotpointercapture", function(e){
          logMessage("Pointer was captured by custom element's Shadow DOM!");
          events.push("gotpointercapture@content");
        });
        content.addEventListener("pointerup", function(e){
          content.releasePointerCapture(e.pointerId);
          events.push("pointerup@content");
        });
        content.addEventListener("lostpointercapture", function(e){
          logMessage("Pointer was released by custom element's Shadow DOM!");
          events.push("lostpointercapture@content");
          if(window.promise_test && wc_shadow_dom_test){
            wc_shadow_dom_test.step(function(){
              assert_array_equals(events, ["pointerdown@content",
                "gotpointercapture@content", "pointerup@content",
                "lostpointercapture@content"]);
              resolve_test();
            });
          }
        });

        var wc_shadow_dom_test = null;
        var resolve_test = null;
        var reject_test = null;

        function cleanup(){
          events = [];
          shadow_dom_test = null;
          resolve_test = null;
          reject_test = null;
        }
        if(window.promise_test){
          promise_test(async function(t){
            var actions_promise;
            return new Promise(async function(resolve, reject){
              wc_shadow_dom_test = t;
              resolve_test = resolve;
              reject_test = reject;
              t.add_cleanup(function(){
                cleanup();
              });
              var contentRect = content.getBoundingClientRect();
              var actions = new test_driver.Actions();
              actions_promise = actions
                .pointerMove(Math.ceil(contentRect.x), Math.ceil(contentRect.y))
                .pointerDown({button: actions.ButtonType.LEFT})
                .pointerUp({button: actions.ButtonType.LEFT})
                .send();
            }).then(async()=>{
              await actions_promise;
              t.done();
            });
          }, "PointerCapture works for custom element Shadow DOM.");
        }
      }
    </script>
  </body>
</html>