mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision 0d318188757a9c996e20b82db201fd04de5aa255
This commit is contained in:
James Graham
parent
b2a5225831
commit
1a81b18b9f
12321 changed files with 544385 additions and 6 deletions
0
tests/wpt/web-platform-tests/html/editing/.gitkeep
Normal file
0
tests/wpt/web-platform-tests/html/editing/.gitkeep
Normal file
23
tests/wpt/web-platform-tests/html/editing/dnd/README
Normal file
23
tests/wpt/web-platform-tests/html/editing/dnd/README
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
This is a test suite for the drag and drop API described in the HTML5
|
||||
specification:
|
||||
|
||||
http://dev.w3.org/html5/spec/dnd.html#dnd
|
||||
|
||||
Tests in target-origin/ relate to a proposed spec extension and are not covered
|
||||
by HTML5 drafts at the time of writing. Contact Opera Sofware for details, and
|
||||
mention CT-1656.
|
||||
|
||||
Tests in synthetic/ relate to incomplete parts of the HTML5 specification,
|
||||
which allows synthetic events to be created. For compatibility with others,
|
||||
the dataTransfer parameter allows null, undefined and other objects. Objects
|
||||
will create a synthetic dataTransfer. To provide maximum functionality,
|
||||
synthetic dataTransfer will have its own synthetic data store, detatched from
|
||||
the real data store used by real drag events (actual user interaction). For
|
||||
security, real dataTransfer objects will remember the real event's protection
|
||||
status inside synthetic events (the spec bases their protection only on the
|
||||
event type, and does not consider the difference between real and synthetic
|
||||
events).
|
||||
|
||||
Tests in platform/plugin are based on assumed "good" behaviour, where the
|
||||
appropriate events are passed to the plugin. Platforms should determine if any
|
||||
deviations from the expected results are problematic.
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset='utf-8'>
|
||||
<title>drag & drop – crash when drag is interrupted by dialogs</title>
|
||||
<style>
|
||||
body > div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: orange;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
body > div * {
|
||||
display: none;
|
||||
}
|
||||
body > div + div {
|
||||
background-color: navy;
|
||||
left: 250px;
|
||||
}
|
||||
p {
|
||||
margin-top: 220px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var doneonce = false;
|
||||
document.getElementsByTagName('div')[0].ondragstart = function(e) {
|
||||
alert( doneonce ? 'Dismiss this dialog. PASS if the browser does not crash.' : 'Dismiss this dialog. The browser should not crash. Without re-focusing the page first, try dragging the orange square a second time. If a second alert does not appear, release the drag, and then try dragging the orange square a third time.' );
|
||||
doneonce = true;
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<div draggable='true' itemscope></div><div></div>
|
||||
|
||||
<p>Try to drag the orange square onto the blue square.</p>
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<title>drag & drop - cross-document data drop</title>
|
||||
<style>
|
||||
body > div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var blue = document.getElementsByTagName('div')[0], fails = [];
|
||||
blue.ondragover = blue.ondragenter = function(e) {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
if( e.dataTransfer.getData('text') ) {
|
||||
fails[fails.length] = '"' + e.dataTransfer.getData('text') + '" exposed during event ' + e.type;
|
||||
}
|
||||
};
|
||||
blue.ondrop = function(e) {
|
||||
e.preventDefault();
|
||||
if( !e.dataTransfer.types.length ) {
|
||||
fails[fails.length] = 'no types found during event drop';
|
||||
}
|
||||
var foundtext = false;
|
||||
for( var i = 0; i < e.dataTransfer.types.length; i++ ) {
|
||||
if( e.dataTransfer.types[i] == 'text/plain' ) {
|
||||
foundtext = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if( !foundtext ) {
|
||||
fails[fails.length] = 'text/plain type not found during event drop';
|
||||
}
|
||||
if( e.dataTransfer.getData('text') != 'dummy text' ) {
|
||||
fails[fails.length] = 'getData returned ' + e.dataTransfer.getData('text') + ' instead of "dummy text"';
|
||||
}
|
||||
document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS';
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<p>Drag the orange square onto the blue square. Fail if this text does not change.</p>
|
||||
<div></div>
|
||||
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<title>drag & drop - simple cross-document data drop</title>
|
||||
<style>
|
||||
body > div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var orange = document.getElementsByTagName('div')[0];
|
||||
orange.ondragstart = function(e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<div draggable="true"></div>
|
||||
<p><iframe src="001-1.html" height="300" width="500"></iframe></p>
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<title>drag & drop - cross-domain cross-document data drop</title>
|
||||
<script src="../resources/crossorigin.js"></script>
|
||||
<style>
|
||||
body > div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var orange = document.getElementsByTagName('div')[0];
|
||||
orange.ondragstart = function(e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<div draggable="true"></div>
|
||||
<p><iframe height="300" width="500"></iframe></p>
|
||||
<script>document.getElementsByTagName("iframe")[0].src = crossOriginUrl("www", "001-1.html");
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<title>drag & drop - cross-document data drop</title>
|
||||
<style>
|
||||
body > div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var blue = document.getElementsByTagName('div')[0], fails = [];
|
||||
blue.ondragover = blue.ondragenter = function(e) {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
if( !parent.evs[e.type] ) { parent.evs[e.type] = {}; }
|
||||
parent.evs[e.type].dataTransfer = e.dataTransfer;
|
||||
parent.evs[e.type].items = e.dataTransfer.items;
|
||||
parent.evs[e.type].types = e.dataTransfer.types;
|
||||
parent.evs[e.type].files = e.dataTransfer.files;
|
||||
if( parent.evs[e.type].dataTransfer != e.dataTransfer ) {
|
||||
fails[fails.length] = '.dataTransfer is not returning the same object during '+e.type;
|
||||
}
|
||||
if( !e.dataTransfer.items ) {
|
||||
fails[fails.length] = '.items is not returning anything during '+e.type;
|
||||
} else if( parent.evs[e.type].items !== e.dataTransfer.items ) {
|
||||
fails[fails.length] = '.items is not returning the same object during '+e.type;
|
||||
}
|
||||
if( !e.dataTransfer.types ) {
|
||||
fails[fails.length] = '.types is not returning anything during '+e.type;
|
||||
} else if( parent.evs[e.type].types !== e.dataTransfer.types ) {
|
||||
fails[fails.length] = '.types is not returning the same object during '+e.type;
|
||||
}
|
||||
if( !e.dataTransfer.files ) {
|
||||
fails[fails.length] = '.files is not returning anything during '+e.type;
|
||||
} else if( parent.evs[e.type].files !== e.dataTransfer.files ) {
|
||||
fails[fails.length] = '.files is not returning the same object during '+e.type;
|
||||
}
|
||||
//http://dev.w3.org/html5/spec/dnd.html#datatransfer
|
||||
//"The * attribute must return a * object associated with the DataTransfer object."
|
||||
//Note that it is associated with the DataTransfer object, *not* the data store
|
||||
//http://dev.w3.org/html5/spec/dnd.html#dragevent
|
||||
//"when a user agent is required to fire a DND event named e at an element, using a particular drag data store...
|
||||
//Let dataTransfer be a newly created DataTransfer object associated with the given drag data store."
|
||||
//A new DataTransfer object therefore means a new set of properties, not the same ones as last event
|
||||
if( parent.evs.dragstart.dataTransfer === e.dataTransfer ) {
|
||||
fails[fails.length] = '.dataTransfer is returning the same object during '+e.type+' as it did during dragstart';
|
||||
}
|
||||
if( e.dataTransfer.items && parent.evs.dragstart.items === e.dataTransfer.items ) {
|
||||
fails[fails.length] = '.items is returning the same object during '+e.type+' as it did during dragstart';
|
||||
}
|
||||
if( e.dataTransfer.types && parent.evs.dragstart.types === e.dataTransfer.types ) {
|
||||
fails[fails.length] = '.types is returning the same object during '+e.type+' as it did during dragstart';
|
||||
}
|
||||
if( e.dataTransfer.files && parent.evs.dragstart.files === e.dataTransfer.files ) {
|
||||
fails[fails.length] = '.files is returning the same object during '+e.type+' as it did during dragstart';
|
||||
}
|
||||
};
|
||||
blue.ondrop = function(e) {
|
||||
parent.evs[e.type] = {};
|
||||
parent.evs[e.type].dataTransfer = e.dataTransfer;
|
||||
parent.evs[e.type].items = e.dataTransfer.items;
|
||||
parent.evs[e.type].types = e.dataTransfer.types;
|
||||
parent.evs[e.type].files = e.dataTransfer.files;
|
||||
if( parent.evs[e.type].dataTransfer !== e.dataTransfer ) {
|
||||
fails[fails.length] = '.dataTransfer is not returning the same object during '+e.type;
|
||||
}
|
||||
if( !e.dataTransfer.items ) {
|
||||
fails[fails.length] = '.items is not returning anything during '+e.type;
|
||||
} else if( parent.evs[e.type].items !== e.dataTransfer.items ) {
|
||||
fails[fails.length] = '.items is not returning the same object during '+e.type;
|
||||
}
|
||||
if( !e.dataTransfer.types ) {
|
||||
fails[fails.length] = '.types is not returning anything during '+e.type;
|
||||
} else if( parent.evs[e.type].types !== e.dataTransfer.types ) {
|
||||
fails[fails.length] = '.types is not returning the same object during '+e.type;
|
||||
}
|
||||
if( !e.dataTransfer.files ) {
|
||||
fails[fails.length] = '.files is not returning anything during '+e.type;
|
||||
} else if( parent.evs[e.type].files !== e.dataTransfer.files ) {
|
||||
fails[fails.length] = '.files is not returning the same object during '+e.type;
|
||||
}
|
||||
if( parent.evs.dragstart.dataTransfer === e.dataTransfer ) {
|
||||
fails[fails.length] = '.dataTransfer is returning the same object during '+e.type+' as it did during dragstart';
|
||||
}
|
||||
if( e.dataTransfer.items && parent.evs.dragstart.items === e.dataTransfer.items ) {
|
||||
fails[fails.length] = '.items is returning the same object during '+e.type+' as it did during dragstart';
|
||||
}
|
||||
if( e.dataTransfer.types && parent.evs.dragstart.types === e.dataTransfer.types ) {
|
||||
fails[fails.length] = '.types is returning the same object during '+e.type+' as it did during dragstart';
|
||||
}
|
||||
if( e.dataTransfer.files && parent.evs.dragstart.files === e.dataTransfer.files ) {
|
||||
fails[fails.length] = '.files is returning the same object during '+e.type+' as it did during dragstart';
|
||||
}
|
||||
document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS';
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<p>Drag the orange square onto the blue square. Fail if this text does not change.</p>
|
||||
<div></div>
|
||||
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<title>drag & drop - cross-document variable retention within event handlers</title>
|
||||
<style>
|
||||
body > div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var evs = {};
|
||||
window.onload = function() {
|
||||
var orange = document.getElementsByTagName('div')[0];
|
||||
orange.ondragstart = function(e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('text', 'dummy text');
|
||||
evs[e.type] = {};
|
||||
evs[e.type].dataTransfer = e.dataTransfer;
|
||||
evs[e.type].items = e.dataTransfer.items;
|
||||
evs[e.type].types = e.dataTransfer.types;
|
||||
evs[e.type].files = e.dataTransfer.files;
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<div draggable="true"></div>
|
||||
<p><iframe src="003-1.html" height="300" width="500"></iframe></p>
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.setData/getData during canvas drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas>
|
||||
</p>
|
||||
<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
<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();}
|
||||
data[1] = canvas.toDataURL('image/png');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.setData/getData during PNG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['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==', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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 circle"/></p>
|
||||
<p>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.setData/getData during SVG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['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', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.setData/getData during text input selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="document.querySelector('input').select()">
|
||||
<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.setData/getData during selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))">
|
||||
<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.setData/getData during link drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p>
|
||||
<p>Drag link above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.setData/getData during block element drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:green;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('p + div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/>
|
||||
<p>Drag green box above to the gray box below and drop it. Gray box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Influence of reload during drag and drop on datastore</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:green;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
window.location.reload();}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('p + div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/>
|
||||
<p>Drag green box above to the gray box below and drop it. Gray box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Redirect during drag and drop: helper file</title>
|
||||
<style type="text/css">
|
||||
html, body
|
||||
{height:100%;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('body').setAttribute('style','background-color:teal;color:white;');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)">
|
||||
<p>Drop box here. Page should turn green and test results should appear below.</p>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Influence of redirect during drag and drop on datastore</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:navy;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
window.location = '009-1.xhtml'}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)"/>
|
||||
<p>Try to drag box above. You should be redirected to the new page and be able to drop it there.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>History navigation during drag and drop: helper file</title>
|
||||
<style type="text/css">
|
||||
div[ondragenter]
|
||||
{margin:200px 0 0 200px;
|
||||
width:200px;
|
||||
height:100px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
div[ondragenter]:before
|
||||
{display:block;
|
||||
content:"";
|
||||
border-style:solid;
|
||||
position:relative;
|
||||
top:-50px;
|
||||
left:-200px;
|
||||
border-width:100px;
|
||||
border-color:transparent navy transparent transparent;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Drag box to the blue arrow but don't drop it yet. You should be returned back to start page.</p>
|
||||
<div ondragenter="event.preventDefault()" ondragover="history.go(-1)"/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Influence of history navigation during drag and drop on datastore</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:green;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
window.location = '010-1.xhtml'}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('p + div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)"/>
|
||||
<p>Drag green box above. You will be redirected to new page. When you return back drop it on the gray box below. Gray box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Drag and drop datastore: dragging element to iframe</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:navy;}
|
||||
iframe
|
||||
{width:500px;
|
||||
height:500px;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)"/>
|
||||
<p>Drag box above to the frame below.</p>
|
||||
<iframe src="helper-drop-box-here.xhtml">XHTML document</iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Drag and drop datastore: dragging element to object</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:navy;}
|
||||
object
|
||||
{width:500px;
|
||||
height:500px;
|
||||
border:solid medium navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)"/>
|
||||
<p>Drag box above to the frame below.</p>
|
||||
<object type="application/xhtml+xml" data="helper-drop-box-here.xhtml">XHTML document</object>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Drag and drop datastore: helper file</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)"/>
|
||||
<p>Drag box above to the frame below.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Drag and drop datastore: dragging element between frames</title>
|
||||
</head>
|
||||
<frameset rows="50%, 50%">
|
||||
<frame src="013-1.xhtml"/>
|
||||
<frame src="helper-drop-box-here.xhtml"/>
|
||||
</frameset>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Drag and drop datastore: helper file</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p>
|
||||
<p>Drag link from one frame to the silver box in another frame and drop it. Silver box should turn green and test results should appear.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Drag and drop datastore: dragging element between two instances of document</title>
|
||||
</head>
|
||||
<frameset rows="50%, 50%">
|
||||
<frame src="014-1.xhtml"/>
|
||||
<frame src="014-1.xhtml"/>
|
||||
</frameset>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Using dataTransfer in new thread</title>
|
||||
<style type="text/css">
|
||||
blockquote { height: 100px; width: 100px; background: orange; margin: 0; padding: 0; float: left; }
|
||||
blockquote + blockquote { background: blue; }
|
||||
blockquote + blockquote + blockquote { background: fuchsia; }
|
||||
blockquote + div { clear: left; }
|
||||
</style>
|
||||
<script type="text/javascript" src="/resources/testharness.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup(function () {},{explicit_done:true,explicit_timeout:true});
|
||||
window.onload = function () {
|
||||
|
||||
var orange = document.getElementsByTagName('blockquote')[0],
|
||||
blue = document.getElementsByTagName('blockquote')[1],
|
||||
fuchsia = document.getElementsByTagName('blockquote')[2],
|
||||
evtdone = {};
|
||||
|
||||
orange.ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('text','dragstart real data');
|
||||
var dataTransfer = e.dataTransfer;
|
||||
setTimeout(function () {
|
||||
test(function () {
|
||||
assert_equals( dataTransfer.getData('text'), '', 'step 1' );
|
||||
dataTransfer.setData('text','new thread after dragstart');
|
||||
assert_equals( dataTransfer.getData('text'), '', 'step 2' );
|
||||
},'dragstart data store should be protected after new thread starts');
|
||||
},0);
|
||||
};
|
||||
|
||||
fuchsia.ondragenter = fuchsia.ondragover = function (e) {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
fuchsia.ondrop = function (e) {
|
||||
e.preventDefault();
|
||||
var dataTransfer = e.dataTransfer;
|
||||
setTimeout(function () {
|
||||
test(function () {
|
||||
assert_equals( dataTransfer.getData('text'), '', 'step 1' );
|
||||
dataTransfer.setData('text','new thread after dragstart');
|
||||
assert_equals( dataTransfer.getData('text'), '', 'step 2' );
|
||||
},'drop data store should be protected after new thread starts');
|
||||
done();
|
||||
},0);
|
||||
};
|
||||
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Drag the orange square over the blue square then the fuchsia square, then release it.</p>
|
||||
<blockquote draggable="true"></blockquote>
|
||||
<blockquote></blockquote>
|
||||
<blockquote></blockquote>
|
||||
<div id="log"></div>
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.clearData during PNG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['data:text/plain,FAIL', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'],
|
||||
l = 0;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.clearData(dataTypes[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length > l)
|
||||
{say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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 circle"/></p>
|
||||
<p>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.clearData during SVG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['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', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'],
|
||||
l = 0;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.clearData(dataTypes[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length > l)
|
||||
{say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.clearData during text input selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'],
|
||||
l = 0;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.clearData(dataTypes[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length > l)
|
||||
{say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="document.querySelector('input').select()">
|
||||
<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.clearData during selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'],
|
||||
l = 0;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.clearData(dataTypes[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length > l)
|
||||
{say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))">
|
||||
<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.clearData during link drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['data:text/plain,FAIL', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'],
|
||||
l = 0;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.clearData(dataTypes[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length > l)
|
||||
{say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p>
|
||||
<p>Drag link above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.clearData during block element drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:green;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'],
|
||||
l = 0;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.clearData(dataTypes[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length > l)
|
||||
{say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('p + div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/>
|
||||
<p>Drag green box above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.clearData during canvas drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'],
|
||||
l = 0;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.clearData(dataTypes[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length > l)
|
||||
{say('items.length (dragover) : FAIL' + event.dataTransfer.items.length)}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length < l)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas>
|
||||
</p>
|
||||
<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
<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();}
|
||||
data[1] = canvas.toDataURL('image/png');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.clearData and reload during block element drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:green;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.clearData(dataTypes[i]);}
|
||||
window.location.reload();}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('p + div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/>
|
||||
<p>Drag green box above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Clear datastore data during PNG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['data:text/plain,FAIL', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
event.dataTransfer.clearData();
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length != 0)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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 circle"/></p>
|
||||
<p>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Clear datastore data during SVG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['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', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
event.dataTransfer.clearData();
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length != 0)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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>Drag circle above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Clear datastore data during text input selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
event.dataTransfer.clearData();
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length != 0)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="document.querySelector('input').select()">
|
||||
<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Clear datastore data during selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'],
|
||||
l = 0;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
event.dataTransfer.clearData();
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length != 0)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))">
|
||||
<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Clear datastore data during link drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['data:text/plain,FAIL', 'FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
event.dataTransfer.clearData();
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length != 0)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p>
|
||||
<p>Drag link above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Clear datastore data during block element drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:green;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
event.dataTransfer.clearData();
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length != 0)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('p + div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/>
|
||||
<p>Drag green box above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Clear datastore data during canvas drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['FAIL', 'data:text/plain,FAIL', '<result>FAIL</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">FAIL</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>FAIL</p></body></html>', 'FAIL'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
l = event.dataTransfer.items.length;
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
event.dataTransfer.clearData();
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length != 0)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length == 0)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == '')?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas>
|
||||
</p>
|
||||
<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
<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();}
|
||||
data[1] = canvas.toDataURL('image/png');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items during canvas drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas>
|
||||
</p>
|
||||
<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
<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();}
|
||||
data[1] = canvas.toDataURL('image/png');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items during PNG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['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==', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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 circle"/></p>
|
||||
<p>Drag circle above to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items during SVG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['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', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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>Drag circle above to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items during text input selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="document.querySelector('input').select()">
|
||||
<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items during selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))">
|
||||
<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items during link drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p>
|
||||
<p>Drag link above to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items during block element drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:green;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{if(dataTypes.indexOf(event.dataTransfer.items[i-1].type) == -1)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('p + div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/>
|
||||
<p>Drag green box above to the gray box below and drop it. Gray box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items and getData during canvas drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas>
|
||||
</p>
|
||||
<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
<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();}
|
||||
data[1] = canvas.toDataURL('image/png');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items and getData during PNG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['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==', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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 circle"/></p>
|
||||
<p>Drag circle above to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items and getData during SVG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['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', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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>Drag circle above to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items and getData during text input selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="document.querySelector('input').select()">
|
||||
<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items and getData during selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))">
|
||||
<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items and getData during link drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p>
|
||||
<p>Drag link above to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.items and getData during block element drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:green;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('p + div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/>
|
||||
<p>Drag green box above to the gray box below and drop it. Gray box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Text and url aliases</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:green;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text', 'url', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('p + div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/>
|
||||
<p>Drag green box above to the gray box below and drop it. Gray box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.types during canvas drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<canvas width="100" height="100" draggable="true" ondragstart="start(event)" ondrag="dragElement(event)">Canvas</canvas>
|
||||
</p>
|
||||
<p>Drag canvas pattern to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
<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();}
|
||||
data[1] = canvas.toDataURL('image/png');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.types during PNG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['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==', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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 circle"/></p>
|
||||
<p>Drag circle above to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.types during SVG image drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['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', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><img ondragstart="start(event)" ondrag="dragElement(event)" 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>Drag circle above to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.types during text input selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="document.querySelector('input').select()">
|
||||
<p><input value="Drag me" ondragstart="start(event)" ondrag="dragElement(event)"/></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.types during selection drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))">
|
||||
<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.types during link drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = event.dataTransfer.items.length; i != 0; i--)
|
||||
{delete event.dataTransfer.items[i-1]}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p>
|
||||
<p>Drag link above to the silver box below and drop it. Silver box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>dataTransfer.types during block element drag and drop</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:green;}
|
||||
p + div
|
||||
{background-color:gray;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'],
|
||||
e = 0, result = true;
|
||||
function start(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.items.add(data[i],dataTypes[i])}
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragstart) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondragstart): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragstart): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragstart): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragstart): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dragElement(event)
|
||||
{event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrag) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrag): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrag): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrag): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragenter) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragenter): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragenter): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragenter): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to drag event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function overElement(event)
|
||||
{event.preventDefault();
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondragover) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondragover): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondragover): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondragover): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should not reveal data to dragover event handler)')}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
function dataDrop(event)
|
||||
{e = 0;
|
||||
event.dataTransfer.items.clear();
|
||||
if(event.dataTransfer.items.length != dataTypes.length)
|
||||
{say('items.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
if(event.dataTransfer.types.length != dataTypes.length)
|
||||
{say('types.length (ondrop) : FAIL (items.length should be' + dataTypes.length + ')')}
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{if(event.dataTransfer.types[i] != dataTypes[i])
|
||||
{say('Types (ondrop): FAIL (dataTransfer.types[' + i + '] returns wrong value)')}
|
||||
if(event.dataTransfer.getData(dataTypes[i]) != data[i])
|
||||
{say('getData (ondrop): FAIL (getData(' + dataTypes[i] + ') returns wrong data)')}
|
||||
}
|
||||
for(var i = 0; i != event.dataTransfer.items.length; i++)
|
||||
{delete event.dataTransfer.items[i];
|
||||
if(event.dataTransfer.items[i].kind != 'string')
|
||||
{say('Item kind (ondrop): FAIL (items[' + i + '].kind should be string)')}
|
||||
if(event.dataTransfer.items[i].type != dataTypes[i])
|
||||
{say('Item type (ondrop): FAIL (items[' + i + '].type should be' + dataTypes[i] + ')')}
|
||||
event.dataTransfer.items[i].getAsString(
|
||||
function ()
|
||||
{if(arguments[0] != data[e++])
|
||||
{say('getAsString : FAIL (items[' + i + '].getAsString should pass' + data[e] + ')')}
|
||||
}
|
||||
);
|
||||
}
|
||||
document.querySelector('p + div').setAttribute('style','background-color:' + (result?'green':'red'));}
|
||||
function say(it)
|
||||
{result = false;
|
||||
document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true" ondragstart="start(event)" ondrag="dragElement(event)"/>
|
||||
<p>Drag green box above to the gray box below and drop it. Gray box should turn green.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="overElement(event)" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Adding a file to dnd data store</title>
|
||||
<style type="text/css">
|
||||
span { display: inline-block; height: 100px; width: 100px; background: orange; }
|
||||
span + span { background: blue; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var drag = document.getElementsByTagName('span')[0];
|
||||
drag.ondragstart = function (e) {
|
||||
e.dataTransfer.setData('text','PASS');
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
var filein = document.getElementsByTagName('input')[0];
|
||||
if( !filein.files ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.';
|
||||
return;
|
||||
}
|
||||
if( !filein.files[0] ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.';
|
||||
return;
|
||||
}
|
||||
var thefile = filein.files[0];
|
||||
try {
|
||||
e.dataTransfer.items.add(thefile);
|
||||
} catch(err) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if( e.dataTransfer.files.length != 1 ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
};
|
||||
var drop = document.getElementsByTagName('span')[1];
|
||||
drop.ondragenter = drop.ondragover = function (e) {
|
||||
e.preventDefault();
|
||||
};
|
||||
drop.ondrop = function (e) {
|
||||
e.preventDefault();
|
||||
if( document.getElementsByTagName('p')[0].innerHTML ) { return; }
|
||||
if( e.dataTransfer.files.length != 1 ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store during drop';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if( !window.FileReader ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'No FileReader constructor';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
var reader = new FileReader();
|
||||
reader.onload = function () {
|
||||
if( !reader.result ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'No file data after load';
|
||||
} else if( !document.getElementsByTagName('p')[0].innerHTML ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'PASS';
|
||||
}
|
||||
};
|
||||
reader.readAsBinaryString(e.dataTransfer.files[0]);
|
||||
setTimeout(function () {
|
||||
if( !reader.result ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'No file data after timeout';
|
||||
}
|
||||
},1000);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Select a non-empty file on your computer using the following input: <input type="file"></li>
|
||||
<li>Drag the orange square onto the blue square and release it:<br><span draggable="true"></span> <span></span><br>
|
||||
If a prompt appears, accept it.</li>
|
||||
<li>Fail if new text does not appear below.</li>
|
||||
</ol>
|
||||
<p></p>
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Adding a file to dnd data store with drag out of window</title>
|
||||
<style type="text/css">
|
||||
span { display: inline-block; height: 100px; width: 100px; background: orange; }
|
||||
span + span { background: blue; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var drag = document.getElementsByTagName('span')[0];
|
||||
drag.ondragstart = function (e) {
|
||||
e.dataTransfer.setData('text','PASS');
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
var filein = document.getElementsByTagName('input')[0];
|
||||
if( !filein.files ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.';
|
||||
return;
|
||||
}
|
||||
if( !filein.files[0] ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.';
|
||||
return;
|
||||
}
|
||||
var thefile = filein.files[0];
|
||||
try {
|
||||
e.dataTransfer.items.add(thefile);
|
||||
} catch(err) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if( e.dataTransfer.files.length != 1 ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
};
|
||||
var drop = document.getElementsByTagName('span')[1];
|
||||
drop.ondragenter = drop.ondragover = function (e) {
|
||||
e.preventDefault();
|
||||
};
|
||||
drop.ondrop = function (e) {
|
||||
e.preventDefault();
|
||||
if( document.getElementsByTagName('p')[0].innerHTML ) { return; }
|
||||
if( e.dataTransfer.files.length != 1 ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store during drop';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if( !window.FileReader ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'No FileReader constructor';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
var reader = new FileReader();
|
||||
reader.onload = function () {
|
||||
if( !reader.result ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'No file data after load';
|
||||
} else if( !document.getElementsByTagName('p')[0].innerHTML ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'PASS';
|
||||
}
|
||||
};
|
||||
reader.readAsBinaryString(e.dataTransfer.files[0]);
|
||||
setTimeout(function () {
|
||||
if( !reader.result ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'No file data after timeout';
|
||||
}
|
||||
},1000);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Select a non-empty file on your computer using the following input: <input type="file"></li>
|
||||
<li>Drag the orange square outside the browser window (not over the taskbar), then back onto the blue square and release it:<br><span draggable="true"></span> <span></span><br>
|
||||
If a prompt appears, accept it.</li>
|
||||
<li>Fail if new text does not appear below.</li>
|
||||
</ol>
|
||||
<p></p>
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>text/uri-list conversion</title>
|
||||
<style type="text/css">
|
||||
div { height: 100px; width: 100px; background: orange; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var drag = document.getElementsByTagName('div')[0], fails = [];
|
||||
drag.ondragstart = function (e) {
|
||||
e.dataTransfer.setData('url','http://example.com/');
|
||||
if( !e.dataTransfer.getData('url') ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = "FAIL - getData('url') returned nothing";
|
||||
} else if( e.dataTransfer.getData('url') != e.dataTransfer.getData('text/uri-list') ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - text/uri-list is not the same as url';
|
||||
} else {
|
||||
|
||||
e.dataTransfer.setData('url','#foo\r\n http://example.com/#bar \r\n http://example.org/');
|
||||
if( e.dataTransfer.getData('url') != 'http://example.com/#bar' ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - only the first URL should be returned - "'+e.dataTransfer.getData('url')+'"';
|
||||
} else if( e.dataTransfer.getData('text/uri-list') != '#foo\r\n http://example.com/#bar \r\n http://example.org/' ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - text/uri-list should return the full data';
|
||||
} else {
|
||||
|
||||
e.dataTransfer.setData('url',' ');
|
||||
if( e.dataTransfer.getData('url') ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - space was not a valid URL so an empty string should have been returned';
|
||||
} else {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'PASS';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
e.preventDefault();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div draggable="true"></div>
|
||||
<p>Attempt to drag the orange square.</p>
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Caseinsensitivity in dataTransfer.setData/getData</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
background-color:silver;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/uri-list', 'text/plain', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['data:text/plain,1', 'PASS', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData((i%2 == 0)?(dataTypes[i].toUpperCase()):(dataTypes[i].replace(/i/g,'I')), data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData((i%2 == 0)?(dataTypes[i].replace(/t/g,'T')):(dataTypes[i].toUpperCase())) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="data:text/plain,1" ondragstart="start(event)" ondrag="dragElement(event)">Drag me</a></p>
|
||||
<p>Drag link above to the silver box below and drop it. Silver box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Various data item type strings in dataTransfer.setData/getData</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{min-height:100px;
|
||||
width:100px;
|
||||
padding:20px;
|
||||
color:white;
|
||||
background-color:navy;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'http://', '<?xml version="1.0" encoding="utf-8"?>', '<html xmlns="http://www.w3.org/1999/xhtml"/>', '<mn>1</mn>', '☺', 'type="text/html"', '[({#;:,.`~*-_=+\|/%!?&$@^})]'],
|
||||
data = ['Drag me', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function start(event)
|
||||
{event.dataTransfer.effectAllowed = 'copy';
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], data[i]);}
|
||||
say('items.length (dragstart) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
}
|
||||
function dragElement(event)
|
||||
{for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during drag)')}
|
||||
}
|
||||
if(event.dataTransfer.items.length < dataTypes.length)
|
||||
{say('items.length (dragover) : FAIL')}
|
||||
}
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(string' + i + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('div').setAttribute('style','background-color:green');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body onload="window.getSelection().selectAllChildren(document.querySelector('span'))">
|
||||
<p><span ondragstart="start(event)" ondrag="dragElement(event)">Drag me</span></p>
|
||||
<p>Drag selection above to the navy box below and drop it. Navy box should turn green and test results should appear below.</p>
|
||||
<div ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)"/>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dropping file into dropzone</title>
|
||||
<style type="text/css">
|
||||
span { display: inline-block; height: 100px; width: 100px; background: orange; }
|
||||
span + span { background: blue; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var drag = document.getElementsByTagName('span')[0];
|
||||
drag.ondragstart = function (e) {
|
||||
e.dataTransfer.setData('text','PASS');
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
var filein = document.getElementsByTagName('input')[0];
|
||||
if( !filein.files ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.';
|
||||
return;
|
||||
}
|
||||
if( !filein.files[0] ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.';
|
||||
return;
|
||||
}
|
||||
var thefile = filein.files[0];
|
||||
try {
|
||||
e.dataTransfer.items.add(thefile);
|
||||
} catch(err) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if( e.dataTransfer.files.length != 1 ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
};
|
||||
document.getElementsByTagName('span')[1].ondrop = function (e) {
|
||||
e.preventDefault();
|
||||
if( document.getElementsByTagName('p')[0].innerHTML ) { return; }
|
||||
if( e.dataTransfer.files.length != 1 ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store during drop';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if( !window.FileReader ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'No FileReader constructor';
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
var reader = new FileReader();
|
||||
reader.onload = function () {
|
||||
if( !reader.result ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'No file data after load';
|
||||
} else if( !document.getElementsByTagName('p')[0].innerHTML ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'PASS';
|
||||
}
|
||||
};
|
||||
reader.readAsBinaryString(e.dataTransfer.files[0]);
|
||||
setTimeout(function () {
|
||||
if( !reader.result ) {
|
||||
document.getElementsByTagName('p')[0].innerHTML = 'No file data after timeout';
|
||||
}
|
||||
},1000);
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>Select a non-empty plain text file on your computer using the following input: <input type="file"></li>
|
||||
<li>Drag the orange square onto the blue square and release it:<br><span draggable="true"></span> <span dropzone="copy file:text/plain"></span><br>
|
||||
If a prompt appears, accept it.</li>
|
||||
<li>Fail if new text does not appear below.</li>
|
||||
</ol>
|
||||
<p></p>
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Drag and drop datastore: helper file</title>
|
||||
<style type="text/css">
|
||||
html, body
|
||||
{height:100%;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
<![CDATA[
|
||||
var dataTypes = ['text/plain', 'text/uri-list', 'application/xml', 'application/xhtml+xml', 'application/mathml+xml', 'image/svg+xml', 'text/html', 'text/x-example'],
|
||||
data = ['PASS', 'data:text/plain,1', '<result>PASS</result>', '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Data store item</title></head><body><p>PASS</p></body></html>', '<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>1</mn></math>', '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" viewBox="0 0 100 50"><text x="0" y="40" font-size="40" fill="green">PASS</text></svg>', '<!DOCTYPE html><html><head><title>Data store item</title></head><body><p>PASS</p></body></html>', 'PASS'];
|
||||
function enterElement(event)
|
||||
{event.preventDefault();
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{event.dataTransfer.setData(dataTypes[i], 'FAIL');
|
||||
if(event.dataTransfer.getData(dataTypes[i]))
|
||||
{say('getData(' + dataTypes[i] + ') : FAIL (data store should not be readable during dragenter)')}
|
||||
}
|
||||
say('items.length (dragenter) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));}
|
||||
function dataDrop(event)
|
||||
{say('items.length (drop) : ' + ((event.dataTransfer.items.length >= dataTypes.length)?'PASS':'FAIL'));
|
||||
for(var i = 0; i != dataTypes.length; i++)
|
||||
{say('getData(' + dataTypes[i] + ') : ' + ((event.dataTransfer.getData(dataTypes[i]) == data[i])?'PASS':'FAIL'));}
|
||||
document.querySelector('body').setAttribute('style','background-color:teal;color:white;');}
|
||||
function say(it)
|
||||
{document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));}
|
||||
]]>
|
||||
</script>
|
||||
</head>
|
||||
<body ondragenter="enterElement(event)" ondragover="return false;" ondrop="dataDrop(event)">
|
||||
<p>Drop box here. Frame should turn green and test results should appear below.</p>
|
||||
<pre/>
|
||||
</body>
|
||||
</html>
|
||||
207
tests/wpt/web-platform-tests/html/editing/dnd/dom/draggable.html
Normal file
207
tests/wpt/web-platform-tests/html/editing/dnd/dom/draggable.html
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset='utf-8'>
|
||||
<title>drag & drop – draggable attribute</title>
|
||||
<style>div#test_elements { display: none; }</style>
|
||||
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
|
||||
<noscript><p>Enable JavaScript and reload.</p></noscript>
|
||||
|
||||
<div id='log'></div>
|
||||
|
||||
<div id='test_elements'>
|
||||
|
||||
<div id='defaults'>
|
||||
<a href='#'>.</a>
|
||||
<div></div>
|
||||
<img src='../resources/1x1-transparent.gif'>
|
||||
</div>
|
||||
|
||||
<div id='draggable'>
|
||||
<a draggable='true' href='#'>.</a>
|
||||
<div draggable='true'></div>
|
||||
<img draggable='true' src='../resources/1x1-transparent.gif'>
|
||||
</div>
|
||||
|
||||
<div id='draggable_false'>
|
||||
<a draggable='false' href='#'>.</a>
|
||||
<div draggable='false'></div>
|
||||
<img draggable='false' src='../resources/1x1-transparent.gif'>
|
||||
</div>
|
||||
|
||||
<div id='draggable_auto'>
|
||||
<a draggable='auto' href='#'>.</a>
|
||||
<div draggable='auto'></div>
|
||||
<img draggable='auto' src='../resources/1x1-transparent.gif'>
|
||||
</div>
|
||||
|
||||
<div id='draggable_foo'>
|
||||
<a draggable='foo' href='#'>.</a>
|
||||
<div draggable='foo'></div>
|
||||
<img draggable='foo' src='../resources/1x1-transparent.gif'>
|
||||
</div>
|
||||
|
||||
<div id='changable_true'>
|
||||
<a href='#'>.</a>
|
||||
<div></div>
|
||||
<img src='../resources/1x1-transparent.gif'>
|
||||
</div>
|
||||
|
||||
<div id='changable_false'>
|
||||
<a href='#'>.</a>
|
||||
<div></div>
|
||||
<img src='../resources/1x1-transparent.gif'>
|
||||
</div>
|
||||
|
||||
<div id='changable_foo'>
|
||||
<a href='#'>.</a>
|
||||
<div></div>
|
||||
<img src='../resources/1x1-transparent.gif'>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var foo = document.getElementById('foo');
|
||||
|
||||
/* Does the .draggable property exist? */
|
||||
test(function () {
|
||||
assert_idl_attribute(document.querySelector('#defaults a'), 'draggable');
|
||||
}, 'an <a> element should have a draggable property');
|
||||
|
||||
test(function () {
|
||||
assert_idl_attribute(document.querySelector('#defaults div'), 'draggable');
|
||||
}, 'a <div> element should have a draggable property');
|
||||
|
||||
test(function () {
|
||||
assert_idl_attribute(document.querySelector('#defaults img'), 'draggable');
|
||||
}, 'an <img> element should have a draggable property');
|
||||
|
||||
|
||||
/* Check the default values on different types of elements */
|
||||
test(function () {
|
||||
assert_true(document.querySelector('#defaults a').draggable);
|
||||
}, 'an <a> element should be draggable by default');
|
||||
|
||||
test(function () {
|
||||
assert_false(document.querySelector('#defaults div').draggable);
|
||||
}, 'a <div> element should not be draggable by default');
|
||||
|
||||
test(function () {
|
||||
assert_true(document.querySelector('#defaults img').draggable);
|
||||
}, 'an <img> element should be draggable by default');
|
||||
|
||||
|
||||
/* If draggable="true" is set, all the elements should be draggable */
|
||||
test(function () {
|
||||
assert_true(document.querySelector('#draggable a').draggable);
|
||||
}, 'an <a> element with draggable="true" should be draggable');
|
||||
|
||||
test(function () {
|
||||
assert_true(document.querySelector('#draggable div').draggable);
|
||||
}, 'a <div> element with draggable="true" should be draggable');
|
||||
|
||||
test(function () {
|
||||
assert_true(document.querySelector('#draggable img').draggable);
|
||||
}, 'an <img> element with draggable="true" should be draggable');
|
||||
|
||||
|
||||
/* If draggable="false" is set, none of the elements should be draggable */
|
||||
test(function () {
|
||||
assert_false(document.querySelector('#draggable_false a').draggable);
|
||||
}, 'an <a> element with draggable="false" should not be draggable');
|
||||
|
||||
test(function () {
|
||||
assert_false(document.querySelector('#draggable_false div').draggable);
|
||||
}, 'a <div> element with draggable="false" should not be draggable');
|
||||
|
||||
test(function () {
|
||||
assert_false(document.querySelector('#draggable_false img').draggable);
|
||||
}, 'an <img> element with draggable="false" should not be draggable');
|
||||
|
||||
|
||||
/* If draggable="auto" is set, fall back to the defaults */
|
||||
test(function () {
|
||||
assert_true(document.querySelector('#draggable_auto a').draggable);
|
||||
}, 'an <a> element with draggable="auto" should be draggable');
|
||||
|
||||
test(function () {
|
||||
assert_false(document.querySelector('#draggable_auto div').draggable);
|
||||
}, 'a <div> element with draggable="auto" should not be draggable');
|
||||
|
||||
test(function () {
|
||||
assert_true(document.querySelector('#draggable_auto img').draggable);
|
||||
}, 'an <img> element with draggable="auto" should be draggable');
|
||||
|
||||
|
||||
/* If draggable="foo" is set, fall back to the defaults */
|
||||
test(function () {
|
||||
assert_true(document.querySelector('#draggable_foo a').draggable);
|
||||
}, 'an <a> element with draggable="foo" should be draggable');
|
||||
|
||||
test(function () {
|
||||
assert_false(document.querySelector('#draggable_foo div').draggable);
|
||||
}, 'a <div> element with draggable="foo" should not be draggable');
|
||||
|
||||
test(function () {
|
||||
assert_true(document.querySelector('#draggable_foo img').draggable);
|
||||
}, 'an <img> element with draggable="foo" should be draggable');
|
||||
|
||||
|
||||
/* Setting the element.droppable attribute to true for all elements */
|
||||
test(function () {
|
||||
document.querySelector('#changable_true a').draggable = true;
|
||||
assert_true(document.querySelector('#changable_true a').draggable);
|
||||
}, 'an <a> element with the draggable property set to true through a script should be draggable');
|
||||
|
||||
test(function () {
|
||||
document.querySelector('#changable_true div').draggable = true;
|
||||
assert_true(document.querySelector('#changable_true div').draggable);
|
||||
}, 'a <div> element with the draggable property set to true through a script should be draggable');
|
||||
|
||||
test(function () {
|
||||
document.querySelector('#changable_true img').draggable = true;
|
||||
assert_true(document.querySelector('#changable_true img').draggable);
|
||||
}, 'an <img> element with the draggable property set to true through a script should be draggable');
|
||||
|
||||
|
||||
/* Setting the element.droppable attribute to false for all elements */
|
||||
test(function () {
|
||||
document.querySelector('#changable_false a').draggable = false;
|
||||
assert_false(document.querySelector('#changable_false a').draggable);
|
||||
}, 'an <a> element with the draggable property set to false through a script should not be draggable');
|
||||
|
||||
test(function () {
|
||||
document.querySelector('#changable_false div').draggable = false;
|
||||
assert_false(document.querySelector('#changable_false div').draggable);
|
||||
}, 'a <div> element with the draggable property set to false through a script should not be draggable');
|
||||
|
||||
test(function () {
|
||||
document.querySelector('#changable_false img').draggable = false;
|
||||
assert_false(document.querySelector('#changable_false img').draggable);
|
||||
}, 'an <img> element with the draggable property set to false through a script should not be draggable');
|
||||
|
||||
|
||||
/* Setting the element.droppable attribute to "foo" for all elements */
|
||||
test(function () {
|
||||
document.querySelector('#changable_foo a').draggable = 'foo';
|
||||
assert_true(document.querySelector('#changable_foo a').draggable);
|
||||
}, 'an <a> element with the draggable property set to "foo" through a script should be draggable');
|
||||
|
||||
test(function () {
|
||||
document.querySelector('#changable_foo div').draggable = 'auto';
|
||||
assert_true(document.querySelector('#changable_foo div').draggable);
|
||||
}, 'a <div> element with the draggable property set to "foo" through a script should be draggable');
|
||||
|
||||
test(function () {
|
||||
document.querySelector('#changable_foo img').draggable = 'foo';
|
||||
assert_true(document.querySelector('#changable_foo img').draggable);
|
||||
}, 'an <img> element with the draggable property set to "foo" through a script should be draggable');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset='utf-8'>
|
||||
<title>drag & drop – events</title>
|
||||
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
|
||||
|
||||
<noscript><p>Enable JavaScript and reload.</p></noscript>
|
||||
|
||||
<div id='log'></div>
|
||||
|
||||
<script>
|
||||
|
||||
var element = document.createElement('div');
|
||||
|
||||
test(function () {
|
||||
assert_equals(element.ondragstart, null);
|
||||
}, 'element.ondragstart initial value');
|
||||
|
||||
test(function () {
|
||||
assert_equals(element.ondrag, null);
|
||||
}, 'element.ondrag must initial value');
|
||||
|
||||
test(function () {
|
||||
assert_equals(element.ondragenter, null);
|
||||
}, 'element.ondragenter initial value');
|
||||
|
||||
test(function () {
|
||||
assert_equals(element.ondragleave, null);
|
||||
}, 'element.ondragleave initial value');
|
||||
|
||||
test(function () {
|
||||
assert_equals(element.ondragover, null);
|
||||
}, 'element.ondragover initial value');
|
||||
|
||||
test(function () {
|
||||
assert_equals(element.ondrop, null);
|
||||
}, 'element.ondrop initial value');
|
||||
|
||||
test(function () {
|
||||
assert_equals(element.ondragend, null);
|
||||
}, 'element.ondragend initial value');
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Exposing drag & drop events on document and window</title>
|
||||
<script type="text/javascript" src="/resources/testharness.js"></script>
|
||||
<script type="text/javascript" src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log">Enable script and reload</div>
|
||||
<script type="text/javascript">
|
||||
var allEvents = ['ondragstart','ondrag','ondragover','ondragenter','ondragleave','ondrop','ondragend'];
|
||||
var allObjects = [['window',window],['document',document],['HTMLElement',document.createElement('div')]];
|
||||
var fails = [];
|
||||
for( var i = 0; i < allObjects.length; i++ ) {
|
||||
for( var j = 0; j < allEvents.length; j++ ) {
|
||||
test(function () {
|
||||
assert_true(allEvents[j] in allObjects[i][1]);
|
||||
}, allEvents[j] + ' in ' + allObjects[i][0]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPe html>
|
||||
<meta charset='utf-8'>
|
||||
<title>drag and drop – draggable area boundaries, border-radius</title>
|
||||
<style>
|
||||
a {
|
||||
display: block;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
border-radius: 100px;
|
||||
}
|
||||
div {
|
||||
border: 1px solid black;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ol>
|
||||
<li>Try dragging the white area within the black square, outside the blue
|
||||
circle. It should <em>not</em> be draggable.</li>
|
||||
<li>Drag the blue circle below. It should be draggable.</li>
|
||||
</ol>
|
||||
|
||||
<div><a draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a></div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPe html>
|
||||
<meta charset='utf-8'>
|
||||
<title>drag and drop – draggable areas – border</title>
|
||||
<style>
|
||||
a {
|
||||
display: block;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
border: 10px solid orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Try dragging the orange border of the blue box below, in a downwards direction. It should be draggable.</p>
|
||||
|
||||
<a href='#' draggable="true" ondragstart="event.dataTransfer.effectAllowed ='copy'"></a>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue