summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/editing/dnd/interactiveelements
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/editing/dnd/interactiveelements')
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/001.html29
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/002.html29
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/003.html29
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/004.html29
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/005.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/006.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/007.html36
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/008.html36
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/009.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/010.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/011.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/012.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/015.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/016.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/017.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/018.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/019.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/020.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/021.html25
-rw-r--r--testing/web-platform/tests/html/editing/dnd/interactiveelements/022.html25
20 files changed, 538 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/001.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/001.html
new file mode 100644
index 000000000..33c6518e0
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/001.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Select input inside draggable element</title>
+ <style type="text/css">
+select { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p>
+ <div draggable="true">
+ <select>
+ <option>Option 1</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ </select>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/002.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/002.html
new file mode 100644
index 000000000..8734a3e3a
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/002.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Select multiple input inside draggable element</title>
+ <style type="text/css">
+select { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p>
+ <div draggable="true">
+ <select multiple size="3">
+ <option>Option 1</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ </select>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/003.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/003.html
new file mode 100644
index 000000000..3399c2f02
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/003.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Draggable select</title>
+ <style type="text/css">
+select { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('select')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p>
+ <div>
+ <select draggable="true">
+ <option>Option 1</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ </select>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/004.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/004.html
new file mode 100644
index 000000000..5f58b207a
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/004.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Draggable select multiple</title>
+ <style type="text/css">
+select { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('select')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p>
+ <div>
+ <select multiple size="3" draggable="true">
+ <option>Option 1</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ </select>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/005.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/005.html
new file mode 100644
index 000000000..6647375c6
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/005.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Text input inside draggable element</title>
+ <style type="text/css">
+input { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should focus the dummy text. Use your mouse to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
+ <div draggable="true">
+ <input value="Dummy text">
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/006.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/006.html
new file mode 100644
index 000000000..0ca353212
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/006.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Draggable text input</title>
+ <style type="text/css">
+input { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('input')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should focus the dummy text. Use your mouse to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
+ <div>
+ <input value="Dummy text" draggable="true">
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/007.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/007.html
new file mode 100644
index 000000000..6bcdc80e9
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/007.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Textarea inside draggable element</title>
+ <style type="text/css">
+textarea { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It may optionally focus the dummy text. Use your mouse to select part of the dummy text, moving the mouse vertically and horizontally. It should select the text. Try to drag the input's scrollbar thumb. It should <strong>not</strong> drag the block or text in any case.</p>
+ <div draggable="true">
+<textarea rows="5" cols="50" wrap="off">Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/008.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/008.html
new file mode 100644
index 000000000..7cb97518f
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/008.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Draggable textarea</title>
+ <style type="text/css">
+textarea { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('textarea')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It may optionally focus the dummy text. Use your mouse to select part of the dummy text, moving the mouse vertically and horizontally. It should select the text. Try to drag the input's scrollbar thumb. It should <strong>not</strong> drag the block or text in any case.</p>
+ <div>
+<textarea rows="5" cols="50" wrap="off">Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+Dummy text
+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/009.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/009.html
new file mode 100644
index 000000000..6c240c06f
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/009.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Input button inside draggable element</title>
+ <style type="text/css">
+input { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p>
+ <div draggable="true">
+ <input type="button" value="Dummy text">
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/010.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/010.html
new file mode 100644
index 000000000..2253e8bae
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/010.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Draggable input button</title>
+ <style type="text/css">
+input { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('input')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p>
+ <div>
+ <input type="button" value="Dummy text" draggable="true">
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/011.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/011.html
new file mode 100644
index 000000000..e90cfc349
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/011.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Button inside draggable element</title>
+ <style type="text/css">
+button { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p>
+ <div draggable="true">
+ <button>Dummy text</button>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/012.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/012.html
new file mode 100644
index 000000000..15659cdc9
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/012.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Draggable button</title>
+ <style type="text/css">
+button { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('button')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p>
+ <div>
+ <button draggable="true">Dummy text</button>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/015.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/015.html
new file mode 100644
index 000000000..a2c66a145
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/015.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Contenteditable inside draggable element</title>
+ <style type="text/css">
+div div { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the text or the orange block. Use your mouse to select the dummy text. It should <strong>not</strong> drag the text or the orange block.</p>
+ <div draggable="true">
+ <div contenteditable="true">Dummy text</div>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/016.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/016.html
new file mode 100644
index 000000000..b9bc169e4
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/016.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Draggable contenteditable element</title>
+ <style type="text/css">
+div div { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[1].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the text or the orange block. Use your mouse to select the dummy text. It should <strong>not</strong> drag the text or the orange block.</p>
+ <div>
+ <div draggable="true" contenteditable="true">Dummy text</div>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/017.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/017.html
new file mode 100644
index 000000000..8de64c08b
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/017.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Scrollable element inside draggable element</title>
+ <style type="text/css">
+div div { width: 300px; height: 100px; overflow: auto; border: 1px solid orange; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>It should be possible to drag the scrollbar thumbs of the box below without dragging the whole box.</p>
+ <div draggable="true">
+ <div>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/018.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/018.html
new file mode 100644
index 000000000..67d8ad0f8
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/018.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Draggable scrollable element</title>
+ <style type="text/css">
+div div { width: 300px; height: 100px; overflow: auto; border: 1px solid orange; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[1].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>It should be possible to drag the scrollbar thumbs of the box below without dragging the whole box.</p>
+ <div>
+ <div draggable="true">Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/019.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/019.html
new file mode 100644
index 000000000..77e6e813c
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/019.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Disabled text input with inside draggable element</title>
+ <style type="text/css">
+input { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
+ <div draggable="true">
+ <input value="Dummy text" disabled>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/020.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/020.html
new file mode 100644
index 000000000..2bad55312
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/020.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Disabled draggable text input</title>
+ <style type="text/css">
+input { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('input')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
+ <div>
+ <input value="Dummy text" draggable="true" disabled>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/021.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/021.html
new file mode 100644
index 000000000..954c59509
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/021.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Readonly text input with inside draggable element</title>
+ <style type="text/css">
+input { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('div')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
+ <div draggable="true">
+ <input value="Dummy text" readonly>
+ </div>
+
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/022.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/022.html
new file mode 100644
index 000000000..fb1d796ba
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/dnd/interactiveelements/022.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Readonly draggable text input</title>
+ <style type="text/css">
+input { border: 1px solid orange; border-top-width: 20px; }
+ </style>
+ <script type="text/javascript">
+window.onload = function () {
+ document.getElementsByTagName('input')[0].ondragstart = function (e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('Text', 'dummy text');
+ };
+};
+ </script>
+ </head>
+ <body>
+
+ <p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
+ <div>
+ <input value="Dummy text" draggable="true" readonly>
+ </div>
+
+ </body>
+</html> \ No newline at end of file