- Revision
- 236384
- Author
- [email protected]
- Date
- 2018-09-22 01:13:52 -0700 (Sat, 22 Sep 2018)
Log Message
Cannot start a drag inside a shadow tree when an inclusive-ancestor of its shadow host is a draggable element
https://bugs.webkit.org/show_bug.cgi?id=136836
Reviewed by Wenson Hsieh.
Source/WebCore:
Fixed the bug by simply generalizing the existing code path existed for video / input type=color.
Tests: fast/shadow-dom/dragging-element-inside-shadow-tree.html
fast/shadow-dom/dragging-element-with-shadow-tree.html
* page/DragController.cpp:
(WebCore::DragController::startDrag):
LayoutTests:
Added regression tests for dragging a element with a shadow tree, which is fixed in this bug
as well as dragging an element inside a shadow tree, which was already functional but had no tests.
* TestExpectations:
* fast/shadow-dom/dragging-element-inside-shadow-tree-expected.txt: Added.
* fast/shadow-dom/dragging-element-inside-shadow-tree.html: Added.
* fast/shadow-dom/dragging-element-with-shadow-tree-expected.txt: Added.
* fast/shadow-dom/dragging-element-with-shadow-tree.html: Added.
* platform/ios/TestExpectations: Don't mark the entirety of fast/shadow-dom as PASS.
* platform/mac-wk1/TestExpectations:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (236383 => 236384)
--- trunk/LayoutTests/ChangeLog 2018-09-22 07:56:20 UTC (rev 236383)
+++ trunk/LayoutTests/ChangeLog 2018-09-22 08:13:52 UTC (rev 236384)
@@ -1,3 +1,21 @@
+2018-09-21 Ryosuke Niwa <[email protected]>
+
+ Cannot start a drag inside a shadow tree when an inclusive-ancestor of its shadow host is a draggable element
+ https://bugs.webkit.org/show_bug.cgi?id=136836
+
+ Reviewed by Wenson Hsieh.
+
+ Added regression tests for dragging a element with a shadow tree, which is fixed in this bug
+ as well as dragging an element inside a shadow tree, which was already functional but had no tests.
+
+ * TestExpectations:
+ * fast/shadow-dom/dragging-element-inside-shadow-tree-expected.txt: Added.
+ * fast/shadow-dom/dragging-element-inside-shadow-tree.html: Added.
+ * fast/shadow-dom/dragging-element-with-shadow-tree-expected.txt: Added.
+ * fast/shadow-dom/dragging-element-with-shadow-tree.html: Added.
+ * platform/ios/TestExpectations: Don't mark the entirety of fast/shadow-dom as PASS.
+ * platform/mac-wk1/TestExpectations:
+
2018-09-21 Devin Rousso <[email protected]>
Web Inspector: REGRESSION(r236336): computed CSSProperty doesn't have a value for _text
Modified: trunk/LayoutTests/TestExpectations (236383 => 236384)
--- trunk/LayoutTests/TestExpectations 2018-09-22 07:56:20 UTC (rev 236383)
+++ trunk/LayoutTests/TestExpectations 2018-09-22 08:13:52 UTC (rev 236384)
@@ -104,6 +104,8 @@
editing/pasteboard/drag-file-promises-to-editable-element-as-URLs.html [ Skip ]
editing/pasteboard/drag-file-promises-to-editable-element-as-attachment.html [ Skip ]
editing/pasteboard/file-input-files-access-promise.html [ Skip ]
+fast/shadow-dom/dragging-element-with-shadow-tree.html [ Skip ]
+fast/shadow-dom/dragging-element-inside-shadow-tree.html [ Skip ]
http/tests/security/clipboard/drag-drop-html-cross-origin-iframe-in-same-origin.html [ Skip ]
# Only iOS supports QuickLook
Added: trunk/LayoutTests/fast/shadow-dom/dragging-element-inside-shadow-tree-expected.txt (0 => 236384)
--- trunk/LayoutTests/fast/shadow-dom/dragging-element-inside-shadow-tree-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/shadow-dom/dragging-element-inside-shadow-tree-expected.txt 2018-09-22 08:13:52 UTC (rev 236384)
@@ -0,0 +1,8 @@
+This tests dragging an element inside a shadow tree. To manually test, drag and drop the blue box below into a green box.
+
+here
+dragstart event fired on target for: target
+dragenter event fired on destination for: destination
+drop event fired on destination for: destination
+dragend event fired on target for: target
+
Added: trunk/LayoutTests/fast/shadow-dom/dragging-element-inside-shadow-tree.html (0 => 236384)
--- trunk/LayoutTests/fast/shadow-dom/dragging-element-inside-shadow-tree.html (rev 0)
+++ trunk/LayoutTests/fast/shadow-dom/dragging-element-inside-shadow-tree.html 2018-09-22 08:13:52 UTC (rev 236384)
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<body>
+<p>This tests dragging an element inside a shadow tree. To manually test, drag and drop the blue box below into a green box.</p>
+<div id="target" class="box"></div>
+<div id="destination" class="box green">here</div>
+<pre id="log"></pre>
+<style>
+.box { margin: 10px 0; }
+.green { width: 100px; height: 100px; padding: 10px; border: solid 5px green; }
+</style>
+<script>
+
+target.addEventListener('dragstart', (event) => log.textContent += `dragstart event fired on target for: ${event.target.id}\n`);
+target.addEventListener('dragend', (event) => log.textContent += `dragend event fired on target for: ${event.target.id}\n`);
+destination.addEventListener('dragenter', (event) => log.textContent += `dragenter event fired on destination for: ${event.target.id}\n`);
+destination.addEventListener('dragover', (event) => {
+ event.dataTransfer.effectAllowed = "copyMove";
+ event.preventDefault();
+});
+destination.addEventListener('drop', (event) => log.textContent += `drop event fired on destination for: ${event.target.id}\n`);
+
+const shadowRoot = target.attachShadow({mode: 'closed'});
+shadowRoot.innerHTML = `
+<style>
+.box { width: 100px; height: 100px; padding: 10px; background: #36f; }
+</style>
+<div class="box" draggable="true">Drag this</div>`;
+
+if (window.eventSender) {
+ testRunner.dumpAsText();
+ eventSender.mouseMoveTo(target.offsetLeft + 10, target.offsetTop + 10);
+ eventSender.mouseDown();
+ eventSender.leapForward(300);
+ eventSender.mouseMoveTo(destination.offsetLeft + 10, destination.offsetTop + 10);
+ eventSender.mouseUp();
+}
+
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/fast/shadow-dom/dragging-element-with-shadow-tree-expected.txt (0 => 236384)
--- trunk/LayoutTests/fast/shadow-dom/dragging-element-with-shadow-tree-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/shadow-dom/dragging-element-with-shadow-tree-expected.txt 2018-09-22 08:13:52 UTC (rev 236384)
@@ -0,0 +1,9 @@
+This tests starting a drag inside a shadow tree when the shadow host is draggable.
+To manually test, drag and drop the blue box below into a green box.
+
+here
+dragstart event fired on target for: target
+dragenter event fired on destination for: destination
+drop event fired on destination for: destination
+dragend event fired on target for: target
+
Added: trunk/LayoutTests/fast/shadow-dom/dragging-element-with-shadow-tree.html (0 => 236384)
--- trunk/LayoutTests/fast/shadow-dom/dragging-element-with-shadow-tree.html (rev 0)
+++ trunk/LayoutTests/fast/shadow-dom/dragging-element-with-shadow-tree.html 2018-09-22 08:13:52 UTC (rev 236384)
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<body>
+<p>This tests starting a drag inside a shadow tree when the shadow host is draggable.<br>
+To manually test, drag and drop the blue box below into a green box.</p>
+<div id="target" class="box" draggable="true"></div>
+<div id="destination" class="box green">here</div>
+<pre id="log"></pre>
+<style>
+.box { margin: 10px 0; }
+.green { width: 100px; height: 100px; padding: 10px; border: solid 5px green; }
+</style>
+<script>
+
+target.addEventListener('dragstart', (event) => log.textContent += `dragstart event fired on target for: ${event.target.id}\n`);
+target.addEventListener('dragend', (event) => log.textContent += `dragend event fired on target for: ${event.target.id}\n`);
+destination.addEventListener('dragenter', (event) => log.textContent += `dragenter event fired on destination for: ${event.target.id}\n`);
+destination.addEventListener('dragover', (event) => {
+ event.dataTransfer.effectAllowed = "copyMove";
+ event.preventDefault();
+});
+destination.addEventListener('drop', (event) => log.textContent += `drop event fired on destination for: ${event.target.id}\n`);
+
+const shadowRoot = target.attachShadow({mode: 'closed'});
+shadowRoot.innerHTML = `
+<style>
+.box { width: 100px; height: 100px; padding: 10px; background: #36f; }
+</style>
+<div class="box">Drag this</div>`;
+
+if (window.eventSender) {
+ testRunner.dumpAsText();
+ eventSender.mouseMoveTo(target.offsetLeft + 10, target.offsetTop + 10);
+ eventSender.mouseDown();
+ eventSender.leapForward(300);
+ eventSender.mouseMoveTo(destination.offsetLeft + 10, destination.offsetTop + 10);
+ eventSender.mouseUp();
+}
+
+</script>
+</body>
+</html>
Modified: trunk/LayoutTests/platform/ios/TestExpectations (236383 => 236384)
--- trunk/LayoutTests/platform/ios/TestExpectations 2018-09-22 07:56:20 UTC (rev 236383)
+++ trunk/LayoutTests/platform/ios/TestExpectations 2018-09-22 08:13:52 UTC (rev 236384)
@@ -778,8 +778,6 @@
editing/inserting/smart-link-when-caret-is-moved-before-URL.html [ Skip ]
editing/inserting/smart-quote-with-all-configurations.html [ Skip ]
-webkit.org/b/148695 fast/shadow-dom [ Pass ]
-
# No tab navigation support on iOS
fast/shadow-dom/focus-on-iframe.html [ Failure ]
webkit.org/b/116046 fast/events/sequential-focus-navigation-starting-point.html [ Skip ]
Modified: trunk/LayoutTests/platform/mac-wk1/TestExpectations (236383 => 236384)
--- trunk/LayoutTests/platform/mac-wk1/TestExpectations 2018-09-22 07:56:20 UTC (rev 236383)
+++ trunk/LayoutTests/platform/mac-wk1/TestExpectations 2018-09-22 08:13:52 UTC (rev 236384)
@@ -24,6 +24,8 @@
editing/pasteboard/drag-file-promises-to-editable-element-as-URLs.html [ Pass ]
editing/pasteboard/drag-file-promises-to-editable-element-as-attachment.html [ Pass ]
editing/pasteboard/file-input-files-access-promise.html [ Pass ]
+fast/shadow-dom/dragging-element-with-shadow-tree.html [ Pass ]
+fast/shadow-dom/dragging-element-inside-shadow-tree.html [ Pass ]
http/tests/security/clipboard/drag-drop-html-cross-origin-iframe-in-same-origin.html [ Pass ]
#//////////////////////////////////////////////////////////////////////////////////////////
Modified: trunk/Source/WebCore/ChangeLog (236383 => 236384)
--- trunk/Source/WebCore/ChangeLog 2018-09-22 07:56:20 UTC (rev 236383)
+++ trunk/Source/WebCore/ChangeLog 2018-09-22 08:13:52 UTC (rev 236384)
@@ -1,3 +1,18 @@
+2018-09-21 Ryosuke Niwa <[email protected]>
+
+ Cannot start a drag inside a shadow tree when an inclusive-ancestor of its shadow host is a draggable element
+ https://bugs.webkit.org/show_bug.cgi?id=136836
+
+ Reviewed by Wenson Hsieh.
+
+ Fixed the bug by simply generalizing the existing code path existed for video / input type=color.
+
+ Tests: fast/shadow-dom/dragging-element-inside-shadow-tree.html
+ fast/shadow-dom/dragging-element-with-shadow-tree.html
+
+ * page/DragController.cpp:
+ (WebCore::DragController::startDrag):
+
2018-09-22 Chris Dumez <[email protected]>
FontDataCache should use Ref<Font> instead of a RefPtr<Font>
Modified: trunk/Source/WebCore/page/DragController.cpp (236383 => 236384)
--- trunk/Source/WebCore/page/DragController.cpp 2018-09-22 07:56:20 UTC (rev 236383)
+++ trunk/Source/WebCore/page/DragController.cpp 2018-09-22 08:13:52 UTC (rev 236384)
@@ -905,21 +905,7 @@
Ref<Frame> protector(src);
HitTestResult hitTestResult = src.eventHandler().hitTestResultAtPoint(dragOrigin, HitTestRequest::ReadOnly | HitTestRequest::Active);
- // FIXME(136836): Investigate whether all elements should use the containsIncludingShadowDOM() path here.
- bool includeShadowDOM = false;
-#if ENABLE(VIDEO)
- includeShadowDOM = state.source->isMediaElement();
-#endif
-#if ENABLE(INPUT_TYPE_COLOR)
- bool isColorControl = is<HTMLInputElement>(state.source) && downcast<HTMLInputElement>(*state.source).isColorControl();
- includeShadowDOM = includeShadowDOM || isColorControl;
-#endif
- bool sourceContainsHitNode;
- if (!includeShadowDOM)
- sourceContainsHitNode = state.source->contains(hitTestResult.innerNode());
- else
- sourceContainsHitNode = state.source->containsIncludingShadowDOM(hitTestResult.innerNode());
-
+ bool sourceContainsHitNode = state.source->containsIncludingShadowDOM(hitTestResult.innerNode());
if (!sourceContainsHitNode) {
// The original node being dragged isn't under the drag origin anymore... maybe it was
// hidden or moved out from under the cursor. Regardless, we don't want to start a drag on
@@ -1178,6 +1164,7 @@
#endif
#if ENABLE(INPUT_TYPE_COLOR)
+ bool isColorControl = is<HTMLInputElement>(state.source) && downcast<HTMLInputElement>(*state.source).isColorControl();
if (isColorControl && m_dragSourceAction & DragSourceActionColor) {
auto& input = downcast<HTMLInputElement>(*state.source);
auto color = input.valueAsColor();
