mirror of
https://github.com/servo/servo.git
synced 2025-08-15 18:35: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,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.order</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.order</h1>
|
||||
<p class="desc">Transformations are applied in the right order</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("Transformations are applied in the right order");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.scale(2, 1);
|
||||
ctx.rotate(Math.PI / 2);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, -50, 50, 50);
|
||||
_assertPixel(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.rotate.direction</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.rotate.direction</h1>
|
||||
<p class="desc">rotate() is clockwise</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("rotate() is clockwise");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.rotate(Math.PI / 2);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, -100, 50, 100);
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.rotate.nonfinite</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.rotate.nonfinite</h1>
|
||||
<p class="desc">rotate() with Infinity/NaN is ignored</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("rotate() with Infinity/NaN is ignored");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.translate(100, 10);
|
||||
ctx.rotate(Infinity);
|
||||
ctx.rotate(-Infinity);
|
||||
ctx.rotate(NaN);
|
||||
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(-100, -10, 100, 50);
|
||||
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.rotate.radians</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.rotate.radians</h1>
|
||||
<p class="desc">rotate() uses radians</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("rotate() uses radians");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.rotate(Math.PI); // should fail obviously if this is 3.1 degrees
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(-100, -50, 100, 50);
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.rotate.wrap</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.rotate.wrap</h1>
|
||||
<p class="desc">rotate() wraps large positive values correctly</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("rotate() wraps large positive values correctly");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.rotate(Math.PI * (1 + 4096)); // == pi (mod 2*pi)
|
||||
// We need about pi +/- 0.001 in order to get correct-looking results
|
||||
// 32-bit floats can store pi*4097 with precision 2^-10, so that should
|
||||
// be safe enough on reasonable implementations
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(-100, -50, 100, 50);
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
_assertPixel(canvas, 98,2, 0,255,0,255, "98,2", "0,255,0,255");
|
||||
_assertPixel(canvas, 98,47, 0,255,0,255, "98,47", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.rotate.wrapnegative</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.rotate.wrapnegative</h1>
|
||||
<p class="desc">rotate() wraps large negative values correctly</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("rotate() wraps large negative values correctly");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.rotate(-Math.PI * (1 + 4096));
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(-100, -50, 100, 50);
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
_assertPixel(canvas, 98,2, 0,255,0,255, "98,2", "0,255,0,255");
|
||||
_assertPixel(canvas, 98,47, 0,255,0,255, "98,47", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.rotate.zero</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.rotate.zero</h1>
|
||||
<p class="desc">rotate() by 0 does nothing</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("rotate() by 0 does nothing");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.rotate(0);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.scale.basic</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.scale.basic</h1>
|
||||
<p class="desc">scale() works</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("scale() works");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.scale(2, 4);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, 0, 50, 12.5);
|
||||
_assertPixel(canvas, 90,40, 0,255,0,255, "90,40", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.scale.large</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.scale.large</h1>
|
||||
<p class="desc">scale() with large scale factors works</p>
|
||||
|
||||
<p class="notes">Not really that large at all, but it hits the limits in Firefox.
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("scale() with large scale factors works");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.scale(1e5, 1e5);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, 0, 1, 1);
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.scale.multiple</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.scale.multiple</h1>
|
||||
<p class="desc">Multiple scale()s combine</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("Multiple scale()s combine");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.scale(Math.sqrt(2), Math.sqrt(2));
|
||||
ctx.scale(Math.sqrt(2), Math.sqrt(2));
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, 0, 50, 25);
|
||||
_assertPixel(canvas, 90,40, 0,255,0,255, "90,40", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.scale.negative</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.scale.negative</h1>
|
||||
<p class="desc">scale() with negative scale factors works</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("scale() with negative scale factors works");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.save();
|
||||
ctx.scale(-1, 1);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(-50, 0, 50, 50);
|
||||
ctx.restore();
|
||||
|
||||
ctx.save();
|
||||
ctx.scale(1, -1);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(50, -50, 50, 50);
|
||||
ctx.restore();
|
||||
_assertPixel(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255");
|
||||
_assertPixel(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.scale.nonfinite</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.scale.nonfinite</h1>
|
||||
<p class="desc">scale() with Infinity/NaN is ignored</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("scale() with Infinity/NaN is ignored");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.translate(100, 10);
|
||||
ctx.scale(Infinity, 0.1);
|
||||
ctx.scale(-Infinity, 0.1);
|
||||
ctx.scale(NaN, 0.1);
|
||||
ctx.scale(0.1, Infinity);
|
||||
ctx.scale(0.1, -Infinity);
|
||||
ctx.scale(0.1, NaN);
|
||||
ctx.scale(Infinity, Infinity);
|
||||
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(-100, -10, 100, 50);
|
||||
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.scale.zero</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.scale.zero</h1>
|
||||
<p class="desc">scale() with a scale factor of zero works</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("scale() with a scale factor of zero works");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(50, 0);
|
||||
ctx.scale(0, 1);
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
ctx.restore();
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(0, 25);
|
||||
ctx.scale(1, 0);
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
ctx.restore();
|
||||
|
||||
canvas.toDataURL();
|
||||
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.setTransform.multiple</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.setTransform.multiple</h1>
|
||||
<p class="desc"></p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.setTransform(1/2,0, 0,1/2, 0,0);
|
||||
ctx.setTransform(2,0, 0,2, 0,0);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, 0, 50, 25);
|
||||
_assertPixel(canvas, 75,35, 0,255,0,255, "75,35", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.setTransform.nonfinite</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.setTransform.nonfinite</h1>
|
||||
<p class="desc">setTransform() with Infinity/NaN is ignored</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("setTransform() with Infinity/NaN is ignored");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.translate(100, 10);
|
||||
ctx.setTransform(Infinity, 0, 0, 0, 0, 0);
|
||||
ctx.setTransform(-Infinity, 0, 0, 0, 0, 0);
|
||||
ctx.setTransform(NaN, 0, 0, 0, 0, 0);
|
||||
ctx.setTransform(0, Infinity, 0, 0, 0, 0);
|
||||
ctx.setTransform(0, -Infinity, 0, 0, 0, 0);
|
||||
ctx.setTransform(0, NaN, 0, 0, 0, 0);
|
||||
ctx.setTransform(0, 0, Infinity, 0, 0, 0);
|
||||
ctx.setTransform(0, 0, -Infinity, 0, 0, 0);
|
||||
ctx.setTransform(0, 0, NaN, 0, 0, 0);
|
||||
ctx.setTransform(0, 0, 0, Infinity, 0, 0);
|
||||
ctx.setTransform(0, 0, 0, -Infinity, 0, 0);
|
||||
ctx.setTransform(0, 0, 0, NaN, 0, 0);
|
||||
ctx.setTransform(0, 0, 0, 0, Infinity, 0);
|
||||
ctx.setTransform(0, 0, 0, 0, -Infinity, 0);
|
||||
ctx.setTransform(0, 0, 0, 0, NaN, 0);
|
||||
ctx.setTransform(0, 0, 0, 0, 0, Infinity);
|
||||
ctx.setTransform(0, 0, 0, 0, 0, -Infinity);
|
||||
ctx.setTransform(0, 0, 0, 0, 0, NaN);
|
||||
ctx.setTransform(Infinity, Infinity, 0, 0, 0, 0);
|
||||
ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, 0);
|
||||
ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, 0);
|
||||
ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
|
||||
ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
|
||||
ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
|
||||
ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, 0);
|
||||
ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
|
||||
ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, Infinity);
|
||||
ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, 0);
|
||||
ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, 0);
|
||||
ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
|
||||
ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, Infinity);
|
||||
ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, 0);
|
||||
ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, Infinity);
|
||||
ctx.setTransform(Infinity, Infinity, 0, 0, 0, Infinity);
|
||||
ctx.setTransform(Infinity, 0, Infinity, 0, 0, 0);
|
||||
ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, 0);
|
||||
ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, 0);
|
||||
ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
|
||||
ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, Infinity);
|
||||
ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, 0);
|
||||
ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, Infinity);
|
||||
ctx.setTransform(Infinity, 0, Infinity, 0, 0, Infinity);
|
||||
ctx.setTransform(Infinity, 0, 0, Infinity, 0, 0);
|
||||
ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, 0);
|
||||
ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, Infinity);
|
||||
ctx.setTransform(Infinity, 0, 0, Infinity, 0, Infinity);
|
||||
ctx.setTransform(Infinity, 0, 0, 0, Infinity, 0);
|
||||
ctx.setTransform(Infinity, 0, 0, 0, Infinity, Infinity);
|
||||
ctx.setTransform(Infinity, 0, 0, 0, 0, Infinity);
|
||||
ctx.setTransform(0, Infinity, Infinity, 0, 0, 0);
|
||||
ctx.setTransform(0, Infinity, Infinity, Infinity, 0, 0);
|
||||
ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, 0);
|
||||
ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
|
||||
ctx.setTransform(0, Infinity, Infinity, Infinity, 0, Infinity);
|
||||
ctx.setTransform(0, Infinity, Infinity, 0, Infinity, 0);
|
||||
ctx.setTransform(0, Infinity, Infinity, 0, Infinity, Infinity);
|
||||
ctx.setTransform(0, Infinity, Infinity, 0, 0, Infinity);
|
||||
ctx.setTransform(0, Infinity, 0, Infinity, 0, 0);
|
||||
ctx.setTransform(0, Infinity, 0, Infinity, Infinity, 0);
|
||||
ctx.setTransform(0, Infinity, 0, Infinity, Infinity, Infinity);
|
||||
ctx.setTransform(0, Infinity, 0, Infinity, 0, Infinity);
|
||||
ctx.setTransform(0, Infinity, 0, 0, Infinity, 0);
|
||||
ctx.setTransform(0, Infinity, 0, 0, Infinity, Infinity);
|
||||
ctx.setTransform(0, Infinity, 0, 0, 0, Infinity);
|
||||
ctx.setTransform(0, 0, Infinity, Infinity, 0, 0);
|
||||
ctx.setTransform(0, 0, Infinity, Infinity, Infinity, 0);
|
||||
ctx.setTransform(0, 0, Infinity, Infinity, Infinity, Infinity);
|
||||
ctx.setTransform(0, 0, Infinity, Infinity, 0, Infinity);
|
||||
ctx.setTransform(0, 0, Infinity, 0, Infinity, 0);
|
||||
ctx.setTransform(0, 0, Infinity, 0, Infinity, Infinity);
|
||||
ctx.setTransform(0, 0, Infinity, 0, 0, Infinity);
|
||||
ctx.setTransform(0, 0, 0, Infinity, Infinity, 0);
|
||||
ctx.setTransform(0, 0, 0, Infinity, Infinity, Infinity);
|
||||
ctx.setTransform(0, 0, 0, Infinity, 0, Infinity);
|
||||
ctx.setTransform(0, 0, 0, 0, Infinity, Infinity);
|
||||
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(-100, -10, 100, 50);
|
||||
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.setTransform.skewed</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.setTransform.skewed</h1>
|
||||
<p class="desc"></p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
// Create green with a red square ring inside it
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(20, 10, 60, 30);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(40, 20, 20, 10);
|
||||
|
||||
// Draw a skewed shape to fill that gap, to make sure it is aligned correctly
|
||||
ctx.setTransform(1,4, 2,3, 5,6);
|
||||
// Post-transform coordinates:
|
||||
// [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
|
||||
// Hence pre-transform coordinates:
|
||||
var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
|
||||
[-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
|
||||
[-7.4,11.2]];
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pts[0][0], pts[0][1]);
|
||||
for (var i = 0; i < pts.length; ++i)
|
||||
ctx.lineTo(pts[i][0], pts[i][1]);
|
||||
ctx.fill();
|
||||
_assertPixel(canvas, 21,11, 0,255,0,255, "21,11", "0,255,0,255");
|
||||
_assertPixel(canvas, 79,11, 0,255,0,255, "79,11", "0,255,0,255");
|
||||
_assertPixel(canvas, 21,39, 0,255,0,255, "21,39", "0,255,0,255");
|
||||
_assertPixel(canvas, 79,39, 0,255,0,255, "79,39", "0,255,0,255");
|
||||
_assertPixel(canvas, 39,19, 0,255,0,255, "39,19", "0,255,0,255");
|
||||
_assertPixel(canvas, 61,19, 0,255,0,255, "61,19", "0,255,0,255");
|
||||
_assertPixel(canvas, 39,31, 0,255,0,255, "39,31", "0,255,0,255");
|
||||
_assertPixel(canvas, 61,31, 0,255,0,255, "61,31", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.transform.identity</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.transform.identity</h1>
|
||||
<p class="desc">transform() with the identity matrix does nothing</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("transform() with the identity matrix does nothing");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.transform(1,0, 0,1, 0,0);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.transform.multiply</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.transform.multiply</h1>
|
||||
<p class="desc">transform() multiplies the CTM</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("transform() multiplies the CTM");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.transform(1,2, 3,4, 5,6);
|
||||
ctx.transform(-2,1, 3/2,-1/2, 1,-2);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.transform.nonfinite</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.transform.nonfinite</h1>
|
||||
<p class="desc">transform() with Infinity/NaN is ignored</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("transform() with Infinity/NaN is ignored");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.translate(100, 10);
|
||||
ctx.transform(Infinity, 0, 0, 0, 0, 0);
|
||||
ctx.transform(-Infinity, 0, 0, 0, 0, 0);
|
||||
ctx.transform(NaN, 0, 0, 0, 0, 0);
|
||||
ctx.transform(0, Infinity, 0, 0, 0, 0);
|
||||
ctx.transform(0, -Infinity, 0, 0, 0, 0);
|
||||
ctx.transform(0, NaN, 0, 0, 0, 0);
|
||||
ctx.transform(0, 0, Infinity, 0, 0, 0);
|
||||
ctx.transform(0, 0, -Infinity, 0, 0, 0);
|
||||
ctx.transform(0, 0, NaN, 0, 0, 0);
|
||||
ctx.transform(0, 0, 0, Infinity, 0, 0);
|
||||
ctx.transform(0, 0, 0, -Infinity, 0, 0);
|
||||
ctx.transform(0, 0, 0, NaN, 0, 0);
|
||||
ctx.transform(0, 0, 0, 0, Infinity, 0);
|
||||
ctx.transform(0, 0, 0, 0, -Infinity, 0);
|
||||
ctx.transform(0, 0, 0, 0, NaN, 0);
|
||||
ctx.transform(0, 0, 0, 0, 0, Infinity);
|
||||
ctx.transform(0, 0, 0, 0, 0, -Infinity);
|
||||
ctx.transform(0, 0, 0, 0, 0, NaN);
|
||||
ctx.transform(Infinity, Infinity, 0, 0, 0, 0);
|
||||
ctx.transform(Infinity, Infinity, Infinity, 0, 0, 0);
|
||||
ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, 0);
|
||||
ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
|
||||
ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
|
||||
ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
|
||||
ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, 0);
|
||||
ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
|
||||
ctx.transform(Infinity, Infinity, Infinity, 0, 0, Infinity);
|
||||
ctx.transform(Infinity, Infinity, 0, Infinity, 0, 0);
|
||||
ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, 0);
|
||||
ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
|
||||
ctx.transform(Infinity, Infinity, 0, Infinity, 0, Infinity);
|
||||
ctx.transform(Infinity, Infinity, 0, 0, Infinity, 0);
|
||||
ctx.transform(Infinity, Infinity, 0, 0, Infinity, Infinity);
|
||||
ctx.transform(Infinity, Infinity, 0, 0, 0, Infinity);
|
||||
ctx.transform(Infinity, 0, Infinity, 0, 0, 0);
|
||||
ctx.transform(Infinity, 0, Infinity, Infinity, 0, 0);
|
||||
ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, 0);
|
||||
ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
|
||||
ctx.transform(Infinity, 0, Infinity, Infinity, 0, Infinity);
|
||||
ctx.transform(Infinity, 0, Infinity, 0, Infinity, 0);
|
||||
ctx.transform(Infinity, 0, Infinity, 0, Infinity, Infinity);
|
||||
ctx.transform(Infinity, 0, Infinity, 0, 0, Infinity);
|
||||
ctx.transform(Infinity, 0, 0, Infinity, 0, 0);
|
||||
ctx.transform(Infinity, 0, 0, Infinity, Infinity, 0);
|
||||
ctx.transform(Infinity, 0, 0, Infinity, Infinity, Infinity);
|
||||
ctx.transform(Infinity, 0, 0, Infinity, 0, Infinity);
|
||||
ctx.transform(Infinity, 0, 0, 0, Infinity, 0);
|
||||
ctx.transform(Infinity, 0, 0, 0, Infinity, Infinity);
|
||||
ctx.transform(Infinity, 0, 0, 0, 0, Infinity);
|
||||
ctx.transform(0, Infinity, Infinity, 0, 0, 0);
|
||||
ctx.transform(0, Infinity, Infinity, Infinity, 0, 0);
|
||||
ctx.transform(0, Infinity, Infinity, Infinity, Infinity, 0);
|
||||
ctx.transform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
|
||||
ctx.transform(0, Infinity, Infinity, Infinity, 0, Infinity);
|
||||
ctx.transform(0, Infinity, Infinity, 0, Infinity, 0);
|
||||
ctx.transform(0, Infinity, Infinity, 0, Infinity, Infinity);
|
||||
ctx.transform(0, Infinity, Infinity, 0, 0, Infinity);
|
||||
ctx.transform(0, Infinity, 0, Infinity, 0, 0);
|
||||
ctx.transform(0, Infinity, 0, Infinity, Infinity, 0);
|
||||
ctx.transform(0, Infinity, 0, Infinity, Infinity, Infinity);
|
||||
ctx.transform(0, Infinity, 0, Infinity, 0, Infinity);
|
||||
ctx.transform(0, Infinity, 0, 0, Infinity, 0);
|
||||
ctx.transform(0, Infinity, 0, 0, Infinity, Infinity);
|
||||
ctx.transform(0, Infinity, 0, 0, 0, Infinity);
|
||||
ctx.transform(0, 0, Infinity, Infinity, 0, 0);
|
||||
ctx.transform(0, 0, Infinity, Infinity, Infinity, 0);
|
||||
ctx.transform(0, 0, Infinity, Infinity, Infinity, Infinity);
|
||||
ctx.transform(0, 0, Infinity, Infinity, 0, Infinity);
|
||||
ctx.transform(0, 0, Infinity, 0, Infinity, 0);
|
||||
ctx.transform(0, 0, Infinity, 0, Infinity, Infinity);
|
||||
ctx.transform(0, 0, Infinity, 0, 0, Infinity);
|
||||
ctx.transform(0, 0, 0, Infinity, Infinity, 0);
|
||||
ctx.transform(0, 0, 0, Infinity, Infinity, Infinity);
|
||||
ctx.transform(0, 0, 0, Infinity, 0, Infinity);
|
||||
ctx.transform(0, 0, 0, 0, Infinity, Infinity);
|
||||
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(-100, -10, 100, 50);
|
||||
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.transform.skewed</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.transform.skewed</h1>
|
||||
<p class="desc">transform() with skewy matrix transforms correctly</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("transform() with skewy matrix transforms correctly");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
// Create green with a red square ring inside it
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(20, 10, 60, 30);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(40, 20, 20, 10);
|
||||
|
||||
// Draw a skewed shape to fill that gap, to make sure it is aligned correctly
|
||||
ctx.transform(1,4, 2,3, 5,6);
|
||||
// Post-transform coordinates:
|
||||
// [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
|
||||
// Hence pre-transform coordinates:
|
||||
var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
|
||||
[-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
|
||||
[-7.4,11.2]];
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pts[0][0], pts[0][1]);
|
||||
for (var i = 0; i < pts.length; ++i)
|
||||
ctx.lineTo(pts[i][0], pts[i][1]);
|
||||
ctx.fill();
|
||||
_assertPixel(canvas, 21,11, 0,255,0,255, "21,11", "0,255,0,255");
|
||||
_assertPixel(canvas, 79,11, 0,255,0,255, "79,11", "0,255,0,255");
|
||||
_assertPixel(canvas, 21,39, 0,255,0,255, "21,39", "0,255,0,255");
|
||||
_assertPixel(canvas, 79,39, 0,255,0,255, "79,39", "0,255,0,255");
|
||||
_assertPixel(canvas, 39,19, 0,255,0,255, "39,19", "0,255,0,255");
|
||||
_assertPixel(canvas, 61,19, 0,255,0,255, "61,19", "0,255,0,255");
|
||||
_assertPixel(canvas, 39,31, 0,255,0,255, "39,31", "0,255,0,255");
|
||||
_assertPixel(canvas, 61,31, 0,255,0,255, "61,31", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.translate.basic</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.translate.basic</h1>
|
||||
<p class="desc">translate() works</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("translate() works");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.translate(100, 50);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(-100, -50, 100, 50);
|
||||
_assertPixel(canvas, 90,40, 0,255,0,255, "90,40", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
|
||||
<title>Canvas test: 2d.transformation.translate.nonfinite</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/canvas-tests.js"></script>
|
||||
<link rel="stylesheet" href="/common/canvas-tests.css">
|
||||
<body class="show_output">
|
||||
|
||||
<h1>2d.transformation.translate.nonfinite</h1>
|
||||
<p class="desc">translate() with Infinity/NaN is ignored</p>
|
||||
|
||||
|
||||
<p class="output">Actual output:</p>
|
||||
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
|
||||
<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
|
||||
<ul id="d"></ul>
|
||||
<script>
|
||||
var t = async_test("translate() with Infinity/NaN is ignored");
|
||||
_addTest(function(canvas, ctx) {
|
||||
|
||||
ctx.fillStyle = '#f00';
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
ctx.translate(100, 10);
|
||||
ctx.translate(Infinity, 0.1);
|
||||
ctx.translate(-Infinity, 0.1);
|
||||
ctx.translate(NaN, 0.1);
|
||||
ctx.translate(0.1, Infinity);
|
||||
ctx.translate(0.1, -Infinity);
|
||||
ctx.translate(0.1, NaN);
|
||||
ctx.translate(Infinity, Infinity);
|
||||
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.fillRect(-100, -10, 100, 50);
|
||||
|
||||
_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!doctype HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Canvas Test: scale() transformation</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
|
||||
</head>
|
||||
<body>
|
||||
<p>Description: The scale(x, y) method must add the scaling transformation described by the arguments to the transformation matrix.</p>
|
||||
<div><img alt='black rectangle' src="/images/black-rectangle.png"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Canvas Test: scale() transformation</title>
|
||||
<link rel="match" href="canvas_transformations_scale_001-ref.htm">
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-scale" />
|
||||
<meta name="assert" content="The scale(x, y) method must add the scaling transformation described by the arguments to the transformation matrix." />
|
||||
<script type="text/javascript">
|
||||
function runTest()
|
||||
{
|
||||
var canvas = document.getElementById("canvas1");
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
// Draw a red rectangle.
|
||||
ctx.fillStyle = "rgba(255, 0, 0, 1.0)";
|
||||
ctx.fillRect(0, 0, 100, 50);
|
||||
|
||||
// Draw a black rectangle with scaling.
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
|
||||
ctx.scale(2, 2);
|
||||
ctx.fillRect(0, 0, 50, 25);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="runTest()">
|
||||
<p>Description: The scale(x, y) method must add the scaling transformation described by the arguments to the transformation matrix.</p>
|
||||
<canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue