mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision 0d318188757a9c996e20b82db201fd04de5aa255
This commit is contained in:
parent
b2a5225831
commit
1a81b18b9f
12321 changed files with 544385 additions and 6 deletions
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Select input inside draggable element</title>
|
||||
<style type="text/css">
|
||||
select { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p>
|
||||
<div draggable="true">
|
||||
<select>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Select multiple input inside draggable element</title>
|
||||
<style type="text/css">
|
||||
select { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p>
|
||||
<div draggable="true">
|
||||
<select multiple size="3">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Draggable select</title>
|
||||
<style type="text/css">
|
||||
select { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('select')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p>
|
||||
<div>
|
||||
<select draggable="true">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Draggable select multiple</title>
|
||||
<style type="text/css">
|
||||
select { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('select')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p>
|
||||
<div>
|
||||
<select multiple size="3" draggable="true">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Text input inside draggable element</title>
|
||||
<style type="text/css">
|
||||
input { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should focus the dummy text. Use your mouse to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
|
||||
<div draggable="true">
|
||||
<input value="Dummy text">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Draggable text input</title>
|
||||
<style type="text/css">
|
||||
input { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('input')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should focus the dummy text. Use your mouse to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
|
||||
<div>
|
||||
<input value="Dummy text" draggable="true">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Textarea inside draggable element</title>
|
||||
<style type="text/css">
|
||||
textarea { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It may optionally focus the dummy text. Use your mouse to select part of the dummy text, moving the mouse vertically and horizontally. It should select the text. Try to drag the input's scrollbar thumb. It should <strong>not</strong> drag the block or text in any case.</p>
|
||||
<div draggable="true">
|
||||
<textarea rows="5" cols="50" wrap="off">Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Draggable textarea</title>
|
||||
<style type="text/css">
|
||||
textarea { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('textarea')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It may optionally focus the dummy text. Use your mouse to select part of the dummy text, moving the mouse vertically and horizontally. It should select the text. Try to drag the input's scrollbar thumb. It should <strong>not</strong> drag the block or text in any case.</p>
|
||||
<div>
|
||||
<textarea rows="5" cols="50" wrap="off">Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
Dummy text
|
||||
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Input button inside draggable element</title>
|
||||
<style type="text/css">
|
||||
input { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p>
|
||||
<div draggable="true">
|
||||
<input type="button" value="Dummy text">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Draggable input button</title>
|
||||
<style type="text/css">
|
||||
input { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('input')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p>
|
||||
<div>
|
||||
<input type="button" value="Dummy text" draggable="true">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Button inside draggable element</title>
|
||||
<style type="text/css">
|
||||
button { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p>
|
||||
<div draggable="true">
|
||||
<button>Dummy text</button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Draggable button</title>
|
||||
<style type="text/css">
|
||||
button { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('button')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the block or text.</p>
|
||||
<div>
|
||||
<button draggable="true">Dummy text</button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Contenteditable inside draggable element</title>
|
||||
<style type="text/css">
|
||||
div div { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the text or the orange block. Use your mouse to select the dummy text. It should <strong>not</strong> drag the text or the orange block.</p>
|
||||
<div draggable="true">
|
||||
<div contenteditable="true">Dummy text</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Draggable contenteditable element</title>
|
||||
<style type="text/css">
|
||||
div div { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[1].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. It should <strong>not</strong> drag the text or the orange block. Use your mouse to select the dummy text. It should <strong>not</strong> drag the text or the orange block.</p>
|
||||
<div>
|
||||
<div draggable="true" contenteditable="true">Dummy text</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Scrollable element inside draggable element</title>
|
||||
<style type="text/css">
|
||||
div div { width: 300px; height: 100px; overflow: auto; border: 1px solid orange; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>It should be possible to drag the scrollbar thumbs of the box below without dragging the whole box.</p>
|
||||
<div draggable="true">
|
||||
<div>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Draggable scrollable element</title>
|
||||
<style type="text/css">
|
||||
div div { width: 300px; height: 100px; overflow: auto; border: 1px solid orange; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[1].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>It should be possible to drag the scrollbar thumbs of the box below without dragging the whole box.</p>
|
||||
<div>
|
||||
<div draggable="true">Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>Dummy text<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Disabled text input with inside draggable element</title>
|
||||
<style type="text/css">
|
||||
input { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
|
||||
<div draggable="true">
|
||||
<input value="Dummy text" disabled>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Disabled draggable text input</title>
|
||||
<style type="text/css">
|
||||
input { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('input')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
|
||||
<div>
|
||||
<input value="Dummy text" draggable="true" disabled>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Readonly text input with inside draggable element</title>
|
||||
<style type="text/css">
|
||||
input { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('div')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
|
||||
<div draggable="true">
|
||||
<input value="Dummy text" readonly>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Readonly draggable text input</title>
|
||||
<style type="text/css">
|
||||
input { border: 1px solid orange; border-top-width: 20px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementsByTagName('input')[0].ondragstart = function (e) {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('Text', 'dummy text');
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
|
||||
<div>
|
||||
<input value="Dummy text" draggable="true" readonly>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue