mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +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,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Dropzone attribute: copy</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{background-color:navy;
|
||||
width:40px;
|
||||
height:40px;
|
||||
padding:40px;
|
||||
color:white;}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))">
|
||||
<p>Drag me</p>
|
||||
<div dropzone="copy string:text/plain" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'))"/>
|
||||
<p>You should be able to drag selection to navy box below. You should see word PASS once you drop it.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Dropzone attribute: move</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{background-color:navy;
|
||||
width:40px;
|
||||
height:40px;
|
||||
padding:40px;
|
||||
color:white;}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="document.querySelector('input').select()">
|
||||
<p><input value="Drag me"/></p>
|
||||
<div dropzone="move string:text/plain" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL'))"/>
|
||||
<p>You should be able to drag selection to navy box below. You should see word PASS once you drop it.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Dropzone attribute: link</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{background-color:navy;
|
||||
width:40px;
|
||||
height:40px;
|
||||
padding:40px;
|
||||
color:white;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="data:text/plain,1">Drag me</a></p>
|
||||
<div dropzone="link string:text/plain" ondrop="document.querySelector('div').appendChild(document.createTextNode((event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'') == 'data:text/plain,1')?'PASS':'FAIL'))"/>
|
||||
<p>You should be able to drag link to navy box below. You should see word PASS once you drop it.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Dropzone and link drag and drop: allowed effects 'link','copyLink','linkMove' and 'all'</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{background-color:gray;
|
||||
width:200px;
|
||||
height:200px;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
var effects = ['link','copyLink','linkMove','all'];
|
||||
function start(event)
|
||||
{var e = parseInt(event.target.href.substring(16));
|
||||
event.dataTransfer.effectAllowed = effects[e];}
|
||||
function finish(event)
|
||||
{var e = parseInt(event.dataTransfer.getData('text/uri-list').substring(16,17));
|
||||
document.querySelectorAll('a')[e].firstChild.nodeValue = (event.dataTransfer.dropEffect == 'link' && event.dataTransfer.effectAllowed == effects[e])?'PASS':'FAIL';}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Drag links one by one and drop them into gray box below, link text should be updated as you drop them.</p>
|
||||
<p ondragstart="start(event)">
|
||||
<a href="data:text/plain,0">Link</a>
|
||||
<a href="data:text/plain,1">Link</a>
|
||||
<a href="data:text/plain,2">Link</a>
|
||||
<a href="data:text/plain,3">Link</a>
|
||||
</p>
|
||||
<div dropzone="link string:text/uri-list" ondrop="finish(event)"/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Dropzone and link drag and drop: allowed effects 'copy','copyMove','copyLink' and 'all'</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{background-color:gray;
|
||||
width:200px;
|
||||
height:200px;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
var effects = ['copy','copyMove','copyLink','all'];
|
||||
function start(event)
|
||||
{var e = parseInt(event.target.href.substring(16));
|
||||
event.dataTransfer.effectAllowed = effects[e];}
|
||||
function finish(event)
|
||||
{var e = parseInt(event.dataTransfer.getData('text/uri-list').substring(16,17));
|
||||
document.querySelectorAll('a')[e].firstChild.nodeValue = (event.dataTransfer.dropEffect == 'copy' && event.dataTransfer.effectAllowed == effects[e])?'PASS':'FAIL';}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Drag links one by one and drop them into gray box below, link text should be updated as you drop them.</p>
|
||||
<p ondragstart="start(event)">
|
||||
<a href="data:text/plain,0">Link</a>
|
||||
<a href="data:text/plain,1">Link</a>
|
||||
<a href="data:text/plain,2">Link</a>
|
||||
<a href="data:text/plain,3">Link</a>
|
||||
</p>
|
||||
<div dropzone="copy string:text/uri-list" ondrop="finish(event)"/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Dropzone and link drag and drop: allowed effects 'move','copyMove','linkMove' and 'all'</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{background-color:gray;
|
||||
width:200px;
|
||||
height:200px;}
|
||||
</style>
|
||||
<script type="application/ecmascript">
|
||||
var effects = ['move','copyMove','linkMove','all'];
|
||||
function start(event)
|
||||
{var e = parseInt(event.target.href.substring(16));
|
||||
event.dataTransfer.effectAllowed = effects[e];}
|
||||
function finish(event)
|
||||
{var e = parseInt(event.dataTransfer.getData('text/uri-list').substring(16,17));
|
||||
document.querySelectorAll('a')[e].firstChild.nodeValue = (event.dataTransfer.dropEffect == 'move' && event.dataTransfer.effectAllowed == effects[e])?'PASS':'FAIL';}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Drag links one by one and drop them into gray box below, link text should be updated as you drop them.</p>
|
||||
<p ondragstart="start(event)">
|
||||
<a href="data:text/plain,0">Link</a>
|
||||
<a href="data:text/plain,1">Link</a>
|
||||
<a href="data:text/plain,2">Link</a>
|
||||
<a href="data:text/plain,3">Link</a>
|
||||
</p>
|
||||
<div dropzone="move string:text/uri-list" ondrop="finish(event)"/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dropzone should not affect the dropEffect seen by dragenter and dragover</title>
|
||||
<style type="text/css">
|
||||
div:first-child {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: orange;
|
||||
display: inline-block;
|
||||
}
|
||||
div:first-child + div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: blue;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var drag = document.getElementsByTagName('div')[0];
|
||||
drag.ondragstart = function (e) {
|
||||
e.dataTransfer.setData('text','hello');
|
||||
e.dataTransfer.effectAllowed = 'all';
|
||||
};
|
||||
var drop = document.getElementsByTagName('div')[1], dragenter, dragover;
|
||||
drop.ondragenter = function (e) {
|
||||
dragenter = e.dataTransfer.dropEffect;
|
||||
};
|
||||
drop.ondragover = function (e) {
|
||||
dragover = e.dataTransfer.dropEffect;
|
||||
};
|
||||
drop.ondrop = function (e) {
|
||||
var sequence = ([dragenter,dragover,e.dataTransfer.dropEffect]).join('=>')
|
||||
var desiredsequence = (['copy','copy','link']).join('=>')
|
||||
if( sequence == desiredsequence ) {
|
||||
document.getElementsByTagName('div')[2].innerHTML = 'PASS';
|
||||
} else {
|
||||
document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence;
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div draggable="true"></div>
|
||||
<div dropzone="link string:text/plain"></div>
|
||||
<div> </div>
|
||||
<p>Drag the orange square onto the blue square and release it.</p>
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dropzone should not affect the dropEffect if dragover is cancelled</title>
|
||||
<style type="text/css">
|
||||
div:first-child {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: orange;
|
||||
display: inline-block;
|
||||
}
|
||||
div:first-child + div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: blue;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var drag = document.getElementsByTagName('div')[0];
|
||||
drag.ondragstart = function (e) {
|
||||
e.dataTransfer.setData('text','hello');
|
||||
e.dataTransfer.effectAllowed = 'all';
|
||||
};
|
||||
var drop = document.getElementsByTagName('div')[1], dragenter, dragover;
|
||||
drop.ondragenter = function (e) {
|
||||
dragenter = e.dataTransfer.dropEffect;
|
||||
e.preventDefault();
|
||||
};
|
||||
drop.ondragover = function (e) {
|
||||
dragover = e.dataTransfer.dropEffect;
|
||||
e.preventDefault();
|
||||
};
|
||||
drop.ondrop = function (e) {
|
||||
var sequence = ([dragenter,dragover,e.dataTransfer.dropEffect]).join('=>')
|
||||
var desiredsequence = (['copy','copy','copy']).join('=>')
|
||||
if( sequence == desiredsequence ) {
|
||||
document.getElementsByTagName('div')[2].innerHTML = 'PASS';
|
||||
} else {
|
||||
document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence;
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div draggable="true"></div>
|
||||
<div dropzone="link string:text/plain"></div>
|
||||
<div> </div>
|
||||
<p>Drag the orange square onto the blue square and release it.</p>
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dropping selection onto dropzone with JS disabled</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ol>
|
||||
<li>Disable JavaScript</li>
|
||||
<li>Select some text in this sentence.</li>
|
||||
<li dropzone="copy string:text/plain">Drag the selection over this text.</li>
|
||||
<li>If supported by the platform, the mouse cursor should show the drop-allowed cursor.</li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dropping selection onto dropzone with no padding</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<noscript><p>Enable JavaScript and reload</p></noscript>
|
||||
<ol>
|
||||
<li>Select some text in this sentence.</li>
|
||||
<li dropzone="copy string:text/plain" ondrop="this.parentNode.getElementsByTagName('li')[2].textContent='PASS';">Drag the selection over this text and release it.</li>
|
||||
<li>This text should change.</li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue