<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>HTML Test: drag DataTransfer protected status</title>
    <link rel='author' title='Nika Layzell' href='mailto:nika@thelayzells.com'>
    <link rel='help' href='https://html.spec.whatwg.org/multipage/#the-datatransfer-interface'>
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <style>
      #drag {
        width: 100px;
        height: 100px;
        display: inline-block;
        color: #fff;
        background-color: #f00;
      }
      #drop {
        width: 100px;
        height: 100px;
        display: inline-block;
        color: #fff;
        background-color: #00f;
      }
    </style>
  </head>

  <body>
    <h3>Instructions</h3>
    <p>
      Drag the box labeled "drag" to the box labeled "drop" and release.
    </p>

    <div id="drag" draggable="true">drag</div>
    <div id="drop">drop</div>

    <div id="log"> </div>

    <script>
      var MIME = "text/plain";

      var drop;
      setup(function() {
        drop = document.querySelector("#drop");
      }, {explicit_done: true, explicit_timeout: true});

      var STATUS_PROTECTED = "protected";
      var STATUS_READONLY = "readonly";
      var STATUS_READWRITE = "readwrite";
      var STATUS_DISCONNECTED = "disconnected";
      function status(dt) {
        // Check if we can write to it.
        try {
          dt.setData("text/html", "_test");

          if (dt.getData("text/html") == "_test") {
            dt.clearData("text/html");
            assert_true(!dt.getData("text/html"), "ClearData should work...");
            return STATUS_READWRITE;
          }
        } catch(e) {}

        // If we can read the data then we're readonly
        if (dt.getData(MIME)) {
          return STATUS_READONLY;
        }

        // If we can see that items exist (and read types) then we're protected
        if (dt.items.length > 0) {
          return STATUS_PROTECTED;
        }

        // Otherwise we've been disconnected.
        return STATUS_DISCONNECTED;
      };

      var drag_dt = null;
      var over_dt = null;
      var drop_dt = null;
      on_event(document.body, "dragstart", function(e) {
        drag_dt = e.dataTransfer;
        over_dt = null;
        drop_dt = null;
        drag_dt.setData(MIME, "b");
        test(function() {
          assert_equals(status(drag_dt), STATUS_READWRITE,
                        "drag_dt must be readwrite during dragstart");
        }, "dragstart event status");
      });
      on_event(drop, "dragover", function(e) {
        if (!over_dt) {
          over_dt = e.dataTransfer;
          test(function() {
            assert_equals(status(drag_dt), STATUS_DISCONNECTED,
                          "drag_dt mustbe disconnected during dragover");
            assert_equals(status(over_dt), STATUS_PROTECTED,
                          "over_dt mustbe protected during dragover");
          }, "dragover event status");
          test(function() {
            assert_not_equals(drag_dt, over_dt,
                        "drag_dt must be a different DataTransfer object than over_dt");
          }, "dragover event identity");
        }
        e.preventDefault();
      });
      on_event(drop, "drop", function(e) {
        drop_dt = e.dataTransfer;
        test(function() {
          assert_equals(status(drag_dt), STATUS_DISCONNECTED,
                        "drag_dt mustbe disconnected during drop");
          assert_equals(status(over_dt), STATUS_DISCONNECTED,
                        "over_dt mustbe disconnected during drop");
          assert_equals(status(drop_dt), STATUS_READONLY,
                        "drop_dt mustbe readonly during drop");
        }, "drop event status");
        test(function() {
          assert_not_equals(drop_dt, over_dt,
                            "drop_dt must be a different DataTransfer object than over_dt");
          assert_not_equals(drop_dt, drag_dt,
                            "drop_dt must be a different DataTransfer object than drag_dt");
        }, "drop event identity");
        test(function() {
          assert_equals(drop_dt.getData(MIME), "b",
                        "the data should have been persisted");
        }, "drop event data");
        e.preventDefault();

        setTimeout(function() {
          test(function() {
            assert_equals(status(drag_dt), STATUS_DISCONNECTED,
                          "drag_dt mustbe disconnected after drop");
            assert_equals(status(over_dt), STATUS_DISCONNECTED,
                          "over_dt mustbe disconnected after drop");
            assert_equals(status(drop_dt), STATUS_DISCONNECTED,
                          "drop_dt mustbe disconnected after drop");
          }, "after drop event status");
          done();
        }, 0);
      });
    </script>
  </body>
</html>