Blink: Set access policy to protected mode in Drag Drop events

As per spec https://html.spec.whatwg.org/multipage/dnd.html#concept-dnd-p The correct access restriction for most drag events after "dragstart" is the protected mode. which allows enumerating the types/kind of data in the drag store. DataTransferAccessPolicy::kImageWritable is no longer in use and is removed. Bug: 1345474 Change-Id: Ibcbe4f61f5846ba49b590d235324f2784370d005 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5341049 Reviewed-by: Evan Stade <estade@chromium.org> Reviewed-by: Dave Tapuska <dtapuska@chromium.org> Commit-Queue: Rakesh Goulikar <ragoulik@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1279266}
web-platform-tests · Mar 27, 2024 · ccd60d5 · ccd60d5
1 parent b313ed0
commit ccd60d5
Showing 1 changed file with 108 additions and 0 deletions.
diff --git a/html/editing/dnd/the-datatransfer-interface/dnd-datatransfer-setdragimage-manual.html b/html/editing/dnd/the-datatransfer-interface/dnd-datatransfer-setdragimage-manual.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <style>
+    div {
+      margin: 0em;
+      padding: 2em;
+    }
+
+    #source1,
+    #source2 {
+      color: blue;
+      border: 1px solid black;
+    }
+
+    #target {
+      border: 1px solid black;
+    }
+  </style>
+  <script>
+    function getSolidColorImageBase64(color) {
+      var canvas = document.createElement('canvas');
+      canvas.width = 256;
+      canvas.height = 256;
+      var ctx = canvas.getContext('2d');
+      ctx.fillStyle = color;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      return canvas.toDataURL();
+    }
+    function setDragImage(ev) {
+      var dragImage = document.createElement('img');
+      if (ev.type === 'dragstart') {
+        dragImage = document.getElementById('dragImage');
+      }
+      if (ev.type === 'dragover') {
+        // Red color image
+        dragImage.src = getSolidColorImageBase64('#FF0000');
+      }
+      if (ev.type === 'dragenter') {
+        // Green color image
+        dragImage.src = getSolidColorImageBase64('#00FF00');
+      }
+      if (ev.type === 'drop') {
+        // Yellow color image
+        dragImage.src = getSolidColorImageBase64('#FFFF00');
+      }
+      ev.dataTransfer.setDragImage(dragImage, 10, 10);
+    }
+
+    function dragstart_with_image_handler(ev) {
+      ev.dataTransfer.setData("text/plain", ev.target.id);
+      setDragImage(ev);
+    }
+
+    function dragstart_without_image_handler(ev) {
+      ev.dataTransfer.setData("text/plain", ev.target.id);
+    }
+
+    function dragover_handler(ev) {
+      setDragImage(ev);
+      ev.preventDefault();
+    }
+
+    function drag_enter(ev) {
+      setDragImage(ev);
+      ev.preventDefault();
+    }
+
+    function drop_handler(ev) {
+      setDragImage(ev);
+      ev.preventDefault();
+      var data = ev.dataTransfer.getData("text");
+      ev.target.appendChild(document.getElementById(data));
+    }
+  </script>
+</head>
+
+<body>
+  <div id="dragImageDiv">
+  </div>
+  <div>
+    <p id="source1" ondragstart="dragstart_with_image_handler(event);" draggable="true">
+      Select this element, drag it to the Drop Zone and drag image
+      should be visible. The drag image should be identical to the above image.
+      And the drag image should not change through out the drag and drop operation.
+    </p>
+  </div>
+  <div>
+    <p id="source2" ondragstart="dragstart_without_image_handler(event);" draggable="true">
+      Select this element, drag it to the Drop Zone and drag image
+      should not be visible.
+    </p>
+  </div>
+  <div id="target" ondragenter="drag_enter(event);" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
+    Drop Zone
+  </div>
+  <script>
+    var initialDragImage = document.createElement('img')
+    // Blue color image
+    initialDragImage.src = getSolidColorImageBase64('#0000FF')
+    initialDragImage.id = "dragImage"
+    var dragImageDiv = document.getElementById('dragImageDiv')
+    dragImageDiv.appendChild(initialDragImage);
+  </script>
+</body>
+
+</html>