forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Reorganize dnd X-doc test to fit with conventions.
- Loading branch information
1 parent
c300086
commit 4fbb645
Showing
3 changed files
with
211 additions
and
209 deletions.
There are no files selected for viewing
206 changes: 206 additions & 0 deletions
206
html/editing/dnd/events/events-cross-document-suite-HELPER-1.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,206 @@ | ||
| <!DOCTYPE html> | ||
| <title>drag & drop - event sequence for cross-document drag</title> | ||
| <style type="text/css"> | ||
| /* use margins instead of padding to make sure the body begins at the top of the page */ | ||
| html, body { | ||
| margin: 0; | ||
| } | ||
| body { | ||
| padding: 116px 8px 8px; | ||
| } | ||
| #testhere div { | ||
| height: 100px; | ||
| width: 100px; | ||
| position: absolute; | ||
| top: 8px; | ||
| } | ||
| #orange { | ||
| background-color: orange; | ||
| left: 8px; | ||
| } | ||
| #fuchsia { | ||
| background-color: fuchsia; | ||
| left: 158px; | ||
| } | ||
| </style> | ||
| <link rel=stylesheet href=/resources/testharness.css> | ||
|
|
||
| <script> | ||
| parent.setup(function () {},{explicit_done:true,explicit_timeout:true}); | ||
| window.onload = function () { | ||
| var orange = document.querySelector('#orange') | ||
| var fuchsia = document.querySelector('#fuchsia') | ||
| var body = document.body; | ||
|
|
||
| orange.ondragstart = function (e) { | ||
| parent.events.push('doc1.orange.ondragstart'); | ||
| e.dataTransfer.effectAllowed = 'all'; | ||
| e.dataTransfer.setData('Text', 'foo'); | ||
| }; | ||
| orange.ondrag = function () { parent.events.push('doc1.orange.ondrag'); }; | ||
| orange.ondragenter = function () { parent.events.push('doc1.orange.ondragenter'); }; | ||
| orange.ondragover = function () { parent.events.push('doc1.orange.ondragover'); }; | ||
| orange.ondrop = function () { parent.events.push('doc1.orange.ondrop'); return false; }; | ||
| orange.ondragend = function () { parent.events.push('doc1.orange.ondragend'); setTimeout(finish,100); }; | ||
| orange.onmousedown = function () { parent.events.push('doc1.orange.onmousedown'); }; | ||
| orange.onmouseup = function () { parent.events.push('doc1.orange.onmouseup'); }; | ||
|
|
||
| /* Events for the fuchsia box */ | ||
| fuchsia.ondragstart = function () { parent.events.push('doc1.pink.ondragstart'); }; | ||
| fuchsia.ondrag = function () { parent.events.push('doc1.pink.ondrag'); }; | ||
| fuchsia.ondragenter = function () { parent.events.push('doc1.pink.ondragenter'); }; | ||
| fuchsia.ondragover = function () { parent.events.push('doc1.pink.ondragover'); }; | ||
| fuchsia.ondrop = function () { parent.events.push('doc1.pink.ondrop'); return false; }; | ||
| fuchsia.ondragend = function () { parent.events.push('doc1.pink.ondragend'); }; | ||
| fuchsia.onmousedown = function () { parent.events.push('doc1.pink.onmousedown'); }; | ||
| fuchsia.onmouseup = function () { parent.events.push('doc1.pink.onmouseup'); }; | ||
|
|
||
| /* Events for the page body */ | ||
| body.ondragstart = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragstart': 'doc1.bubble.ondragstart' ); }; | ||
| body.ondrag = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondrag': 'doc1.bubble.ondrag' ); }; | ||
| body.ondragenter = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragenter': 'doc1.bubble.ondragenter' ); }; | ||
| body.ondragover = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragover': 'doc1.bubble.ondragover' ); }; | ||
| body.ondrop = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondrop': 'doc1.bubble.ondrop' ); }; | ||
| body.ondragend = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragend': 'doc1.bubble.ondragend' ); }; | ||
| body.onmousedown = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.onmousedown': 'doc1.bubble.onmousedown' ); }; | ||
| body.onmouseup = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.onmouseup': 'doc1.bubble.onmouseup' ); }; | ||
|
|
||
| function finish(e) { | ||
| var i, evindex; | ||
| var events = parent.events.join('-'); | ||
| /* | ||
| Normalise; reduce repeating event sequences to only 2 occurrences. | ||
| This makes the final event sequence predictable, no matter how many times the drag->dragover sequences repeat. | ||
| Two occurrances are kept in each case to allow testing to make sure the sequence really is repeating. | ||
| */ | ||
| //spec compliant - div dragenter is not cancelled, so body dragenter fires and body becomes current target | ||
| //repeats while drag is over orange or fuchsia or the body | ||
| events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.body\.ondragover){3,}/g,'$1$1'); | ||
| events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.body\.ondragover){3,}/g,'$1$1'); | ||
| //repeats while dragging over yellow | ||
| events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.yellow\.ondragover-doc2\.bubble\.ondragover){3,}/g,'$1$1'); | ||
| //repeats while dragging over blue | ||
| events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.blue\.ondragover-doc2\.bubble\.ondragover){3,}/g,'$1$1'); | ||
| //non-spec-compliant repeats while dragging over orange | ||
| events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.orange\.ondragover-doc1\.bubble\.ondragover){3,}/g,'$1$1'); | ||
| //non-spec-compliant repeats while dragging over fuchsia | ||
| events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.pink\.ondragover-doc1\.bubble\.ondragover){3,}/g,'$1$1'); | ||
| events = events.split(/-/g); | ||
|
|
||
| parent.test(function () { | ||
| parent.assert_array_equals(events, | ||
|
|
||
| ['doc1.orange.onmousedown', //mouse down | ||
| 'doc1.bubble.onmousedown', | ||
|
|
||
| 'doc1.orange.ondragstart', //dragging begins | ||
| 'doc1.bubble.ondragstart', | ||
|
|
||
| 'doc1.orange.ondrag', //mouse is over orange | ||
| 'doc1.bubble.ondrag', | ||
| 'doc1.orange.ondragenter', //not cancelled | ||
| 'doc1.bubble.ondragenter', | ||
| 'doc1.body.ondragenter', //so body becomes current target, and the event fires there as well | ||
| 'doc1.body.ondragover', | ||
|
|
||
| 'doc1.orange.ondrag', //start repeating (some over orange, some over body) | ||
| 'doc1.bubble.ondrag', | ||
| 'doc1.body.ondragover', | ||
| 'doc1.orange.ondrag', //...twice to make sure it actually repeats | ||
| 'doc1.bubble.ondrag', | ||
| 'doc1.body.ondragover', //end repeating | ||
|
|
||
| 'doc1.orange.ondrag', //mouse moves over pink | ||
| 'doc1.bubble.ondrag', | ||
| 'doc1.pink.ondragenter', //not cancelled | ||
| 'doc1.bubble.ondragenter', | ||
| 'doc1.body.ondragover', //so body becomes current target, but since it was already the target, dragenter does not need to fire again | ||
|
|
||
| 'doc1.orange.ondrag', //start repeating (some over pink, some over body) | ||
| 'doc1.bubble.ondrag', | ||
| 'doc1.body.ondragover', | ||
| 'doc1.orange.ondrag', //...twice to make sure it actually repeats | ||
| 'doc1.bubble.ondrag', | ||
| 'doc1.body.ondragover', //end repeating | ||
|
|
||
| 'doc1.orange.ondrag', //mouse moves over second frame | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.body.ondragenter', //not cancelled | ||
| 'doc2.body.ondragenter', //so it fires again and sets body as current target | ||
| 'doc2.body.ondragover', | ||
|
|
||
| 'doc1.orange.ondrag', //start repeating (over second body) | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.body.ondragover', | ||
| 'doc1.orange.ondrag', //...twice to make sure it actually repeats | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.body.ondragover', //end repeating | ||
|
|
||
| 'doc1.orange.ondrag', //mouse moves over yellow | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.yellow.ondragenter', | ||
| 'doc2.bubble.ondragenter', | ||
| 'doc2.yellow.ondragover', | ||
| 'doc2.bubble.ondragover', | ||
|
|
||
| 'doc1.orange.ondrag', //start repeating (over yellow) | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.yellow.ondragover', | ||
| 'doc2.bubble.ondragover', | ||
| 'doc1.orange.ondrag', //...twice to make sure it actually repeats | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.yellow.ondragover', | ||
| 'doc2.bubble.ondragover', //end repeating | ||
|
|
||
| 'doc1.orange.ondrag', //mouse moves over body | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.body.ondragenter', //not cancelled | ||
| 'doc2.body.ondragenter', //so it fires again and sets body as current target | ||
| 'doc2.body.ondragover', | ||
|
|
||
| 'doc1.orange.ondrag', //start repeating (over body) | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.body.ondragover', | ||
| 'doc1.orange.ondrag', //...twice to make sure it actually repeats | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.body.ondragover', //end repeating | ||
|
|
||
| 'doc1.orange.ondrag', //mouse moves over blue | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.blue.ondragenter', | ||
| 'doc2.bubble.ondragenter', | ||
| 'doc2.blue.ondragover', | ||
| 'doc2.bubble.ondragover', | ||
|
|
||
| 'doc1.orange.ondrag', //start repeating (over blue) | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.blue.ondragover', | ||
| 'doc2.bubble.ondragover', | ||
| 'doc1.orange.ondrag', //...twice to make sure it actually repeats | ||
| 'doc1.bubble.ondrag', | ||
| 'doc2.blue.ondragover', | ||
| 'doc2.bubble.ondragover', //end repeating | ||
|
|
||
| 'doc2.blue.ondrop', //release | ||
| 'doc2.bubble.ondrop', | ||
| 'doc1.orange.ondragend', | ||
| 'doc1.bubble.ondragend'] | ||
|
|
||
| ); | ||
| }, 'Overall sequence'); | ||
| var div = parent.document.createElement("div"); | ||
| div.setAttribute("id", "log"); | ||
| parent.document.documentElement.appendChild(div); | ||
| parent.done(); | ||
| document.body.appendChild(parent.document.querySelector("div")); | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <div id="testhere"> | ||
| <div draggable='true' id='orange'></div> | ||
| <div id='fuchsia'></div> | ||
| </div> | ||
|
|
||
| <p>If you have already clicked on this page, reload it.</p> | ||
| <p>Use your pointing device to slowly drag the orange square over the pink square, then the grey square, then the yellow square, then the blue square, and release it over the blue square (make sure the mouse remains over each square for at least 1 second, and over the gaps between squares for at least 1 second). Fail if no new text appears below.</p> |
Oops, something went wrong.