diff options
Diffstat (limited to 'testing/web-platform/tests/html/editing/dnd/overlay')
77 files changed, 2048 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/001.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/001.xhtml new file mode 100644 index 0000000000..56924d7a7f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/001.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback overlay size</title> +<style type="text/css"> +img + {height:100px; + width:100px;} +</style> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Try to drag green box above. Size of feedback overlay should match size of green box.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/002.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/002.xhtml new file mode 100644 index 0000000000..b8d2e8cb05 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/002.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Setting drag image during drag and drop</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/003.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/003.xhtml new file mode 100644 index 0000000000..344a7da7db --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/003.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/004.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/004.xhtml new file mode 100644 index 0000000000..2ba73e3737 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/004.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image on dragenter</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {width:100px; + height:100px; + background-color:silver; + margin-top:20px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +function resetImage(event) + {event.preventDefault(); + event.dataTransfer.setDragImage(document.querySelector('strong'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above to the silver box. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +<div ondragenter="resetImage(event)" ondragover="return false"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/005.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/005.xhtml new file mode 100644 index 0000000000..bf156f36fa --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/005.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore on dragenter</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {width:100px; + height:100px; + background-color:silver; + margin-top:20px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +function resetImage(event) + {event.preventDefault(); + event.dataTransfer.addElement(document.querySelector('strong'));} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above to the silver box. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +<div ondragenter="resetImage(event)" ondragover="return false"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/006.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/006.xhtml new file mode 100644 index 0000000000..4c0295bf9b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/006.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image on dragover</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {width:100px; + height:100px; + background-color:silver; + margin-top:20px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +function resetImage(event) + {event.preventDefault(); + event.dataTransfer.setDragImage(document.querySelector('strong'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above to the silver box. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +<div ondragenter="event.preventDefault()" ondragover="resetImage(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/007.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/007.xhtml new file mode 100644 index 0000000000..d91aae5056 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/007.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore on dragover</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {width:100px; + height:100px; + background-color:silver; + margin-top:20px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +function resetImage(event) + {event.preventDefault() + event.dataTransfer.addElement(document.querySelector('strong'));} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above to the silver box. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +<div ondragenter="event.preventDefault()" ondragover="resetImage(event)"/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/008.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/008.xhtml new file mode 100644 index 0000000000..9d01553c54 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/008.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image on drag</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +function resetImage(event) + {event.dataTransfer.setDragImage(document.querySelector('strong'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="resetImage(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/009.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/009.xhtml new file mode 100644 index 0000000000..23c786e9a0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/009.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore on drag</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +function resetImage(event) + {event.dataTransfer.addElement(document.querySelector('strong'));} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="resetImage(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/010.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/010.xhtml new file mode 100644 index 0000000000..5108bdd5e9 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/010.xhtml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image on new drag</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +var i = 0; +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelectorAll('span')[i++%2], 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Drag link above around the page drop it and try to drag again.</p> +<p>First time you drag it you should see word <span>Odd</span> in feedback overlay, second time overlay should change to <span>Even</span>.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/011.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/011.xhtml new file mode 100644 index 0000000000..5fc17de1f4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/011.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Feedback image for circle</title> +<style type="text/css"> +body + {background-color:silver; + margin:0;} +div + {background-color:white;} +</style> +</head> +<body> +<div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAEq0lEQVR42u1dvU4bQRAeR0RCCilSp0peIoKGB4DSXYRDlcZlFClKBI4bB/kV/AymIDwCTahiicaioEOxhCsjWVTJziyKMfYZn+9ud3bvG2mEZB13u9+nndmf2Rki7fKFXtEBbVKD9o22jB4bPaND6hm9Mjo0enevw/vfevKMfbYl/8vv4HdBUkvFALhltG2A7dN3+pur8jv53fwN/hZkjjRo3eiuAatjdJA7CcnkDOSb/G1uQ6mFzUeDagaQrvl764yEJOU22LbUymXaGrRhOt40OvJOQvLIGUkbP9GLeIn4SM9NJ+tOTVI+Jq0ubY9sVFRNxy6DIWKWmEvpQ/ByQNumI+fBEjHrZ86lT8HJV3ptGn8aDRGzxJxKHwMZFe9Mg6+jJWNCyrX0VbUc0nuj4+jJmPiWsfRZodN+ZvSoNETMjpYjwUCFfKaXpjEnpSVjQsqJYOF5ZLw1elF6MiakXAgmnpw378DegIgZUm4EGw8jA2QsIuUbvXHpM2CmljFfhfsUO5uCA0/j6AudfZV5arv6WuVHcYs+ALwqKTkvHnmLoEwr8CJW9Llts9iNwvj3plzsfeWyIRnzrq37kfIzq6naBpA5a6bzlJgOl/SMkl+rklEFgIX5k5THwTYgIdwzcP2jhM/o19KsOeoArnBS6suaqo2gQnXCJWSwXNwXB4gBMFekNBeTwSGUmiMK4yNktDhsleNaAZRrUvYWmasuQHJOSDdpdKyriEIvo9maexWC70gAIF/bKTvzzFUH4HgbJZ3HdFSw9vC6lfKHpq7X8X07AOOblK2HhLQBindC2g/9Rx+gePcj/cnqHIDoUFm1c9gjwNAy/d0kyXIAMLSYrQ8kqScAhhbH3iLJBwIwtBByTJKkBWBoIeSMJHMOwNBCyG+SdEYAQ4tTvyLJMQUwtBAyJEn8BTC0EHIHQhQSApOlzGTBqaty6jzVAhhaCOlhYahuYYitE02EHGNzURchLZItX4ChhZB9HFBpUjmgwhGuHv0feI0gBw1T3j7CgHT5jzYC5XQRsjUdSsrhjADGl7ka0EylBgRb+ySkMy9rww7A8Waududf2MH9Qh9k3CbXLsGVNh/mqrvojuEeQHI+Qmq4Fq1ndIyeruaDxAEuCWk+ncmB0z3gepubtQenMUHyGTWELJl8xk6B15CeqVAyLtPXtUICsyJnVivWs+J0dAAwbzLOkQRTk2YuKsapTQFkXqPjlDILEinnRcZ1fpXdkGo866xqnH9FNyTjz0JIQZXcuPQCAE5rqo6oMEFBl7RknBRfTg8lj5Yl48JdGT0ueIWiYIvIuHFfPg9l85LJcF42b+JTUFjysZnyVlhy2qfA0asovTo9+0JxYnWC8t0KBQXuFYrdkIy3mBj3LbeNQrejZTuqOlbcl8znGTqcfjXoM3pboqgaPhEPxda1qgcVYsRt5TanDkgISWzcV1N1hCS3jdu4dNxUDMIhlBzXysHGGspkcBtsW2pPh3fGLrZ2ya5cXHFp0qxJ6si3E68EQCpy344vQRZxO5jfye+2d/oqgHsV02Z3lvcl9QTnA+EkLZw5h9MZcY4pTvxldXj/W0+esc+25H/5HQGYon+Q5f+MwFz+8QAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></div> +<p>Try to drag green circle above. Feedback overlay should be a circle.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/012.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/012.xhtml new file mode 100644 index 0000000000..49739bc2b7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/012.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Feedback image and border-radius</title> +<style type="text/css"> +body + {background-color:silver; + margin:0;} +div + {background-color:white;} +div > div + {display:block; + width:100px; + height:100px; + border:solid thin green; + border-radius:50px;} +</style> +</head> +<body> +<div> + <div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +</div> +<p>Try to drag green circle above. Feedback overlay should be a circle.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/013.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/013.xhtml new file mode 100644 index 0000000000..07ac6b8e53 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/013.xhtml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Feedback image and CSS transforms</title> +<style type="text/css"> +body + {background-color:silver; + margin:0;} +div + {background-color:white;} +div > div + {display:block; + width:100px; + height:87px; + transform-origin:bottom right; + transform:skew(-30deg); + -o-transform-origin:bottom right; + -o-transform:skew(-30deg); + background-color:green;} +</style> +</head> +<body> +<div> + <div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +</div> +<p>Try to drag green rhomb above. Feedback overlay should not be rectangular.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/014.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/014.xhtml new file mode 100644 index 0000000000..8c07f69a18 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/014.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Setting drag image during drag and drop of selection</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p ondragstart="start(event)">Drag me</p> +<p>Try to drag selection above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/015.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/015.xhtml new file mode 100644 index 0000000000..3e416524ee --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/015.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore during drag and drop of selection</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +</script> +</head> +<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> +<p ondragstart="start(event)">Drag me</p> +<p>Try to drag selection above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/016.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/016.xhtml new file mode 100644 index 0000000000..081ee91330 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/016.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Setting drag image during drag and drop of PNG image</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +img + {height:100px; + width:100px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<p ondragstart="start(event)"> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel"/> +</p> +<p>Try to drag green box above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/017.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/017.xhtml new file mode 100644 index 0000000000..7b1d9320ff --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/017.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore during drag and drop of PNG image</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +img + {height:100px; + width:100px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +</script> +</head> +<body> +<p ondragstart="start(event)"> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel"/> +</p> +<p>Try to drag green box above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/018.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/018.xhtml new file mode 100644 index 0000000000..b82080a7fb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/018.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Setting drag image during drag and drop of SVG image</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<p><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22green%22/%3E%3C/svg%3E" alt="SVG circle" ondragstart="start(event)"/></p> +<p>Try to drag green circle above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/019.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/019.xhtml new file mode 100644 index 0000000000..325be4e8c3 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/019.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore during drag and drop of SVG image</title> +<style type="text/css"> +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +</script> +</head> +<body> +<p><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22green%22/%3E%3C/svg%3E" alt="SVG circle" ondragstart="start(event)"/></p> +<p>Try to drag green circle above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/020.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/020.xhtml new file mode 100644 index 0000000000..f5d1a2636d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/020.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Setting drag image during drag and drop of block element</title> +<style type="text/css"> +div + {width:100px; + height:100px; + background-color:navy;} +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Try to drag blue box above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/021.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/021.xhtml new file mode 100644 index 0000000000..268ef17c8c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/021.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Adding element to datastore during drag and drop of block element</title> +<style type="text/css"> +div + {width:100px; + height:100px; + background-color:navy;} +span + {color:green; + background-color:yellow;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('span'));} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Try to drag blue box above. You should see word <span>PASS</span> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/022.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/022.xhtml new file mode 100644 index 0000000000..fedc0344ed --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/022.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Block element drag and drop: changing draggable attribute</title> +<style type="text/css"> +div + {width:100px; + height:100px; + background-color:navy;} +</style> +</head> +<body onload="document.querySelector('div').setAttribute('draggable','false')"> +<div draggable="true" ondragstart="document.querySelector('p').firstChild.nodeValue = 'FAIL'"/> +<p>You should not be able to drag blue box.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/023.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/023.xhtml new file mode 100644 index 0000000000..c3f7ddf51b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/023.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Link drag and drop: changing draggable attribute</title> +</head> +<body onload="document.querySelector('a').setAttribute('draggable','false')"> +<p><a href="data:text/plain,1" ondragstart="document.querySelector('p').firstChild.nodeValue = 'FAIL'">Try to drag me</a></p> +<p>You should not be able to drag link above.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/024.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/024.xhtml new file mode 100644 index 0000000000..a7a3eb3320 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/024.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>PNG image drag and drop: changing draggable attribute</title> +<style type="text/css"> +img + {width:100px; + height:100px;} +</style> +</head> +<body onload="document.querySelector('img').setAttribute('draggable','false')"> +<p><img ondragstart="document.querySelector('p').firstChild.nodeValue = 'FAIL'" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel"/></p> +<p>You should not be able to drag green box.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/025.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/025.xhtml new file mode 100644 index 0000000000..ac2005377b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/025.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG image drag and drop: changing draggable attribute</title> +<style type="text/css"> +img + {width:100px; + height:100px;} +</style> +</head> +<body onload="document.querySelector('img').setAttribute('draggable','false')"> +<p><img ondragstart="document.querySelector('p').firstChild.nodeValue = 'FAIL'" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22green%22/%3E%3C/svg%3E" alt="SVG circle"/></p> +<p>You should not be able to drag green circle.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/026.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/026.xhtml new file mode 100644 index 0000000000..8d4b07411d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/026.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping links: zero height</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {width:4em; + padding:1em; + line-height:0;} +a + {background-color:white; + padding:1ex;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <a href="data:text/plain,1" ondragstart="start(event,'strong')"> </a> + <a href="data:text/plain,2" ondragstart="start(event,'span')">Link</a> +</div> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/027.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/027.xhtml new file mode 100644 index 0000000000..e34e2e88f1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/027.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping links: negative margin</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:2em;} +div + div + {margin-top:-2em;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <a href="data:text/plain,1" ondragstart="start(event,'strong')"> </a> +</div> +<div> + <a href="data:text/plain,2" ondragstart="start(event,'span')">Link</a> +</div> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/028.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/028.xhtml new file mode 100644 index 0000000000..0afd8a70cc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/028.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping links: relative position</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:2em;} +div + div + {position:relative; + top:-2em;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <a href="data:text/plain,1" ondragstart="start(event,'strong')"> </a> +</div> +<div> + <a href="data:text/plain,2" ondragstart="start(event,'span')">Link</a> +</div> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/029.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/029.xhtml new file mode 100644 index 0000000000..8741e8a374 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/029.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping links: absolute position</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:2em; + position:absolute; + top:10px; + left:10px;} +div + div + {z-index:2;} +p + {margin-top:3em;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <a href="data:text/plain,1" ondragstart="start(event,'strong')"> </a> +</div> +<div> + <a href="data:text/plain,2" ondragstart="start(event,'span')">Link</a> +</div> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/030.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/030.xhtml new file mode 100644 index 0000000000..3dcfae69fc --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/030.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping links: fixed position</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:2em; + position:fixed; + top:10px; + left:10px;} +div + div + {z-index:2;} +p + {margin-top:3em;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <a href="data:text/plain,1" ondragstart="start(event,'strong')"> </a> +</div> +<div> + <a href="data:text/plain,2" ondragstart="start(event,'span')">Link</a> +</div> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/031.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/031.xhtml new file mode 100644 index 0000000000..009f19a9d1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/031.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping images: negative margin</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +img + {display:block; + width:100px; + height:100px;} +img + img + {margin-top:-100px;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <img ondragstart="start(event,'strong')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP4z8DwHwAFAAH/VscvDQAAAABJRU5ErkJggg=="/> + <img ondragstart="start(event,'span')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgaGD4DwAChAGAJVtEDQAAAABJRU5ErkJggg=="/> +</div> +<p>Try to drag box above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/032.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/032.xhtml new file mode 100644 index 0000000000..d041ec9d5f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/032.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping images: absolute position</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:100px; + position:relative;} +img + {display:block; + position:absolute; + top:0; + bottom:0; + width:100px; + height:100px;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <img ondragstart="start(event,'strong')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP4z8DwHwAFAAH/VscvDQAAAABJRU5ErkJggg=="/> + <img ondragstart="start(event,'span')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgaGD4DwAChAGAJVtEDQAAAABJRU5ErkJggg=="/> +</div> +<p>Try to drag box above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/033.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/033.xhtml new file mode 100644 index 0000000000..b91f58181a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/033.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping images: fixed position</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +div + {height:100px; + position:relative;} +img + {display:block; + position:fixed; + top:0; + bottom:0; + width:100px; + height:100px;} +</style> +<script type="application/ecmascript"> +function start(event,feedback) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector(feedback));} +</script> +</head> +<body> +<div> + <img ondragstart="start(event,'strong')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP4z8DwHwAFAAH/VscvDQAAAABJRU5ErkJggg=="/> + <img ondragstart="start(event,'span')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgaGD4DwAChAGAJVtEDQAAAABJRU5ErkJggg=="/> +</div> +<p>Try to drag box above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay all the time.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/034.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/034.xhtml new file mode 100644 index 0000000000..3fbbfcce32 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/034.xhtml @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of overlapping elements: negative margins</title> +<style type="text/css"> +div + {height:100px; + width:100px; + margin-top:-50px; + background-color:navy;} +div:nth-child(odd) + {background-color:maroon; + margin-left:50px;} +div[draggable] + {background-color:teal;} +</style> +</head> +<body> +<div/> +<div/> +<div draggable="true"/> +<div/> +<div/> +<div draggable="true"/> +<div/> +<div/> +<p>Only green areas should be draggable.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/035.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/035.xhtml new file mode 100644 index 0000000000..c2a13f7ea6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/035.xhtml @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop of floated overlapping elements: negative margins</title> +<style type="text/css"> +div + {height:100px; + width:100px; + float:left; + margin-left:-50px; + background-color:navy;} +div:nth-child(odd) + {background-color:maroon; + margin-top:50px;} +div[draggable] + {background-color:teal;} +</style> +</head> +<body> +<p>Only green areas should be draggable.</p> +<div/> +<div/> +<div draggable="true"/> +<div/> +<div/> +<div draggable="true"/> +<div/> +<div/> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/036.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/036.xhtml new file mode 100644 index 0000000000..94ba9f24e4 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/036.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback when multiple elements are added to dragstore</title> +<style type="text/css"> +div > div + {height:100px; + width:100px; + float:left; + background-color:navy;} +div + div + {margin-left:-60px; + background-color:maroon;} +div[draggable] + {background-color:teal; + margin-top:50px;} +</style> +<script type="application/ecmascript"> +function start(event) + {var div = document.querySelectorAll('div > div:nth-child(odd)'); + event.dataTransfer.effectAllowed = 'copy'; + for(var i = 0; i != div.length; i++) + {event.dataTransfer.addElement(div[i]);} + } +</script> +</head> +<body> +<p>Try to drag green box below. Feedback overlay should include all three boxes when you drag green one.</p> +<div ondragstart="start(event)"> + <div/> + <div draggable="true"/> + <div/> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/038.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/038.xhtml new file mode 100644 index 0000000000..d146ecf8ab --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/038.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image after element was added to dragstore</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelector('strong')); + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/039.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/039.xhtml new file mode 100644 index 0000000000..49ce01c912 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/039.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Resetting drag image during drag and drop of link</title> +<style type="text/css"> +span, strong + {color:green; + background-color:yellow;} +strong + {color:red;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('strong'), 1, 1); + event.dataTransfer.setDragImage(document.querySelector('span'), 1, 1);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above. You should see word <span>PASS</span> not <strong>FAIL</strong> in feedback overlay.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/040.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/040.xhtml new file mode 100644 index 0000000000..0bad3d2f65 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/040.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cursor position and drag image</title> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setDragImage(document.querySelector('canvas'), 50, 50);} +</script> +</head> +<body> +<p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> +<p>Try to drag link above. Feedback overlay should be based on canvas below and mouse pointer should be anchored in its center.</p> +<p> + <canvas width="100" height="100">Canvas</canvas> +</p> +<script type="application/ecmascript"> +var canvas = document.querySelector('canvas'), +c = canvas.getContext('2d'); +for(var x = 0; x != 50; x++) + {c.fillStyle = (x%2 == 0)?'navy':'white'; + c.beginPath(); + c.moveTo(x,x); + c.lineTo(100-x,x); + c.lineTo(100-x,100-x); + c.lineTo(x,100-x); + c.closePath(); + c.fill();} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/041.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/041.xhtml new file mode 100644 index 0000000000..73e8c4dc3b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/041.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cursor position and drag image after new element is added to dragstore</title> +<script type="application/ecmascript"> +function start(event,element) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.addElement(document.querySelectorAll('canvas')[element]);} +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event,1)">Canvas</canvas> + <canvas width="100" height="100" draggable="true" ondragstart="start(event,0)">Canvas</canvas> +</p> +<p>Try to drag canvas above. Feedback overlay should include both canvases and mouse pointer should be anchored in dragged ones center.</p> +<script type="application/ecmascript"> +var canvases = document.querySelectorAll('canvas'); +paintCanvas(canvases[0],'navy'); +paintCanvas(canvases[1],'green'); +function paintCanvas(canvas,color) + {var c = canvas.getContext('2d'); + for(var x = 0; x != 50; x++) + {c.fillStyle = (x%2 == 0)?color:'white'; + c.beginPath(); + c.moveTo(x,x); + c.lineTo(100-x,x); + c.lineTo(100-x,100-x); + c.lineTo(x,100-x); + c.closePath(); + c.fill();} + } +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/042.html b/testing/web-platform/tests/html/editing/dnd/overlay/042.html new file mode 100644 index 0000000000..574153fc0d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/042.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<title>drag & drop - dragging elements that overlay each other</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: navy; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + height: 100px; + width: 100px; + background-color: orange; + left: 58px; + top: 58px; + } + body > div + div + div { + background-color: fuchsia; + left: 258px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +window.onload = function() { + var passed = true, orange = document.getElementsByTagName('div')[1], blue = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[2]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'PASS'); + }; + blue.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'FAIL'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + //it's possible this could get called twice if the browser drags both items, so it uses the "passed" variable to make sure + //that if blue gets dropped first, it remains false when orange then gets dropped + passed = passed && ( e.dataTransfer.getData('text/plain') == 'PASS' ); + document.getElementsByTagName('p')[0].innerHTML = passed ? 'PASS' : 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'></div><div draggable='true'></div><div></div> + +<p>Use your pointing device to drag the orange box to the pink box, then release it. While dragging, the drag placeholder should show that only the orange box is being dragged.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/043.html b/testing/web-platform/tests/html/editing/dnd/overlay/043.html new file mode 100644 index 0000000000..49108b9dbb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/043.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>drag & drop - dragging nested draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: navy; + position: absolute; + top: 8px; + left: 8px; + } + body > div div { + height: 100px; + width: 100px; + background-color: orange; + position: absolute; + left: 50px; + top: 50px; + } + body > div + div { + background-color: fuchsia; + height: 100px; + width: 100px; + left: 258px; + top: 58px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +window.onload = function() { + var passed = true, orange = document.getElementsByTagName('div')[1], blue = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[2]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'child targeted'); + }; + blue.ondragstart = function(e) { + if( e.target == this ) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'parent targeted'); + } else { + e.dataTransfer.setData('extra/data', 'parent bubble'); + } + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + //it's possible this could get called twice if the browser drags both items, so it uses the "passed" variable to make sure + //that if blue gets dropped first, it remains false when orange then gets dropped + passed = passed && ( e.dataTransfer.getData('text/plain') == 'child targeted' ) && ( e.dataTransfer.getData('extra/data') == 'parent bubble' ); + document.getElementsByTagName('p')[0].innerHTML = passed ? 'PASS' : 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'><div draggable='true'></div></div><div></div> + +<p>Use your pointing device to drag the orange box to the pink box, then release it. While dragging, the drag placeholder should show that only the orange box is being dragged.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/044.html b/testing/web-platform/tests/html/editing/dnd/overlay/044.html new file mode 100644 index 0000000000..6632738207 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/044.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>drag & drop - dragging selections inside draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: orange; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: fuchsia; + left: 250px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[1]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('extra/data', 'parent bubble'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + var passed = ( e.dataTransfer.getData('text/plain') == 'text dummy' ) && ( e.dataTransfer.getData('extra/data') == 'parent bubble' ); + document.getElementsByTagName('p')[0].innerHTML = passed ? 'PASS' : 'FAIL'; + }; + var range = document.createRange(); + range.selectNodeContents(orange); + range.setStart(orange.firstChild,6); + range.setEnd(orange.firstChild,16); + window.getSelection().addRange(range); + +}; + +</script> + +<div draggable='true'>Dummy text dummy text</div><div></div> + +<p>Use your pointing device to <strong>drag the selected text</strong> to the pink box, then release it. While dragging, the drag placeholder should show that only the selected text is being dragged.</p> +<p>(If no text is selected, you will need to use your browser's functionality to select "text dummy" in the orange box.)</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/045.html b/testing/web-platform/tests/html/editing/dnd/overlay/045.html new file mode 100644 index 0000000000..1efed6a110 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/045.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>drag & drop - dragging iframes overlaying draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: fuchsia; + left: 258px; + } + iframe { + border: 5px solid yellow; + height: 130px; + width: 130px; + position: absolute; + top: 38px; + left: 38px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[1]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'FAIL'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + document.getElementsByTagName('p')[0].innerHTML = 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'></div><div></div> + +<p>Use your pointing device to begin dragging inside the yellow border (not on any scrollbars that may appear), over to the pink box, then release it. Pass if nothing is dragged, and if this text does not change. +<iframe src="about:blank"></iframe></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/046.html b/testing/web-platform/tests/html/editing/dnd/overlay/046.html new file mode 100644 index 0000000000..8d03cd5d95 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/046.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>drag & drop - dragging iframes inside draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: fuchsia; + left: 258px; + } + iframe { + border: 5px solid yellow; + height: 130px; + width: 130px; + position: absolute; + top: 30px; + left: 30px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[1]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'FAIL'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + document.getElementsByTagName('p')[0].innerHTML = 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'><iframe src="about:blank"></iframe></div><div></div> + +<p>Use your pointing device to begin dragging inside the yellow border (not on any scrollbars that may appear), over to the pink box, then release it. Pass if nothing is dragged, and if this text does not change.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/047.html b/testing/web-platform/tests/html/editing/dnd/overlay/047.html new file mode 100644 index 0000000000..9b4c09ab93 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/047.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>drag & drop - dragging objects overlaying draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: fuchsia; + left: 258px; + } + object { + border: 5px solid yellow; + height: 130px; + width: 130px; + position: absolute; + top: 38px; + left: 38px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[1]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'FAIL'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + document.getElementsByTagName('p')[0].innerHTML = 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'></div><div></div> + +<p>Use your pointing device to begin dragging inside the yellow border (not on any scrollbars that may appear), over to the pink box, then release it. Pass if nothing is dragged, and if this text does not change. +<object data="about:blank"></object></p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/048.html b/testing/web-platform/tests/html/editing/dnd/overlay/048.html new file mode 100644 index 0000000000..54bb72c5ed --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/048.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title>drag & drop - dragging objects inside draggable elements</title> +<style> + body > div { + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 8px; + left: 8px; + } + body > div + div { + background-color: fuchsia; + left: 258px; + } + object { + border: 5px solid yellow; + height: 130px; + width: 130px; + position: absolute; + top: 30px; + left: 30px; + } + p:first-of-type { + margin-top: 220px; + } +</style> + +<script> + +window.onload = function() { + var orange = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[1]; + + orange.ondragstart = function(e) { + e.dataTransfer.effectAllowed = 'copy'; + e.dataTransfer.setData('text/plain', 'FAIL'); + }; + fuchsia.ondragenter = fuchsia.ondragover = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + fuchsia.ondrop = function(e) { + e.preventDefault(); + document.getElementsByTagName('p')[0].innerHTML = 'FAIL'; + }; + +}; + +</script> + +<div draggable='true'><object data="about:blank"></object></div><div></div> + +<p>Use your pointing device to begin dragging inside the yellow border (not on any scrollbars that may appear), over to the pink box, then release it. Pass if nothing is dragged, and if this text does not change.</p> +<noscript><p>Enable JavaScript and reload</p></noscript> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/049.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/049.xhtml new file mode 100644 index 0000000000..70c57acea7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/049.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible image: negative margins</title> +<style type="text/css"> +p:first-child + {margin:-50px 0 0 -50px;} +img + {height:100px; + width:100px;} +</style> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Try to drag green box above. Feedback overlay should be green square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/050.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/050.xhtml new file mode 100644 index 0000000000..28f218f813 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/050.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible image: relative position</title> +<style type="text/css"> +p:first-child + {margin:0; + position:relative; + top:-50px; + left:-50px;} +img + {display:block; + height:100px; + width:100px;} +</style> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Try to drag green box above. Feedback overlay should be green square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/051.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/051.xhtml new file mode 100644 index 0000000000..fc85f01480 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/051.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible image: absolute position</title> +<style type="text/css"> +img + {position:absolute; + top:-50px; + left:-50px;} +p + p + {margin-top:100px;} +img + {height:100px; + width:100px;} +</style> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Try to drag green box above. Feedback overlay should be green square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/052.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/052.xhtml new file mode 100644 index 0000000000..af40bf20b2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/052.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible image: fixed position</title> +<style type="text/css"> +img + {position:fixed; + top:-50px; + left:-50px;} +p + p + {margin-top:100px;} +img + {height:100px; + width:100px;} +</style> +</head> +<body> +<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==" alt="PNG green pixel" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> +<p>Try to drag green box above. Feedback overlay should be green square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/053.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/053.xhtml new file mode 100644 index 0000000000..2d427fdcc2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/053.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible element: negative margins</title> +<style type="text/css"> +div + {margin:-160px 0 0 -160px; + height:200px; + width:200px; + background-color:navy;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +<p>Try to drag blue box above. Feedback overlay should be square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/054.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/054.xhtml new file mode 100644 index 0000000000..f46c325118 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/054.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible element: relative position</title> +<style type="text/css"> +div + {position:relative; + top:-150px; + left:-150px; + height:200px; + width:200px; + background-color:navy;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +<p>Try to drag blue box above. Feedback overlay should be square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/055.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/055.xhtml new file mode 100644 index 0000000000..d693a60b9b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/055.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible element: absolute position</title> +<style type="text/css"> +div + {position:absolute; + top:-150px; + left:-150px; + height:200px; + width:200px; + background-color:navy;} +p + {margin-top:100px;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +<p>Try to drag blue box above. Feedback overlay should be square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/056.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/056.xhtml new file mode 100644 index 0000000000..77e86f97fb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/056.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible element: fixed position</title> +<style type="text/css"> +div + {position:fixed; + top:-150px; + left:-150px; + height:200px; + width:200px; + background-color:navy;} +p + {margin-top:100px;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +<p>Try to drag blue box above. Feedback overlay should be square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/057.xhtml b/testing/web-platform/tests/html/editing/dnd/overlay/057.xhtml new file mode 100644 index 0000000000..0e22142f19 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/057.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag feedback for partly visible float: negative margins</title> +<style type="text/css"> +p + {margin-top:0;} +div + {float:left; + margin:-150px 0 0 -150px; + height:200px; + width:200px; + background-color:navy;} +</style> +</head> +<body> +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/> +<p>Try to drag blue box above. Feedback overlay should be square.</p> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/058.html b/testing/web-platform/tests/html/editing/dnd/overlay/058.html new file mode 100644 index 0000000000..2fa4b60fb6 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/058.html @@ -0,0 +1,29 @@ +<!doctype html> +<title>drag & drop - dragging elements by children that extend out of them</title> +<style type="text/css"> +div { + height: 200px; + width: 200px; + background: blue; + white-space: nowrap; +} +span { + display: inline-block; + width: 210px; + height: 100px; +} +span + span { + background: orange; + width: 100px; +} +</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> +<div draggable="true"><span></span><span></span></div> +<p>Drag the orange square sideways. Pass if the drag placeholder shows that both the blue and orange squares are being dragged.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/059.html b/testing/web-platform/tests/html/editing/dnd/overlay/059.html new file mode 100644 index 0000000000..0afb72e029 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/059.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>drag & drop - dragging elements by text that extends out of them</title> +<style type="text/css"> +div { + height: 200px; + width: 200px; + background: blue; + white-space: nowrap; +} +</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> +<div draggable="true"> Drag me</div> +<p>Drag the above text sideways. Pass if the drag placeholder shows that both the text and blue square are being dragged.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/060.html b/testing/web-platform/tests/html/editing/dnd/overlay/060.html new file mode 100644 index 0000000000..0a90cadd4a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/060.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>drag & drop - dragging elements by children that are positioned outside them</title> +<style type="text/css"> +div { + height: 200px; + width: 200px; + background: blue; + white-space: nowrap; + position: relative; +} +span { + display: block; + top: 0; + left: 210px; + position: absolute; + width: 100px; + height: 100px; + background: 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> +<div draggable="true"><span></span></div> +<p>Drag the orange square sideways. Pass if the drag placeholder shows that both the blue and orange squares are being dragged.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/061.html b/testing/web-platform/tests/html/editing/dnd/overlay/061.html new file mode 100644 index 0000000000..3081676bf0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/061.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>drag & drop - dragging elements by overflowing children that are positioned outside them</title> +<style type="text/css"> +div { + height: 200px; + width: 200px; + background: blue; + white-space: nowrap; + position: relative; +} +span { + display: block; + top: 0; + left: 210px; + position: absolute; + width: 100px; + height: 100px; + background: yellow; +} +</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> +<div draggable="true"><span> Drag me</span></div> +<p>Drag the above text sideways. Pass if the drag placeholder shows that the text and both the yellow and blue squares are being dragged.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/062.html b/testing/web-platform/tests/html/editing/dnd/overlay/062.html new file mode 100644 index 0000000000..d48577e451 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/062.html @@ -0,0 +1,22 @@ +<!doctype html> +<html> + <head> + <title>Selection spanning hidden elements</title> + <script type="text/javascript"> +window.onload = function () { + var range = document.createRange(), p = document.getElementsByTagName('p')[0]; + range.selectNodeContents(p); + range.setStart(p.firstChild.firstChild,4); + range.setEnd(p.lastChild.firstChild,5); + window.getSelection().addRange(range); +}; + </script> + </head> + <body> + + <p><span style="display:none">FAILPASS_</span>drag<span style="display:none">_THIS_</span>text<span style="display:none">_PASSFAIL</span></p> + <p><textarea rows="3" cols="50"></textarea></p> + <p>Drag the selected text into the input box. The drag placeholder should match the visible text that is being dragged. When dropped, either "dragtext" or "PASS_drag_THIS_text_PASS" should appear in the input.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-001.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-001.html new file mode 100644 index 0000000000..05f69fa61c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-001.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 001</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + box-shadow: 10px 10px 10px gray; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box. It may optionally also include the box's shadow.</p> + +<a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-002.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-002.html new file mode 100644 index 0000000000..de3b2e296e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-002.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 002</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + border: 10px solid orange; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box, including the orange border.</p> + +<a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-003.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-003.html new file mode 100644 index 0000000000..adb0a3581c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-003.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 002</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + outline: 10px solid orange; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box. It may optionally also include include the orange border.</p> + +<a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-004.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-004.html new file mode 100644 index 0000000000..d6a5da41c0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-004.html @@ -0,0 +1,19 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 004</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + box-shadow: 10px 10px 10px gray; +} +div { + background-color: orange; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box. It may optionally also include the box's shadow, but must not include the orange rectangle.</p> + +<div><a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a></div> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-005.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-005.html new file mode 100644 index 0000000000..2bbdb3cf73 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-005.html @@ -0,0 +1,15 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 005</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: rgba(0,0,255,0.5); +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box, including the text within it.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-006.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-006.html new file mode 100644 index 0000000000..c067878f22 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-006.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 006</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + opacity: 0.5; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box, including the text within it.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-007.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-007.html new file mode 100644 index 0000000000..56ba9594f2 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-007.html @@ -0,0 +1,20 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 007</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + margin-left: 100px; + -moz-transform: rotate(-45deg) skew(15deg, 15deg); + -o-transform: rotate(-45deg) skew(15deg, 15deg); + -webkit-transform: rotate(-45deg) skew(15deg, 15deg); + transform: rotate(-45deg) skew(15deg, 15deg); +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box, including the text within it, and with the same rotation.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-008.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-008.html new file mode 100644 index 0000000000..7a78f814e1 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-008.html @@ -0,0 +1,31 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 008</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: green; + position: absolute; + top: 100px; + left: 10px; + z-index: 1; +} + +a + a { + background-color: red; + position: absolute; + top: 150px; + left: 20px; + z-index: 2; +} + + +</style> + +<p>Drag the green box below downwards. The drag placeholder should resemble the green box, including the text within it. It may optionally be a complete square, or the same shape as the visible part of the green box. There should be no red in the drag placeholder.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'">TEST</a> + +<a href='#'>TEST</a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-009.html b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-009.html new file mode 100644 index 0000000000..0f36fe0834 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/heavy-styling-009.html @@ -0,0 +1,16 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay for heavily styled elements – 009</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + border-radius: 50px; +} +</style> + +<p>Drag the blue box below downwards. The drag placeholder should resemble the blue box, including the rounded corners.</p> + +<a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-001.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-001.html new file mode 100644 index 0000000000..ecc7ebbf3b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-001.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 001</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 10px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + +<a href='#'></a> + +<p>Drag the blue box on the right downwards. The drag placeholder should ideally be a blue square. It may optionally be a rectangle the same shape as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-002.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-002.html new file mode 100644 index 0000000000..3878c31d0a --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-002.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 002</title> +<style> +img { + height: 200px; + width: 200px; + position: absolute; + top: 10px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + + +<img alt='' +src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAACRJREFUOE9jZGBoYCARADWQhEhTDXIOScaPaiAyuEaDlXBAAQBiw3iCaRp9LAAAAABJRU5ErkJggg%3D%3D'> + +<p>Drag the blue box on the right. The drag placeholder should ideally be a blue square. It may optionally be a rectangle the same shape as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-003.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-003.html new file mode 100644 index 0000000000..895a008f98 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-003.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 003</title> +<style> +a { + display: block; + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: -100px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + +<a href='#'></a> + +<p>Drag the blue box on the right downwards. The drag placeholder should ideally be a blue square twice as high and wide as the visible part of the blue box. It may optionally be a square the same size as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-004.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-004.html new file mode 100644 index 0000000000..61bc22eefe --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-004.html @@ -0,0 +1,21 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 004</title> +<style> +img { + height: 200px; + width: 200px; + position: absolute; + top: -100px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + +<img alt='' +src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAACRJREFUOE9jZGBoYCARADWQhEhTDXIOScaPaiAyuEaDlXBAAQBiw3iCaRp9LAAAAABJRU5ErkJggg%3D%3D'> + +<p>Drag the blue box on the right. The drag placeholder should ideally be a blue square twice as high and wide as the visible part of the blue box. It may optionally be a square the same size as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-005.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-005.html new file mode 100644 index 0000000000..26e4bff2eb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-005.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 005</title> +<style> +div { + display: block; + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: 10px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></div> + +<p>Drag the blue box on the right. The drag placeholder should ideally be a blue square. It may optionally be a rectangle the same shape as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-006.html b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-006.html new file mode 100644 index 0000000000..d10f06dfdd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/outside-viewport-006.html @@ -0,0 +1,22 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of elements partly outside the viewport – 006</title> +<style> +div { + display: block; + height: 200px; + width: 200px; + background-color: blue; + position: absolute; + top: -100px; + right: -100px; +} + +p { + margin-right: 200px; +} +</style> + +<div draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></div> + +<p>Drag the blue box on the right. The drag placeholder should ideally be a blue square twice as high and wide as the visible part of the blue box. It may optionally be a square the same size as the visible part of the blue box. No part of the UI should be dragged with the box.</p> diff --git a/testing/web-platform/tests/html/editing/dnd/overlay/oversized-001.html b/testing/web-platform/tests/html/editing/dnd/overlay/oversized-001.html new file mode 100644 index 0000000000..e13f6b190b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/overlay/oversized-001.html @@ -0,0 +1,18 @@ +<!DOCTYPe html> +<meta charset='utf-8'> +<title>drag and drop – feedback overlay of oversized element</title> +<style> +html, body, p + p { height: 100%; width: 100%; } +a { + display: block; + height: 100%; + width: 100%; + background-color: blue; + border: 50px solid orange; /* makes it higher and wider than the viewport */ +} + +</style> + +<p>Drag the blue box below downwards. The drag placeholder should ideally be a blue rectangle with an orange border on all sides. It may optionally match the visible part of the blue-and-orange box. It may optionally be a rectangle with the same pattern and size as the visible part of the blue-and-orange box. It may optionally be shrunk to a manageable size. No part of the UI should be dragged with the box.</p> + +<p><a href='#'></a></p> |