diff options
Diffstat (limited to 'testing/web-platform/tests/html/editing/dnd/events/037-spec.xhtml')
-rw-r--r-- | testing/web-platform/tests/html/editing/dnd/events/037-spec.xhtml | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/editing/dnd/events/037-spec.xhtml b/testing/web-platform/tests/html/editing/dnd/events/037-spec.xhtml new file mode 100644 index 0000000000..c4c76fe806 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/events/037-spec.xhtml @@ -0,0 +1,88 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Drag and drop without cancelling dragenter and without body (spec compliant)</title> + <style type="text/css"> +head + div { + height: 100px; + width: 100px; + background: orange; + display: inline-block; +} +head + div + div { + height: 100px; + width: 100px; + margin-left: 100px; + background: blue; + display: inline-block; +} + </style> + <script type="text/javascript"><![CDATA[ +//Drag passes from orange to root element. Dragenter fires at root element. +//Dragenter is not cancelled. Body does not exist. Dragenter fires at document. +//Spec says the body (which does not exist) becomes current target element => null. +//Drag passes from root element to blue. Dragenter fires at blue. +//Dragenter is not cancelled. Body does not exist. Current target element is null. +//Dragenter fires at document. Current target is set to null again. +//Drag passes from blue to root element. Dragenter fires at root element. +//Dragenter is not cancelled. Body does not exist. Current target element is null. +//Dragenter is not cancelled. Body does not exist. Dragenter fires at document. +//Current target is set to null. Yet again. +//Drag passes from root element to orange. Dragenter fires at orange, and is cancelled. +window.onload = function () { + var orange = document.getElementsByTagName('div')[0], sequence = []; + orange.ondragstart = function (e) { + e.dataTransfer.setData('text','hello'); + e.dataTransfer.effectAllowed = 'copy'; + }; + orange.ondragenter = orange.ondrop = function (e) { + sequence[sequence.length] = 'orange.'+e.type; + e.preventDefault(); + }; + orange.ondragleave = function (e) { + sequence[sequence.length] = 'orange.dragleave'; + }; + orange.ondragover = function (e) { + if( sequence[sequence.length-1] != 'orange.dragover' ) { + sequence[sequence.length] = 'orange.dragover'; + } + e.preventDefault(); + }; + var blue = document.getElementsByTagName('div')[1]; + blue.ondragenter = blue.ondragover = blue.ondragleave = function (e) { + sequence[sequence.length] = 'blue.'+e.type; + }; + document.documentElement.ondragenter = document.documentElement.ondragleave = function (e) { + if( e.target != this ) { return; } + sequence[sequence.length] = 'html.'+e.type; + }; + document.documentElement.ondragover = function (e) { + if( e.target != this ) { return; } + if( sequence[sequence.length-1] != 'html.dragover' ) { + sequence[sequence.length] = 'html.dragover'; + } + }; + document.ondragenter = document.ondragleave = document.ondragover = document.ondragleave = function (e) { + if( e.target != this ) { return; } + sequence[sequence.length] = 'document.'+e.type; + }; + orange.ondragend = function (e) { + sequence = sequence.join('=>') + var desiredsequence = (['orange.dragenter','orange.dragover','html.dragenter','document.dragenter','orange.dragleave','blue.dragenter','document.dragenter','document.dragenter','orange.dragenter','orange.dragover','orange.drop']).join('=>') + if( sequence == desiredsequence ) { + document.getElementsByTagName('div')[2].textContent = 'PASS'; + } else { + document.getElementsByTagName('div')[2].textContent = 'FAIL, got: '+sequence+' instead of: '+desiredsequence; + } + }; +}; + ]]></script> + </head> + <!--body--> + + <div draggable="true"></div><div></div> + <div> </div> + <p>Drag the orange square onto the blue square, then back to the orange square, and release it.</p> + <noscript><p>Enable JavaScript and reload</p></noscript> + + <!--/body--> +</html> |