mirror of
https://github.com/servo/servo.git
synced 2025-08-24 14:48:21 +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,32 @@
|
|||
<!doctype HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Canvas Test: isPointInPath() unaffected by the current transformation matrix</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-ispointinpath" />
|
||||
<meta name="assert" content="isPointInPath must check the point (x, y) as coordinates unaffected by the current transformation matrix." />
|
||||
<script type="text/javascript">
|
||||
function runTest()
|
||||
{
|
||||
var canvas = document.getElementById("canvas1");
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
// Create a path that is transformed by a translation transformation matrix.
|
||||
ctx.translate(100, 50);
|
||||
ctx.rect(0, 0, 100, 50);
|
||||
|
||||
// Ensure that the coordinates passed to isPointInPath are unaffected by the current transformation matrix.
|
||||
if (ctx.isPointInPath(125, 75) && !ctx.isPointInPath(25, 25))
|
||||
{
|
||||
document.getElementById("testresult").firstChild.data = "PASS";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="runTest();">
|
||||
<p>Description: isPointInPath must check the point (x, y) as coordinates unaffected by the current transformation matrix.</p>
|
||||
<p>Test passes if the word "PASS" appears below.</p>
|
||||
<div id="testresult">FAIL</div>
|
||||
<canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>canvas drawCustomFocusRing() step1 test</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="stylesheet" href="/resources/testharness.css" media="all">
|
||||
<link rel="author" title="Takeshi Kurosawa" href="mailto:kurosawa-takeshi@mitsue.co.jp">
|
||||
<link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawcustomfocusring">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>This test checks whether drawCustomFocusRing returns false if the element passed as an argument is not focused or is not a descendant of the element with whose context the method is associated.</p>
|
||||
<div id="log"></div>
|
||||
<div>
|
||||
<input type="text" id="text0">
|
||||
<canvas id="canvas"><input type="text" id="text1"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
test(function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var text0 = document.getElementById('text0');
|
||||
text0.focus(); // document.activeElement === text0;
|
||||
|
||||
var text1 = document.getElementById('text1');
|
||||
assert_false(context.drawCustomFocusRing(text1));
|
||||
}, 'drawCustomFocusRing must return false for an element that is not focused.');
|
||||
|
||||
test(function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var text0 = document.getElementById('text0');
|
||||
text0.focus(); // document.activeElement === text0;
|
||||
|
||||
assert_false(context.drawCustomFocusRing(text0));
|
||||
}, 'drawCustomFocusRing must return false for an element that is not a descendant of the canvas element.');
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>drawFocusIfNeeded() - AAPI test</title>
|
||||
<link rel="author" title="Mark Sadecki" href="mark@w3.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>This manual test can be used to verify that drawFocusIfNeeded actually updates the accessible location information (i.e. UIAutomation's CurrentBoundingRectangle) in the Accessibility API. To perform this test, you will need an <a href="http://www.w3.org/WAI/PF/wiki/ARIA_Test_Plan#Test_tools">accessibility API inspector</a>. To perform this test, use the <code>tab</code> key to move from the first focusable element to through to the fourth. This test passes if the first parameter of the bounding rectangle increases by 100 when focus is moved from the gray square to the orange square.</p>
|
||||
<p><a href="http://www.w3.org">First focusable element</a></p>
|
||||
<canvas height=100 width=200 id=canvas>
|
||||
<a href='http://www.w3.org' id='button1'>Second focusable element</a>
|
||||
<a href='http://www.w3.org' id='button2'>Third focusable element</a>
|
||||
</canvas>
|
||||
<p><a href="http://www.w3.org">Fourth focusable element</a></p>
|
||||
|
||||
<script>
|
||||
var button1 = document.getElementById('button1');
|
||||
var button2 = document.getElementById('button2');
|
||||
var canvas = document.getElementById('canvas');
|
||||
var buttons = canvas.getElementsByTagName('a');
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener('focus', drawCanvas, false);
|
||||
buttons[i].addEventListener('blur', drawCanvas, false);
|
||||
}
|
||||
|
||||
function drawRect(context, color, element) {
|
||||
context.beginPath();
|
||||
context.rect(10, 10, 80, 80);
|
||||
context.fillStyle = color;
|
||||
context.fill();
|
||||
context.drawFocusIfNeeded(element);
|
||||
}
|
||||
|
||||
function drawCanvas() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
context.clearRect (0, 0, 200, 100);
|
||||
|
||||
drawRect(context, "gray", button1);
|
||||
context.translate(100,0);
|
||||
drawRect(context, "orange", button2);
|
||||
}
|
||||
drawCanvas();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>drawFocusIfNeeded()</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="author" title="W3C">
|
||||
<link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>This test uses drawFocusIfNeeded to draw a focus ring in the canvas, then compare the ImageData before and after the invocation of the method to check that the focus ring was actually drawn.</p>
|
||||
<div>
|
||||
<p>Before:</p>
|
||||
<canvas height=100 width=100 id='original'>
|
||||
</canvas>
|
||||
<p>After:</p>
|
||||
<canvas height=100 width=100 id=canvas>
|
||||
<label><a href='http://www.w3.org' id='element'>Focus</a></label>
|
||||
</canvas>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var element = document.getElementById('element');
|
||||
element.focus();
|
||||
context.fillStyle = 'white';
|
||||
context.fillRect(0, 0, 100, 100);
|
||||
context.beginPath();
|
||||
context.strokeStyle = 'black';
|
||||
context.rect(10, 10, 80, 80);
|
||||
context.stroke();
|
||||
context.save();
|
||||
var refImage = context.getImageData(0, 0, 100, 100);
|
||||
|
||||
assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
|
||||
|
||||
var original = document.getElementById('original');
|
||||
var o_context = original.getContext('2d');
|
||||
o_context.fillStyle = 'white';
|
||||
o_context.fillRect(0, 0, 100, 100);
|
||||
o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
|
||||
|
||||
context.rect(5, 5, 90, 90);
|
||||
context.drawFocusIfNeeded(element);
|
||||
|
||||
var ringImage = context.getImageData(0, 0, 100, 100);
|
||||
assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
|
||||
|
||||
// make sure refImage and ringImage are different
|
||||
var length = 40000;
|
||||
var index = length;
|
||||
var identical = true;
|
||||
while (--index > 0) {
|
||||
if (refImage.data[index] != ringImage.data[index]) identical = false;
|
||||
}
|
||||
|
||||
assert_false(identical, "The focus ring must appear in the canvas");
|
||||
|
||||
|
||||
}, 'drawFocusIfNeeded draws a focus ring.');
|
||||
</script>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>drawFocusIfNeeded()</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="author" title="W3C">
|
||||
<link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>This test uses drawFocusIfNeeded does nothing if the element is not in focus but comparing ImageData from before and after.</p>
|
||||
<div>
|
||||
<p>Before:</p>
|
||||
<canvas height=100 width=100 id='original'>
|
||||
</canvas>
|
||||
<p>After:</p>
|
||||
<canvas height=100 width=100 id=canvas>
|
||||
<label><a href='http://www.w3.org' id='element'>Focus</a></label>
|
||||
</canvas>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var element = document.getElementById('element');
|
||||
context.fillStyle = 'white';
|
||||
context.fillRect(0, 0, 100, 100);
|
||||
context.beginPath();
|
||||
context.strokeStyle = 'black';
|
||||
context.rect(10, 10, 80, 80);
|
||||
context.stroke();
|
||||
context.save();
|
||||
var refImage = context.getImageData(0, 0, 100, 100);
|
||||
|
||||
assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
|
||||
|
||||
var original = document.getElementById('original');
|
||||
var o_context = original.getContext('2d');
|
||||
o_context.fillStyle = 'white';
|
||||
o_context.fillRect(0, 0, 100, 100);
|
||||
o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
|
||||
|
||||
|
||||
|
||||
context.strokeStyle = 'blue';
|
||||
context.rect(5, 5, 90, 90);
|
||||
context.drawFocusIfNeeded(element);
|
||||
|
||||
var ringImage = context.getImageData(0, 0, 100, 100);
|
||||
assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
|
||||
|
||||
// make sure refImage and ringImage are different
|
||||
var length = 40000;
|
||||
var index = length;
|
||||
var identical = true;
|
||||
while (--index > 0) {
|
||||
if (refImage.data[index] != ringImage.data[index]) identical = false;
|
||||
}
|
||||
|
||||
assert_true(identical, "No focus ring appears in the canvas");
|
||||
|
||||
|
||||
}, 'drawFocusIfNeeded does not draw a focus ring if the element is not in focus.');
|
||||
</script>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>drawFocusIfNeeded()</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="author" title="W3C">
|
||||
<link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>This test uses drawFocusIfNeeded does nothing if the element is not a descendant but comparing ImageData from before and after.</p>
|
||||
<div>
|
||||
<p>Before:</p>
|
||||
<canvas height=100 width=100 id='original'>
|
||||
<label><a href='http://www.w3.org' id='element'>Focus</a></label>
|
||||
</canvas>
|
||||
<p>After:</p>
|
||||
<canvas height=100 width=100 id=canvas>
|
||||
</canvas>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var element = document.getElementById('element');
|
||||
element.focus();
|
||||
context.fillStyle = 'white';
|
||||
context.fillRect(0, 0, 100, 100);
|
||||
context.beginPath();
|
||||
context.strokeStyle = 'black';
|
||||
context.rect(10, 10, 80, 80);
|
||||
context.stroke();
|
||||
context.save();
|
||||
var refImage = context.getImageData(0, 0, 100, 100);
|
||||
|
||||
assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
|
||||
|
||||
var original = document.getElementById('original');
|
||||
var o_context = original.getContext('2d');
|
||||
o_context.fillStyle = 'white';
|
||||
o_context.fillRect(0, 0, 100, 100);
|
||||
o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
|
||||
|
||||
|
||||
|
||||
context.strokeStyle = 'blue';
|
||||
context.rect(5, 5, 90, 90);
|
||||
context.drawFocusIfNeeded(element);
|
||||
|
||||
var ringImage = context.getImageData(0, 0, 100, 100);
|
||||
assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
|
||||
|
||||
// make sure refImage and ringImage are different
|
||||
var length = 40000;
|
||||
var index = length;
|
||||
var identical = true;
|
||||
while (--index > 0) {
|
||||
if (refImage.data[index] != ringImage.data[index]) identical = false;
|
||||
}
|
||||
|
||||
assert_true(identical, "No focus ring appears in the canvas");
|
||||
|
||||
|
||||
}, 'drawFocusIfNeeded does not draw a focus ring if the element is not a descendant of the context.');
|
||||
</script>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>drawFocusIfNeeded()</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="author" title="W3C">
|
||||
<link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>This test uses drawFocusIfNeeded to draw a complex path focus then compare ImageData from before and after.</p>
|
||||
<div>
|
||||
<p>Before:</p>
|
||||
<canvas height=100 width=100 id='original'>
|
||||
</canvas>
|
||||
<p>After:</p>
|
||||
<canvas height=100 width=100 id=canvas>
|
||||
<label><a href='http://www.w3.org' id='element'>Focus</a></label>
|
||||
</canvas>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var element = document.getElementById('element');
|
||||
element.focus();
|
||||
context.fillStyle = 'white';
|
||||
context.fillRect(0, 0, 100, 100);
|
||||
context.beginPath();
|
||||
context.strokeStyle = 'black';
|
||||
|
||||
context.moveTo(10, 40);
|
||||
context.lineTo(50, 10);
|
||||
context.lineTo(90, 40);
|
||||
context.lineTo(70, 40);
|
||||
context.lineTo(70, 90);
|
||||
context.lineTo(30, 90);
|
||||
context.lineTo(30, 40);
|
||||
context.closePath();
|
||||
|
||||
context.stroke();
|
||||
context.save();
|
||||
var refImage = context.getImageData(0, 0, 100, 100);
|
||||
|
||||
assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
|
||||
|
||||
var original = document.getElementById('original');
|
||||
var o_context = original.getContext('2d');
|
||||
o_context.fillStyle = 'white';
|
||||
o_context.fillRect(0, 0, 100, 100);
|
||||
o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
|
||||
|
||||
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo(5, 40);
|
||||
context.lineTo(50, 5);
|
||||
context.lineTo(95, 40);
|
||||
context.lineTo(95, 45);
|
||||
context.lineTo(75, 45);
|
||||
context.lineTo(75, 95);
|
||||
context.lineTo(25, 95);
|
||||
context.lineTo(25, 45);
|
||||
context.lineTo(5, 45);
|
||||
context.closePath();
|
||||
|
||||
context.drawFocusIfNeeded(element);
|
||||
|
||||
var ringImage = context.getImageData(0, 0, 100, 100);
|
||||
assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
|
||||
|
||||
// make sure refImage and ringImage are different
|
||||
var length = 40000;
|
||||
var index = length;
|
||||
var identical = true;
|
||||
while (--index > 0) {
|
||||
if (refImage.data[index] != ringImage.data[index]) identical = false;
|
||||
}
|
||||
|
||||
assert_false(identical, "A focus ring appears in the canvas");
|
||||
|
||||
|
||||
}, 'drawFocusIfNeeded does draw a focus ring if the element is in focus.');
|
||||
</script>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>drawFocusIfNeeded()</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="author" title="W3C">
|
||||
<link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>This test uses drawFocusIfNeeded to draw a complex path focus then compare ImageData from before and after.</p>
|
||||
<div>
|
||||
<p>Before:</p>
|
||||
<canvas height=100 width=100 id='original'>
|
||||
</canvas>
|
||||
<p>After:</p>
|
||||
<canvas height=100 width=100 id=canvas>
|
||||
<p id='element' tabindex='1'>This is text.</p>
|
||||
</canvas>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var element = document.getElementById('element');
|
||||
element.focus();
|
||||
context.fillStyle = 'white';
|
||||
context.fillRect(0, 0, 100, 100);
|
||||
context.beginPath();
|
||||
context.strokeStyle = 'black';
|
||||
|
||||
context.moveTo(10, 40);
|
||||
context.lineTo(50, 10);
|
||||
context.lineTo(90, 40);
|
||||
context.lineTo(70, 40);
|
||||
context.lineTo(70, 90);
|
||||
context.lineTo(30, 90);
|
||||
context.lineTo(30, 40);
|
||||
context.closePath();
|
||||
|
||||
context.stroke();
|
||||
context.save();
|
||||
var refImage = context.getImageData(0, 0, 100, 100);
|
||||
|
||||
assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
|
||||
|
||||
var original = document.getElementById('original');
|
||||
var o_context = original.getContext('2d');
|
||||
o_context.fillStyle = 'white';
|
||||
o_context.fillRect(0, 0, 100, 100);
|
||||
o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
|
||||
|
||||
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo(5, 40);
|
||||
context.lineTo(50, 5);
|
||||
context.lineTo(95, 40);
|
||||
context.lineTo(95, 45);
|
||||
context.lineTo(75, 45);
|
||||
context.lineTo(75, 95);
|
||||
context.lineTo(25, 95);
|
||||
context.lineTo(25, 45);
|
||||
context.lineTo(5, 45);
|
||||
context.closePath();
|
||||
|
||||
context.drawFocusIfNeeded(element);
|
||||
|
||||
var ringImage = context.getImageData(0, 0, 100, 100);
|
||||
assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
|
||||
|
||||
// make sure refImage and ringImage are different
|
||||
var length = 40000;
|
||||
var index = length;
|
||||
var identical = true;
|
||||
while (--index > 0) {
|
||||
if (refImage.data[index] != ringImage.data[index]) identical = false;
|
||||
}
|
||||
|
||||
assert_false(identical, "A focus ring appears in the canvas");
|
||||
|
||||
|
||||
}, 'drawFocusIfNeeded does draw a focus ring if the element is in focus and the user activated a particular focus ring.');
|
||||
</script>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue