<!DOCTYPE html>
<html>
  <head>
    <title>PointerCapture for Shadow DOM Elements</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>
  </head>
  <body onload="onLoad()">
    <template id="template">
      <style>
          #content{
              height:100px;
              width:100px;
              background-color: lightgrey;
          }
      </style>
      <div id="content"></div>
    </template>
    <h4>PointerCapture by Shadow DOM element</h4>
    The light gray box below is part of 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 Shadow DOM!</em></li>
      <li> Release left mouse button
      <li> There should be a message stating <em>Pointer was released by Shadow DOM!</em></li>
    </ul>
    <div id="shadowhost"></div>
    <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 host = document.getElementById("shadowhost");
        var shadowRoot = host.attachShadow({mode: "open"});
        var template = document.getElementById("template");
        var node = template.content.cloneNode(true);
        shadowRoot.appendChild(node);

        var content = host.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 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 Shadow DOM!");
          events.push("lostpointercapture@content");
          if(window.promise_test && shadow_dom_test){
            shadow_dom_test.step(function(){
              assert_array_equals(events, ["pointerdown@content",
                "gotpointercapture@content", "pointerup@content",
                "lostpointercapture@content"]);
              resolve_test();
            });
          }
        });

        var 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){
              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 Shadow DOM element.");
        }
      }
    </script>
  </body>
</html>