diff options
Diffstat (limited to 'testing/web-platform/tests/html/editing/dnd/canvas')
19 files changed, 548 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/001.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/001.xhtml new file mode 100644 index 000000000..fbb452117 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/001.xhtml @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop carrying image as dataURL</title> +<style type="text/css"> +div[ondragenter] + {width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy;} +p:first-child + {padding-left:12px;} +</style> +<script type="application/ecmascript"> +function addImage(event) + {var c = document.createElement('img'); + c.setAttribute('src',event.dataTransfer.getData('text/uri-list')); + document.querySelector('div').appendChild(c);} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png'));} +</script> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true" ondragstart="start(event)">Canvas</canvas> +</p> +<p>Drag canvas pattern above to the box below. It should be copied to the box once you drop it there.</p> +<div + ondragenter="event.preventDefault()" + ondragover="return false" + ondrop="addImage(event)" +/> +<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>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/002.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/002.xhtml new file mode 100644 index 000000000..9cd8eed06 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/002.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: dropping block element onto canvas</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/003-1.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/003-1.xhtml new file mode 100644 index 000000000..fe1e4ab30 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/003-1.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop: helper file</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/003.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/003.xhtml new file mode 100644 index 000000000..fa98ebe8d --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/003.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 from iframe: dropping block element onto canvas</title> +<style type="text/css"> +iframe + {width:150px; + height:150px; + border-style:none;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<p><iframe src="003-1.xhtml">Green box</iframe></p> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/004.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/004.xhtml new file mode 100644 index 000000000..d1c2ef06e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/004.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 from object: dropping block element onto canvas</title> +<style type="text/css"> +object + {width:150px; + height:150px; + border-style:none;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<p><object type="application/xhtml+xml" data="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cstyle%20type%3D%22text/css%22%3Ediv%7Bwidth%3A20px%3Bheight%3A20px%3Bbackground-color%3Agreen%3B%7D%3C/style%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20%27green%27%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%3E%3Cdiv%20draggable%3D%22true%22%20ondragstart%3D%22start%28event%29%22/%3E%3C/body%3E%3C/html%3E">Green box</object></p> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/005.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/005.xhtml new file mode 100644 index 000000000..fd9c9389e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/005.xhtml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop to iframe: dropping block element onto canvas</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +iframe + {width:200px; + height:200px; + border-style:none;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p><iframe src="helper-drop-here-canvas.xhtml">Canvas</iframe></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/006.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/006.xhtml new file mode 100644 index 000000000..003df8f06 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/006.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop to object: dropping block element onto canvas</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +object + {width:200px; + height:200px;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p><object type="application/xhtml+xml" data="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20paint%28color%29%7Bvar%20canvas%20%3D%20document.querySelector%28%27canvas%27%29%2Cc%20%3D%20canvas.getContext%28%272d%27%29%3Bc.fillStyle%20%3D%20color%3Bc.beginPath%28%29%3Bc.moveTo%280%2C0%29%3Bc.lineTo%28100%2C0%29%3Bc.lineTo%28100%2C100%29%3Bc.lineTo%280%2C100%29%3Bc.closePath%28%29%3Bc.fill%28%29%3B%7Dfunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20document.querySelector%28%27input%27%29.value%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%20onload%3D%22paint%28%27gray%27%29%22%3E%3Cp%3E%3Ccanvas%20width%3D%22100%22%20height%3D%22100%22%20ondragenter%3D%22event.preventDefault%28%29%22%20ondragover%3D%22return%20false%22%20ondrop%3D%22paint%28event.dataTransfer.getData%28%27text/plain%27%29%29%22%3ECanvas%3C/canvas%3E%3C/p%3E%3C/body%3E%3C/html%3E">Canvas</object></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/007.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/007.xhtml new file mode 100644 index 000000000..8ee869f0b --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/007.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop between iframes: dropping block element onto canvas</title> +<style type="text/css"> +iframe + {width:300px; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-green-box.xhtml">Green box</iframe></p> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p><iframe src="helper-drop-here-canvas.xhtml">Canvas</iframe></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/008.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/008.xhtml new file mode 100644 index 000000000..d3f21acd7 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/008.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop from iframe to object: dropping block element onto canvas</title> +<style type="text/css"> +iframe, object + {width:300px; + height:200px; + border-style:none;} +</style> +</head> +<body> +<p><iframe src="helper-drag-me-green-box.xhtml">Green box</iframe></p> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p><object type="application/xhtml+xml" data="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20paint%28color%29%7Bvar%20canvas%20%3D%20document.querySelector%28%27canvas%27%29%2Cc%20%3D%20canvas.getContext%28%272d%27%29%3Bc.fillStyle%20%3D%20color%3Bc.beginPath%28%29%3Bc.moveTo%280%2C0%29%3Bc.lineTo%28100%2C0%29%3Bc.lineTo%28100%2C100%29%3Bc.lineTo%280%2C100%29%3Bc.closePath%28%29%3Bc.fill%28%29%3B%7Dfunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20document.querySelector%28%27input%27%29.value%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%20onload%3D%22paint%28%27gray%27%29%22%3E%3Cp%3E%3Ccanvas%20width%3D%22100%22%20height%3D%22100%22%20ondragenter%3D%22event.preventDefault%28%29%22%20ondragover%3D%22return%20false%22%20ondrop%3D%22paint%28event.dataTransfer.getData%28%27text/plain%27%29%29%22%3ECanvas%3C/canvas%3E%3C/p%3E%3C/body%3E%3C/html%3E">Canvas</object></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/009.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/009.xhtml new file mode 100644 index 000000000..9f73037bb --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/009.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop between objects: dropping block element onto canvas</title> +<style type="text/css"> +object + {width:300px; + height:200px;} +</style> +</head> +<body> +<p><object type="application/xhtml+xml" data="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cstyle%20type%3D%22text/css%22%3Ediv%7Bwidth%3A20px%3Bheight%3A20px%3Bbackground-color%3Agreen%3B%7D%3C/style%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20%27green%27%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%3E%3Cdiv%20draggable%3D%22true%22%20ondragstart%3D%22start%28event%29%22/%3E%3C/body%3E%3C/html%3E">Green box</object></p> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +<p><object type="application/xhtml+xml" data="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20paint%28color%29%7Bvar%20canvas%20%3D%20document.querySelector%28%27canvas%27%29%2Cc%20%3D%20canvas.getContext%28%272d%27%29%3Bc.fillStyle%20%3D%20color%3Bc.beginPath%28%29%3Bc.moveTo%280%2C0%29%3Bc.lineTo%28100%2C0%29%3Bc.lineTo%28100%2C100%29%3Bc.lineTo%280%2C100%29%3Bc.closePath%28%29%3Bc.fill%28%29%3B%7Dfunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20document.querySelector%28%27input%27%29.value%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%20onload%3D%22paint%28%27gray%27%29%22%3E%3Cp%3E%3Ccanvas%20width%3D%22100%22%20height%3D%22100%22%20ondragenter%3D%22event.preventDefault%28%29%22%20ondragover%3D%22return%20false%22%20ondrop%3D%22paint%28event.dataTransfer.getData%28%27text/plain%27%29%29%22%3ECanvas%3C/canvas%3E%3C/p%3E%3C/body%3E%3C/html%3E">Canvas</object></p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/010-1.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/010-1.xhtml new file mode 100644 index 000000000..0f12e6fcd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/010-1.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop: helper file</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/> +<p>Drag green box above to the gray canvas below. Canvas should turn green when you drop green box on it.</p> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/010.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/010.xhtml new file mode 100644 index 000000000..0b24a3082 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/010.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop between frames: dropping block element onto canvas</title> +</head> +<frameset rows="50%, 50%"> +<frame src="010-1.xhtml"/> +<frame src="helper-drop-here-canvas.xhtml"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/011.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/011.xhtml new file mode 100644 index 000000000..40da4e967 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/011.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop between dataURL frames: dropping block element onto canvas</title> +</head> +<frameset rows="50%, 50%"> +<frame src="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cstyle%20type%3D%22text/css%22%3Ediv%7Bwidth%3A20px%3Bheight%3A20px%3Bbackground-color%3Agreen%3B%7D%3C/style%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20%27green%27%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%3E%3Cdiv%20draggable%3D%22true%22%20ondragstart%3D%22start%28event%29%22/%3E%3Cp%3EDrag%20green%20box%20above%20to%20the%20gray%20canvas%20below.%20Canvas%20should%20turn%20green%20when%20you%20drop%20green%20box%20on%20it.%3C/p%3E%3C/body%3E%3C/html%3E"/> +<frame src="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Ctitle%3ECanvas%20drag%20and%20drop%3C/title%3E%3Cscript%20type%3D%22application/ecmascript%22%3Efunction%20paint%28color%29%7Bvar%20canvas%20%3D%20document.querySelector%28%27canvas%27%29%2Cc%20%3D%20canvas.getContext%28%272d%27%29%3Bc.fillStyle%20%3D%20color%3Bc.beginPath%28%29%3Bc.moveTo%280%2C0%29%3Bc.lineTo%28100%2C0%29%3Bc.lineTo%28100%2C100%29%3Bc.lineTo%280%2C100%29%3Bc.closePath%28%29%3Bc.fill%28%29%3B%7Dfunction%20start%28event%29%7Bevent.dataTransfer.effectAllowed%20%3D%20%27copy%27%3Bevent.dataTransfer.setData%28%27text/plain%27%2C%20document.querySelector%28%27input%27%29.value%29%3B%7D%3C/script%3E%3C/head%3E%3Cbody%20onload%3D%22paint%28%27gray%27%29%22%3E%3Cp%3E%3Ccanvas%20width%3D%22100%22%20height%3D%22100%22%20ondragenter%3D%22event.preventDefault%28%29%22%20ondragover%3D%22return%20false%22%20ondrop%3D%22paint%28event.dataTransfer.getData%28%27text/plain%27%29%29%22%3ECanvas%3C/canvas%3E%3C/p%3E%3C/body%3E%3C/html%3E"/> +</frameset> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/012.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/012.xhtml new file mode 100644 index 000000000..d2069142c --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/012.xhtml @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop and vertical scrolling: dropping block element onto canvas inside scrollable container</title> +<style type="text/css"> +div[draggable] + {width:20px; + height:20px; + background-color:green;} +p + div + {height:100px; + width:150px; + overflow-y:scroll;} +canvas + {display:block; + margin-top:100px;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<div draggable="true" ondragstart="start(event)"/> +<p>You should be able to drag green box above to the gray canvas at the bottom of scrollable container (dragging towards the bottom edge triggers scrolling). Canvas should be repainted to match dropped color.</p> +<div> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/013.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/013.xhtml new file mode 100644 index 000000000..c63a5d4d0 --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/013.xhtml @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop and horizontal scrolling: dropping block element onto canvas inside scrollable container</title> +<style type="text/css"> +div[draggable] + {width:20px; + height:20px; + background-color:green;} +p + div + {height:150px; + width:100px; + overflow-x:scroll;} +canvas + {display:block; + margin-left:100px;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<div draggable="true" ondragstart="start(event)"/> +<p>You should be able to drag green box above to the gray canvas at the right edge of scrollable container (dragging towards the right edge triggers scrolling). Canvas should be repainted to match dropped color.</p> +<div> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/014.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/014.xhtml new file mode 100644 index 000000000..561597eea --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/014.xhtml @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Drag and drop and scrolling: dropping block element onto canvas inside scrollable container</title> +<style type="text/css"> +div[draggable] + {width:20px; + height:20px; + background-color:green;} +p + div + {height:100px; + width:100px; + overflow:scroll;} +canvas + {display:block; + margin:100px 0 0 100px;} +</style> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<div draggable="true" ondragstart="start(event)"/> +<p>You should be able to drag green box above to the gray canvas in the right-bottom corner of the scrollable container (dragging towards the corner triggers scrolling). Canvas should be repainted to match dropped color.</p> +<div> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/cross-domain/001.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/cross-domain/001.xhtml new file mode 100644 index 000000000..d99c73e6e --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/cross-domain/001.xhtml @@ -0,0 +1,59 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Cross-domain canvas data must not populate the dataTransfer</title> +<script src="../../resources/crossorigin.js"></script> +<style type="text/css"> +div { + width:105px; + min-height:105px; + text-align:center; + margin-top:20px; + padding:10px; + border:solid thin navy; +} +p:first-child { + padding-left:12px; +} +#image { visibility: hidden; } +</style> +</head> +<body> +<p> + <canvas width="100" height="100" draggable="true">Canvas</canvas> +</p> +<p>Drag the navy square above to the box below.</p> +<div></div> +<p><img id="image" alt="" width="100" height="100" /></p> + +<script><![CDATA[ +document.getElementsByTagName("img")[0].src = crossOriginUrl("www", "../../resources/100x100-navy.png"); + +window.onload = function() { + var canvas = document.getElementsByTagName('canvas')[0], div = document.getElementsByTagName('div')[0], failed = []; + var context = canvas.getContext('2d'); + var image = document.getElementById('image'); + context.drawImage(image, 0, 0); + div.ondragover = div.ondragenter = function(e) { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + div.ondrop = canvas.ondragstart = function(e) { + if( e.type == 'dragstart' ) { + e.dataTransfer.setData('Text', 'dummy text'); + e.dataTransfer.dropEffect = 'copy'; + } + for( var i = 0; i < e.dataTransfer.types.length; i++ ) { + if( e.dataTransfer.types[i].match(/image\//) ) { + failed[failed.length] = e.dataTransfer.types[i]; + } + } + if( e.type == 'drop' ) { + e.preventDefault(); + document.getElementsByTagName('p')[1].innerHTML = failed.length ? ( 'FAIL (found ' + failed.join() + ')' ) : 'PASS'; + } + }; +}; +]]></script> +</body> +</html> diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/helper-drag-me-green-box.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/helper-drag-me-green-box.xhtml new file mode 100644 index 000000000..cb722babd --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/helper-drag-me-green-box.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop: helper file</title> +<style type="text/css"> +div + {width:20px; + height:20px; + background-color:green;} +</style> +<script type="application/ecmascript"> +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body> +<div draggable="true" ondragstart="start(event)"/></body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/editing/dnd/canvas/helper-drop-here-canvas.xhtml b/testing/web-platform/tests/html/editing/dnd/canvas/helper-drop-here-canvas.xhtml new file mode 100644 index 000000000..dcbf7e33f --- /dev/null +++ b/testing/web-platform/tests/html/editing/dnd/canvas/helper-drop-here-canvas.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Canvas drag and drop: helper file</title> +<script type="application/ecmascript"> +function paint(color) + {var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); + c.fillStyle = color; + c.beginPath(); + c.moveTo(0,0); + c.lineTo(100,0); + c.lineTo(100,100); + c.lineTo(0,100); + c.closePath(); + c.fill();} +function start(event) + {event.dataTransfer.effectAllowed = 'copy'; + event.dataTransfer.setData('text/plain', 'green');} +</script> +</head> +<body onload="paint('gray')"> +<p> + <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> +</p> +</body> +</html>
\ No newline at end of file |