commit ebc06b39579abd863a5c84592e6e690723f2941b parent b21f0d44c8ef13a14cdb035e73ab650c1cd55ab0 Author: Edgar Chen <echen@mozilla.com> Date: Mon, 17 Nov 2025 14:47:05 +0000 Bug 1998950 - Part 2: Modify dnd wpts under html/editing/dnd/interactiveelements/ to use WebDriver; r=smaug,masayuki The spec doesn’t mention that interactive elements are not draggable. However, the description in the test states that they are not draggable, so I followed the description for the expected result. Differential Revision: https://phabricator.services.mozilla.com/D271781 Diffstat:
29 files changed, 1212 insertions(+), 194 deletions(-)
diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/contenteditable_inside_draggable_element.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/contenteditable_inside_draggable_element.html.ini @@ -0,0 +1,8 @@ +[contenteditable_inside_draggable_element.html] + [Contenteditable inside draggable element should not be draggable from border] + expected: + if os == "android": PASS + FAIL + + [Contenteditable inside draggable element should not be draggable while selecting text] + expected: FAIL diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/disabled_input_text_inside_draggable_element.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/disabled_input_text_inside_draggable_element.html.ini @@ -0,0 +1,7 @@ +[disabled_input_text_inside_draggable_element.html] + expected: TIMEOUT + [Disabled text input with inside draggable element should not be draggable from border] + expected: TIMEOUT + + [Disabled text input with inside draggable element should not be draggable while attempting to select text] + expected: NOTRUN diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/draggable_disabled_input_text.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/draggable_disabled_input_text.html.ini @@ -0,0 +1,7 @@ +[draggable_disabled_input_text.html] + expected: TIMEOUT + [Disabled draggable text input should not be draggable from border] + expected: TIMEOUT + + [Disabled draggable text input should not be draggable while attempting to select text] + expected: NOTRUN diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/draggable_input_text.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/draggable_input_text.html.ini @@ -0,0 +1,3 @@ +[draggable_input_text.html] + [Draggable input text should not be draggable while attempting to select text] + expected: FAIL diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/draggable_readonly_input_text.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/draggable_readonly_input_text.html.ini @@ -0,0 +1,3 @@ +[draggable_readonly_input_text.html] + [Readonly draggable input text should not be draggable while attempting to select text] + expected: FAIL diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/draggable_select.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/draggable_select.html.ini @@ -0,0 +1,6 @@ +[draggable_select.html] + expected: + if os == "linux": TIMEOUT + [Draggable select should not be draggable from select body] + expected: + if os == "linux": TIMEOUT diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/draggable_textarea.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/draggable_textarea.html.ini @@ -0,0 +1,3 @@ +[draggable_textarea.html] + [Draggable textarea should not be draggable while attempting to select text] + expected: FAIL diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/input_text_inside_draggable_element.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/input_text_inside_draggable_element.html.ini @@ -0,0 +1,3 @@ +[input_text_inside_draggable_element.html] + [Draggable input text should not be draggable while attempting to select text] + expected: FAIL diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/readonly_input_text_inside_draggable_element.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/readonly_input_text_inside_draggable_element.html.ini @@ -0,0 +1,3 @@ +[readonly_input_text_inside_draggable_element.html] + [Readonly input text inside draggable element should not be draggable while attempting to select text] + expected: FAIL diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/select_inside_draggable_element.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/select_inside_draggable_element.html.ini @@ -0,0 +1,6 @@ +[select_inside_draggable_element.html] + expected: + if os == "linux": TIMEOUT + [Select input inside draggable element should not be draggable from select body] + expected: + if os == "linux": TIMEOUT diff --git a/testing/web-platform/meta/html/editing/dnd/interactiveelements/textarea_inside_draggable_element.html.ini b/testing/web-platform/meta/html/editing/dnd/interactiveelements/textarea_inside_draggable_element.html.ini @@ -0,0 +1,3 @@ +[textarea_inside_draggable_element.html] + [Textarea inside draggable element should not be draggable while attempting to select text] + expected: FAIL diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/button_inside_draggable_element.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/button_inside_draggable_element.html @@ -2,24 +2,55 @@ <html> <head> <title>Button inside draggable element</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -button { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 draggable="true" id="element"> + <button id="inner">Dummy text</button> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the button. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Button inside draggable element should not be draggable from border"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/contenteditable_inside_draggable_element.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/contenteditable_inside_draggable_element.html @@ -2,24 +2,84 @@ <html> <head> <title>Contenteditable inside draggable element</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -div div { border: 1px solid orange; border-top-width: 20px; } +#inner { 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> + <p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the text or the button. Use your mouse to select the dummy text. It should <strong>not</strong> drag the text or the orange block.</p> + <div draggable="true" id="element"> + <div contenteditable="true" id="inner">Dummy text</div> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the contenteditable element. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Contenteditable inside draggable element should not be draggable from border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerW = inner.getBoundingClientRect().width / 2; + new test_driver.Actions() + // Move pointer to the start of the text. + .pointerMove(5 - centerW, 10, { origin: inner }) + .pointerDown() + // Move pointer to the center of the contenteditable body. + .pointerMove(0, 10, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Contenteditable inside draggable element should not be draggable while selecting text"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/disabled_input_text_inside_draggable_element.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/disabled_input_text_inside_draggable_element.html @@ -2,24 +2,84 @@ <html> <head> <title>Disabled text input with inside draggable element</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -input { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 draggable="true" id="element"> + <input value="Dummy text" id="inner" disabled> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Disabled text input with inside draggable element should not be draggable from border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerW = inner.getBoundingClientRect().width / 2; + new test_driver.Actions() + // Move pointer to the start of the text. + .pointerMove(5 - centerW, 10, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input body. + .pointerMove(0, 10, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Disabled text input with inside draggable element should not be draggable while attempting to select text"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_button.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_button.html @@ -2,24 +2,55 @@ <html> <head> <title>Draggable button</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -button { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 id="element"> + <button draggable="true" id="inner">Dummy text</button> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(function(t) { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the button. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable button should not be draggable from border"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_contenteditable.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_contenteditable.html @@ -2,24 +2,84 @@ <html> <head> <title>Draggable contenteditable element</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -div div { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 id="element"> + <div draggable="true" contenteditable="true" id="inner">Dummy text</div> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the contenteditable element. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable contenteditable element should not be draggable from border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerW = inner.getBoundingClientRect().width / 2; + new test_driver.Actions() + // Move pointer to the start of the text. + .pointerMove(5 - centerW, 10, { origin: inner }) + .pointerDown() + // Move pointer to the center of the contenteditable body. + .pointerMove(0, 10, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable contenteditable element should not be draggable while selecting text"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_disabled_input_text.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_disabled_input_text.html @@ -2,24 +2,84 @@ <html> <head> <title>Disabled draggable text input</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -input { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 id="element"> + <input value="Dummy text" draggable="true" id="inner" disabled> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Disabled draggable text input should not be draggable from border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerW = inner.getBoundingClientRect().width / 2; + new test_driver.Actions() + // Move pointer to the start of the text. + .pointerMove(5 - centerW, 10, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input body. + .pointerMove(0, 10, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Disabled draggable text input should not be draggable while attempting to select text"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_input_button.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_input_button.html @@ -2,24 +2,55 @@ <html> <head> <title>Draggable input button</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -input { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 id="element"> + <input type="button" value="Dummy text" draggable="true" id="inner"> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the button. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable input button should not be draggable from border"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_input_text.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_input_text.html @@ -2,24 +2,84 @@ <html> <head> <title>Draggable text input</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -input { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 id="element"> + <input value="Dummy text" draggable="true" id="inner"> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable input text should not be draggable from border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerW = inner.getBoundingClientRect().width / 2; + new test_driver.Actions() + // Move pointer to the start of the text. + .pointerMove(5 - centerW, 10, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input body. + .pointerMove(0, 10, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable input text should not be draggable while attempting to select text"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_readonly_input_text.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_readonly_input_text.html @@ -2,24 +2,84 @@ <html> <head> <title>Readonly draggable text input</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -input { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 id="element"> + <input value="Dummy text" draggable="true" id="inner" readonly> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Readonly draggable input text should not be draggable from border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerW = inner.getBoundingClientRect().width / 2; + new test_driver.Actions() + // Move pointer to the start of the text. + .pointerMove(5 - centerW, 10, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input body. + .pointerMove(0, 10, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Readonly draggable input text should not be draggable while attempting to select text"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_select.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_select.html @@ -2,8 +2,13 @@ <html> <head> <title>Draggable select</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -select { border: 1px solid orange; border-top-width: 20px; } +#inner { border: 1px solid orange; border-top-width: 20px; } </style> <script type="text/javascript"> window.onload = function () { @@ -17,13 +22,92 @@ window.onload = function () { <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"> + <div id="element"> + <select draggable="true" id="inner"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => { + element.removeEventListener("dragstart", dragStartListener); + // Click on center to dismiss the dropdown. + new test_driver.Actions() + .pointerMove(0, 0, { origin: document.body }) + .pointerDown() + .pointerUp() + .send(); + }); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the select. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable select should not be draggable from border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => { + element.removeEventListener("dragstart", dragStartListener); + // Click on center to dismiss the dropdown. + new test_driver.Actions() + .pointerMove(0, 0, { origin: document.body }) + .pointerDown() + .pointerUp() + .send(); + }); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the select body. + .pointerMove(0, 10, { origin: inner }) + .pointerDown() + // Move pointer out of the select. + .pointerMove(0, centerH, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable select should not be draggable from select body"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_select_multiple.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_select_multiple.html @@ -2,28 +2,67 @@ <html> <head> <title>Draggable select multiple</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -select { border: 1px solid orange; border-top-width: 20px; } +#inner { 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"> + <div id="element"> + <select multiple size="3" draggable="true" id="inner"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => { + element.removeEventListener("dragstart", dragStartListener); + // Click on center to dismiss the dropdown. + new test_driver.Actions() + .pointerMove(0, 0, { origin: document.body }) + .pointerDown() + .pointerUp() + .send(); + }); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the select. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable select multiple input should not be draggable from border"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_textarea.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/draggable_textarea.html @@ -2,23 +2,20 @@ <html> <head> <title>Draggable textarea</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -textarea { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 + <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.</p> + <div id="element"> +<textarea rows="5" cols="50" wrap="off" draggable="true" id="inner">Dummy text Dummy text Dummy text Dummy text @@ -32,5 +29,70 @@ Dummy text xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the textarea. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable textarea should not be draggable from border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const rect = inner.getBoundingClientRect(); + const centerW = rect.width / 2; + const centerH = rect.height / 2; + new test_driver.Actions() + // Move pointer to the start of the first line text. + .pointerMove(5 - centerW, 25 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the textarea. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable textarea should not be draggable while attempting to select text"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/input_button_inside_draggable_element.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/input_button_inside_draggable_element.html @@ -2,24 +2,55 @@ <html> <head> <title>Input button inside draggable element</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -input { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 draggable="true" id="element"> + <input type="button" value="Dummy text" id="inner"> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the button. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Input button inside draggable element should not be draggable from border"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/input_text_inside_draggable_element.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/input_text_inside_draggable_element.html @@ -2,24 +2,84 @@ <html> <head> <title>Text input inside draggable element</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -input { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 draggable="true" id="element"> + <input value="Dummy text" id="inner"> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the start of the text. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Input text inside draggable element should not be draggable border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerW = inner.getBoundingClientRect().width / 2; + new test_driver.Actions() + // Move pointer to the start of the text. + .pointerMove(5 - centerW, 10, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input body. + .pointerMove(0, 10, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Draggable input text should not be draggable while attempting to select text"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/readonly_input_text_inside_draggable_element.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/readonly_input_text_inside_draggable_element.html @@ -1,25 +1,85 @@ <!doctype html> <html> <head> - <title>Readonly text input with inside draggable element</title> + <title>Readonly text input inside draggable element</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -input { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 draggable="true" id="element"> + <input value="Dummy text" id="inner" readonly> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Readonly input text inside draggable element should not be draggable"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerW = inner.getBoundingClientRect().width / 2; + new test_driver.Actions() + // Move pointer to the start of the text. + .pointerMove(5 - centerW, 10, { origin: inner }) + .pointerDown() + // Move pointer to the center of the input body. + .pointerMove(0, 10, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Readonly input text inside draggable element should not be draggable while attempting to select text"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/select_inside_draggable_element.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/select_inside_draggable_element.html @@ -2,28 +2,104 @@ <html> <head> <title>Select input inside draggable element</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -select { border: 1px solid orange; border-top-width: 20px; } +#inner { 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> + <div draggable="true" id="element"> + <select id="inner"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => { + element.removeEventListener("dragstart", dragStartListener); + // Click on center to dismiss the dropdown. + new test_driver.Actions() + .pointerMove(0, 0, { origin: document.body }) + .pointerDown() + .pointerUp() + .send(); + }); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the select. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Select input inside draggable element should not be draggable from border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => { + element.removeEventListener("dragstart", dragStartListener); + // Click on center to dismiss the dropdown. + new test_driver.Actions() + .pointerMove(0, 0, { origin: document.body }) + .pointerDown() + .pointerUp() + .send(); + }); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the select body. + .pointerMove(0, 10, { origin: inner }) + .pointerDown() + // Move pointer out of the select. + .pointerMove(0, centerH, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Select input inside draggable element should not be draggable from select body"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/select_multiple_inside_draggable_element.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/select_multiple_inside_draggable_element.html @@ -2,28 +2,67 @@ <html> <head> <title>Select multiple input inside draggable element</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -select { border: 1px solid orange; border-top-width: 20px; } +#inner { 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"> + <div draggable="true" id="element"> + <select multiple size="3" id="inner"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => { + element.removeEventListener("dragstart", dragStartListener); + // Click on center to dismiss the dropdown. + new test_driver.Actions() + .pointerMove(0, 0, { origin: document.body }) + .pointerDown() + .pointerUp() + .send(); + }); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the select. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Select multiple input inside draggable element should not be draggable from border"); + </script> + </body> </html> diff --git a/testing/web-platform/tests/html/editing/dnd/interactiveelements/textarea_inside_draggable_element.html b/testing/web-platform/tests/html/editing/dnd/interactiveelements/textarea_inside_draggable_element.html @@ -2,23 +2,20 @@ <html> <head> <title>Textarea inside draggable element</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> <style type="text/css"> -textarea { border: 1px solid orange; border-top-width: 20px; } +#inner { 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 + <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.</p> + <div draggable="true" id="element"> +<textarea rows="5" cols="50" wrap="off" id="inner">Dummy text Dummy text Dummy text Dummy text @@ -32,5 +29,70 @@ Dummy text xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea> </div> + <script> + const element = document.getElementById("element"); + const inner = document.getElementById("inner"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const centerH = inner.getBoundingClientRect().height / 2; + new test_driver.Actions() + // Move pointer to the center of the top-border. + .pointerMove(0, 10 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the textarea. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Textarea inside draggable element should not be draggable from border"); + + promise_test(t => { + return new Promise((resolve, reject) => { + let didReceiveDragStart = false; + + const dragStartListener = ev => { + ev.preventDefault(); + didReceiveDragStart = true; + }; + element.addEventListener("dragstart", dragStartListener, { once: true }); + t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); + + element.addEventListener("mouseup", () => { + resolve(didReceiveDragStart); + }, { once: true }); + + const rect = inner.getBoundingClientRect(); + const centerW = rect.width / 2; + const centerH = rect.height / 2; + new test_driver.Actions() + // Move pointer to the start of the first line text. + .pointerMove(5 - centerW, 25 - centerH, { origin: inner }) + .pointerDown() + // Move pointer to the center of the textarea. + .pointerMove(0, 0, { origin: inner }) + .pointerUp() + .send(); + }).then(didReceiveDragStart => { + assert_false(didReceiveDragStart, "dragstart should not fire"); + }); + }, "Textarea inside draggable element should not be draggable while attempting to select text"); + </script> + </body> </html>