mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
Update web-platform-tests to revision e03a9b1341ae9bdb1e4fa03765257b84d26fe2f1
This commit is contained in:
Josh Matthews
parent
7d05c76d18
commit
20a833eb75
5167 changed files with 4696 additions and 297370 deletions
|
|
@ -0,0 +1,62 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: Fire drag event when dragging a div element</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/>
|
||||
<meta name="assert" content="Fire drag event when dragging a div element"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var EVENT, TARGET;
|
||||
|
||||
function DragEvent(evt)
|
||||
{
|
||||
if ((TARGET == evt.target) && (EVENT == evt.type))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
|
||||
EVENT = "drag";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET = document.getElementById("target");
|
||||
AddEventListenersForElement(EVENT, DragEvent, false, TARGET);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: Fire drag event when dragging a div element</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Click and drag the red box
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model
|
||||
</p>
|
||||
<p>
|
||||
If the user agent is still performing the previous iteration of the sequence (if any) when the next iteration becomes due, abort these steps for this iteration (effectively "skipping missed frames" of the drag-and-drop operation).
|
||||
Fire a DND event named drag event at the source node. If this event is canceled, the user agent must set the current drag operation to "none" (no drag operation).
|
||||
</p>
|
||||
<div id="target" style="border:2px red solid; width:200px; height:50px" draggable="true"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: Fire drag event during the drag and drop processing</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/>
|
||||
<meta name="assert" content="Fire drag event during the drag and drop processing"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var EVENT, TARGET;
|
||||
|
||||
function DragEvent(evt)
|
||||
{
|
||||
if ((TARGET == evt.target) && (EVENT == evt.type))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
|
||||
EVENT = "drag";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET = document.getElementById("target");
|
||||
AddEventListenersForElement(EVENT, DragEvent, false, TARGET);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: Fire drag event during the drag and drop processing</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Click and drag the blue image
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model
|
||||
</p>
|
||||
<p>
|
||||
If the user agent is still performing the previous iteration of the sequence (if any) when the next iteration becomes due, abort these steps for this iteration (effectively "skipping missed frames" of the drag-and-drop operation).
|
||||
Fire a DND event named drag event at the source node. If this event is canceled, the user agent must set the current drag operation to "none" (no drag operation).
|
||||
</p>
|
||||
<img src="/images/blue.png" style="width:200px; height:100px" draggable="true" id="target"/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: Fire dragend event during the drag and drop processing</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/>
|
||||
<meta name="assert" content="Fire dragend event during the drag and drop processing"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var EVENT, TARGET;
|
||||
|
||||
function DragendEvent(evt)
|
||||
{
|
||||
if ((TARGET == evt.target) && (EVENT == evt.type))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
|
||||
EVENT = "dragend";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET = document.getElementById("target");
|
||||
AddEventListenersForElement(EVENT, DragendEvent, false, TARGET);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: Fire dragend event during the drag and drop processing</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Drag the blue image
|
||||
<li> Drop it on the green box
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model
|
||||
</p>
|
||||
<p>
|
||||
If the drag operation failed or succeeded, fire a DND event named dragend at the source node.
|
||||
</p>
|
||||
<img src="/images/blue.png" style="width:200px; height:100px" draggable="true" id="target"/>
|
||||
<br /><br />
|
||||
<input type="text" style="border:2px green solid; width:200px; height:50px"></input>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: Fire dragenter event during the drag and drop processing</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/>
|
||||
<meta name="assert" content="Fire dragenter event during the drag and drop processing"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var EVENT, TARGET;
|
||||
|
||||
function DragenterEvent(evt)
|
||||
{
|
||||
if ((TARGET == evt.target) && (EVENT == evt.type))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
|
||||
EVENT = "dragenter";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET = document.getElementById("target");
|
||||
AddEventListenersForElement(EVENT, DragenterEvent, false, TARGET);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: Fire dragenter event during the drag and drop processing</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Select the text inside the red box
|
||||
<li> Drag it and enter the green box
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model
|
||||
</p>
|
||||
<p>
|
||||
If the user is indicating a different immediate user selection than during the last iteration (or if this is the first iteration), and if this immediate user selection is not the same as the current target element, then update the current target element as follows:
|
||||
- If the new immediate user selection is null, Set the current target element to null also.
|
||||
- If the new immediate user selection is in a non-DOM document or application, Set the current target element to the immediate user selection.
|
||||
- Otherwise, Fire a DND event named dragenter at the immediate user selection.
|
||||
</p>
|
||||
<div style="border:2px red solid; width:200px; height:50px">SampleText</div>
|
||||
<br /><br />
|
||||
<input type="text" id="target" style="border:2px green solid; width:200px; height:50px"></input>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: Fire dragleave event during the drag and drop processing</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/>
|
||||
<meta name="assert" content="Fire dragleave event during the drag and drop processing"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var EVENT, TARGET;
|
||||
|
||||
function DragleaveEvent(evt)
|
||||
{
|
||||
if ((TARGET == evt.target) && (EVENT == evt.type))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
|
||||
EVENT = "dragleave";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET = document.getElementById("target");
|
||||
AddEventListenersForElement(EVENT, DragleaveEvent, false, TARGET);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: Fire dragleave event during the drag and drop processing</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Select the text inside the red box
|
||||
<li> Drag it over the blue box and drop it on the green box
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model
|
||||
</p>
|
||||
<p>
|
||||
If there is a change in the current target element, and if the previous target element was not null or a part of a non-DOM document, then fire a DND event named dragleave at the previous target element.
|
||||
</p>
|
||||
<div style="border:2px red solid; width:100px">SampleText</div>
|
||||
<br />
|
||||
<div id="target" style="border:2px blue solid; width:200px; height:50px"></div>
|
||||
<br />
|
||||
<input type="text" style="border:2px green solid; width:200px; height:50px"></input>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: Fire dragover event during the drag and drop processing</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/>
|
||||
<meta name="assert" content="Fire dragover event during the drag and drop processing"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var EVENT, TARGET;
|
||||
|
||||
function DragoverEvent(evt)
|
||||
{
|
||||
if ((TARGET == evt.target) && (EVENT == evt.type))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
|
||||
EVENT = "dragover";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET = document.getElementById("target");
|
||||
AddEventListenersForElement(EVENT, DragoverEvent, false, TARGET);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: Fire dragover event during the drag and drop processing</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Select the text inside the red box.
|
||||
<li> Drag it, hover over the green box and then release the mouse
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model
|
||||
</p>
|
||||
<p>
|
||||
If the current target element is a DOM element, then fire a DND event named dragover at this current target element
|
||||
</p>
|
||||
<div style="border:2px red solid; width:100px">SampleText</div>
|
||||
<br /><br />
|
||||
<div id="target" style="border:2px green solid; width:200px; height:100px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: Fire dragstart event during the drag and drop processing</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/>
|
||||
<meta name="assert" content="Fire dragstart event during the drag and drop processing"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var EVENT, TARGET;
|
||||
|
||||
function DragstartEvent(evt)
|
||||
{
|
||||
if ((TARGET == evt.target) && (EVENT == evt.type))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
|
||||
EVENT = "dragstart";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET = document.getElementById("target");
|
||||
AddEventListenersForElement(EVENT, DragstartEvent, false, TARGET);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: Fire dragstart event during the drag and drop processing</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Click and drag the red box
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model
|
||||
</p>
|
||||
<p>
|
||||
If it is an element that is being dragged, then set the drag data store elements list to contain just the source node.
|
||||
Fire a DND event named dragstart at the source node.
|
||||
</p>
|
||||
<div id="target" style="border:2px red solid; width:200px; height:50px" draggable="true"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: Fire drop event during the drag and drop processing</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/>
|
||||
<meta name="assert" content="Fire drop event during the drag and drop processing"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var EVENT, TARGET;
|
||||
|
||||
function DropEvent(evt)
|
||||
{
|
||||
if ((TARGET == evt.target) && (EVENT == evt.type))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
|
||||
EVENT = "drop";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET = document.getElementById("target");
|
||||
AddEventListenersForElement(EVENT, DropEvent, false, TARGET);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: Fire drop event during the drag and drop processing</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Select the text inside the red box
|
||||
<li> Drag it and drop it on the green box
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model
|
||||
</p>
|
||||
<p>
|
||||
If the drag operation was a success, if the current target element is a DOM element, fire a DND event named drop at it.
|
||||
</p>
|
||||
<div style="border:2px red solid; width:100px">SampleText</div>
|
||||
<br /><br />
|
||||
<input type="text" id="target" style="border:2px green solid; width:200px; height:50px"></input>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
function AddEventListenersForElement(evt, callback, capture, element)
|
||||
{
|
||||
element.addEventListener(evt, callback, capture);
|
||||
}
|
||||
|
||||
function LogTestResult(result)
|
||||
{
|
||||
document.getElementById("test_result").firstChild.data = result;
|
||||
}
|
||||
0
tests/wpt/web-platform-tests/html/editing/dnd/the-datatransfer-interface/dndTransferCases-manual.html
Executable file → Normal file
0
tests/wpt/web-platform-tests/html/editing/dnd/the-datatransfer-interface/dndTransferCases-manual.html
Executable file → Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: Set a value to effectAllowed attribute</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/>
|
||||
<meta name="assert" content="Set a value to effectAllowed attribute"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var TARGETEVENT1, TARGETEVENT2, TARGET1, TARGET2;
|
||||
|
||||
function DragstartEvent(evt)
|
||||
{
|
||||
if ((TARGET1 == evt.target) && (TARGETEVENT1 == evt.type))
|
||||
{
|
||||
evt.dataTransfer.effectAllowed = "move";
|
||||
}
|
||||
}
|
||||
function DragenterEvent(evt)
|
||||
{
|
||||
if ((TARGET2 == evt.target) && (TARGETEVENT2 == evt.type))
|
||||
{
|
||||
if("move" == evt.dataTransfer.effectAllowed)
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TARGETEVENT1 = "dragstart";
|
||||
TARGETEVENT2 = "dragenter";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET1 = document.getElementById("target1");
|
||||
TARGET2 = document.getElementById("target2");
|
||||
AddEventListenersForElement(TARGETEVENT1, DragstartEvent, false, TARGET1);
|
||||
AddEventListenersForElement(TARGETEVENT2, DragenterEvent, false, TARGET2);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: Set a value to effectAllowed attribute</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Drag the blue image and enter the green box
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#datatransfer
|
||||
</p>
|
||||
<p>
|
||||
On setting, if the new value is one of "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", or "uninitialized", then the attribute's current value must be set to the new value.
|
||||
</p>
|
||||
<img src="/images/blue.png" style="width:200px; height:100px" draggable="true" id="target1"/>
|
||||
<br /><br />
|
||||
<input type="text" id="target2" style="border:2px green solid; width:200px; height:50px"></input>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: files attribute returns a FileList</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/>
|
||||
<meta name="assert" content="files attribute returns a FileList"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var EVENT, TARGET;
|
||||
|
||||
function DropEvent(evt)
|
||||
{
|
||||
if ((TARGET == evt.target) && (EVENT == evt.type))
|
||||
{
|
||||
var files = evt.dataTransfer.files;
|
||||
if(('[object FileList]' == files))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
|
||||
function DragenterEvent(evt)
|
||||
{
|
||||
evt.preventDefault();
|
||||
}
|
||||
|
||||
function DragoverEvent(evt)
|
||||
{
|
||||
evt.preventDefault();
|
||||
}
|
||||
|
||||
EVENT = "drop";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET = document.getElementById("target");
|
||||
AddEventListenersForElement(EVENT, DropEvent, false, TARGET);
|
||||
AddEventListenersForElement("dragenter", DragenterEvent, false, TARGET);
|
||||
AddEventListenersForElement("dragover", DragoverEvent, false, TARGET);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: files attribute returns a FileList</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Drag a file and drop it in the green box
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#datatransfer
|
||||
</p>
|
||||
<p>
|
||||
The files attribute must return a live FileList sequence consisting of File objects representing the files.
|
||||
</p>
|
||||
<textarea type="text" id="target" style="border:2px green solid; width:200px; height:50px"></textarea>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: Add an item to the drag data store item list whose data is the string given by setData method's second argument</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/>
|
||||
<meta name="assert" content="Add an item to the drag data store item list whose data is the string given by setData method's second argument"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var TARGETEVENT1, TARGETEVENT2, TARGET1, TARGET2;
|
||||
|
||||
function DragstartEvent(evt)
|
||||
{
|
||||
if ((TARGET1 == evt.target) && (TARGETEVENT1 == evt.type))
|
||||
{
|
||||
evt.dataTransfer.setData("text", "SetText");
|
||||
}
|
||||
}
|
||||
function DropEvent(evt)
|
||||
{
|
||||
if ((TARGET2 == evt.target) && (TARGETEVENT2 == evt.type))
|
||||
{
|
||||
if("SetText" == evt.dataTransfer.getData("text"))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TARGETEVENT1 = "dragstart";
|
||||
TARGETEVENT2 = "drop";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET1 = document.getElementById("target1");
|
||||
TARGET2 = document.getElementById("target2");
|
||||
AddEventListenersForElement(TARGETEVENT1, DragstartEvent, false, TARGET1);
|
||||
AddEventListenersForElement(TARGETEVENT2, DropEvent, false, TARGET2);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: Add an item to the drag data store item list whose data is the string given by setData method's second argument</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Drag the blue image and drop it in the green box
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#datatransfer
|
||||
</p>
|
||||
<p>
|
||||
If format equals "text", change it to "text/plain".
|
||||
Remove the item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to format, if there is one.
|
||||
Add an item to the drag data store item list whose kind is Plain Unicode string, whose type string is equal to format, and whose data is the string given by the method's second argument.
|
||||
</p>
|
||||
<img src="/images/blue.png" style="width:200px; height:100px" draggable="customValue2" id="target1"/>
|
||||
<br /><br />
|
||||
<input type="text" id="target2" style="border:2px green solid; width:200px; height:50px"></input>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Drag and Drop: types attribute returns a DOMStringList</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
|
||||
<link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/>
|
||||
<meta name="assert" content="types attribute returns a DOMStringList"/>
|
||||
<script src="../resources/dragdrop_support.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var EVENT, TARGET;
|
||||
|
||||
function DropEvent(evt)
|
||||
{
|
||||
if ((TARGET == evt.target) && (EVENT == evt.type))
|
||||
{
|
||||
var types = evt.dataTransfer.types;
|
||||
if(('[object DOMStringList]' == types))
|
||||
{
|
||||
LogTestResult("PASS");
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
LogTestResult("FAIL");
|
||||
}
|
||||
}
|
||||
|
||||
EVENT = "drop";
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
TARGET = document.getElementById("target");
|
||||
AddEventListenersForElement(EVENT, DropEvent, false, TARGET);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<pre>Description: types attribute returns a DOMStringList</pre>
|
||||
<table id='testtable' border='1'>
|
||||
<tr>
|
||||
<td>Test Result</td>
|
||||
<td>Test Assertion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='test_result'>Manual</td>
|
||||
<td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below.
|
||||
<div id="manualsteps">
|
||||
Steps:
|
||||
<ol>
|
||||
<li> Select the text inside the red box
|
||||
<li> Drag and drop it in the green box
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
http://dev.w3.org/html5/spec/dnd.html#datatransfer
|
||||
</p>
|
||||
<p>
|
||||
The types attribute must return a live DOMStringList.
|
||||
</p>
|
||||
<div style="border:2px red solid; width:200px; height:50px">SampleText</div>
|
||||
<br /><br />
|
||||
<input type="text" id="target" style="border:2px green solid; width:200px; height:50px"></input>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue