Skip to content

Commit

Permalink
Move and cleanup Microsoft's canvas tests.
Browse files Browse the repository at this point in the history
  • Loading branch information
deniak authored and Ms2ger committed Jan 22, 2014
1 parent 9c66d65 commit 33d3e50
Show file tree
Hide file tree
Showing 33 changed files with 80 additions and 547 deletions.
@@ -1,12 +1,11 @@
<!doctype HTML>
<!doctype HTML>
<html>
<head>
<title>HTML5 Canvas Test: arcTo() adds to subpath if same point</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
</head>
<body>
<p>Description: If x1,y1 and x2,y2 are the same point, then arcTo must add x1,y1 to the subpath, and connect that point to x0,y0 with a straight line.</p>
<p>Test passes if there is a straight, horizontal line seen on the page.</p>
<div><img src="../images/canvas-line.png" alt="line" /></div>
<div><img src="/images/canvas-line.png" alt="line" /></div>
</body>
</html>
3 changes: 1 addition & 2 deletions 2dcontext/building-paths/canvas_complexshapes_arcto_001.htm
Expand Up @@ -20,7 +20,6 @@
</head>
<body onload="runTest()">
<p>Description: If x1,y1 and x2,y2 are the same point, then arcTo must add x1,y1 to the subpath, and connect that point to x0,y0 with a straight line.</p>
<p>Test passes if there is a straight, horizontal line seen on the page.</p>
<canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
</body>
</html>
</html>
@@ -1,12 +1,11 @@
<!doctype HTML>
<!doctype HTML>
<html>
<head>
<title>HTML5 Canvas Test: bezierCurveTo() must ensure subpaths</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
</head>
<body>
<p>Description: bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) must ensure there is a subpath for the point (cp1x,cp1y) if the context has no subpaths, then it must connect the last point in the subpath to the point (x,y).</p>
<p>Test passes if two vertical lines and one curved line are seen below in the shape of a smiley face.</p>
<div><img src='../images/smiley.png' alt='smiley' /></div>
<div><img src='/images/smiley.png' alt='smiley' /></div>
</body>
</html>
Expand Up @@ -29,7 +29,6 @@
</head>
<body onload="runTest()">
<p>Description: bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) must ensure there is a subpath for the point (cp1x,cp1y) if the context has no subpaths, then it must connect the last point in the subpath to the point (x,y).</p>
<p>Test passes if two vertical lines and one curved line are seen below in the shape of a smiley face.</p>
<canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
</body>
</html>
</html>
@@ -1,12 +1,11 @@
<!doctype HTML>
<!doctype HTML>
<html>
<head>
<title>HTML5 Canvas Test: globalCompositeOperation "destination-over"</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
</head>
<body>
<p>Description: If the globalCompositeOperation is set to "destination-over", display the destination image wherever the destination image is opaque.</p>
<p>Test passes if a black rectangle is seen on the page and no red is visible on the page.</p>
<div><img alt='black rectangle' src="/support/images/black-rectangle.png"></div>
<div><img alt='black rectangle' src="/images/black-rectangle.png"></div>
</body>
</html>
Expand Up @@ -26,7 +26,6 @@
</head>
<body onload="runTest()">
<p>Description: If the globalCompositeOperation is set to "destination-over", display the destination image wherever the destination image is opaque.</p>
<p>Test passes if a black rectangle is seen on the page and no red is visible on the page.</p>
<canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
</body>
</html>
</html>
@@ -1,12 +1,11 @@
<!doctype HTML>
<!doctype HTML>
<html>
<head>
<title>HTML5 Canvas Test: "square" lineCap</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
</head>
<body>
<p>Description: The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.</p>
<p>Test passes if there is no red visible on the page and a black rectangle is seen on the page.</p>
<div><img src='/support/images/black-rectangle.png' alt='back rect' /></div>
<div><img src='/images/black-rectangle.png' alt='black rect' /></div>
</body>
</html>
3 changes: 1 addition & 2 deletions 2dcontext/line-styles/canvas_linestyles_linecap_001.htm
Expand Up @@ -31,7 +31,6 @@
</head>
<body onload="runTest()">
<p>Description: The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.</p>
<p>Test passes if there is no red visible on the page and a black rectangle is seen on the page.</p>
<canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
</body>
</html>
</html>
28 changes: 28 additions & 0 deletions 2dcontext/shadows/canvas_shadows_002-ref.htm
@@ -0,0 +1,28 @@
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Canvas Test: Shadows for images</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
<link rel="help" href="http://www.w3.org/TR/2dcontext/#shadows" />
<link rel="match" href="canvas_shadows_002-ref.htm" />
<meta name="assert" content="Shadows must be drawn for images." />
<script type="text/javascript">
function runTest() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");

// Draw a black rectangle image on the canvas.
var img = document.getElementById("imgBlackRect");
ctx.drawImage(img, 0, 0);
ctx.drawImage(img, 150, 0);
}
</script>

</head>
<body onload="runTest()">
<p>Description: Shadows must be drawn for images.</p>
<p>Test passes if two black rectangles are shown and there is no red visible on the page.</p>
<canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
<img id="imgBlackRect" style="display:none;" width="100" height="50" src="/images/black-rectangle.png">
</body>
</html>
34 changes: 34 additions & 0 deletions 2dcontext/shadows/canvas_shadows_002.htm
@@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Canvas Test: Shadows for images</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
<link rel="help" href="http://www.w3.org/TR/2dcontext/#shadows" />
<link rel="match" href="canvas_shadows_002-ref.htm" />
<meta name="assert" content="Shadows must be drawn for images." />
<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(150, 0, 100, 50);

// Set shadow styles to draw a black shadow to overlap the red rectangle.
ctx.shadowOffsetX = 150;
ctx.shadowColor = "rgba(0, 0, 0, 1.0)";

// Draw a black rectangle image on the canvas.
var img = document.getElementById("imgBlackRect");
ctx.drawImage(img, 0, 0);
}
</script>
</head>
<body onload="runTest()">
<p>Description: Shadows must be drawn for images.</p>
<p>Test passes if two black rectangles are shown and there is no red visible on the page.</p>
<canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
<img id="imgBlackRect" style="display:none" width="100" height="50" src="/images/black-rectangle.png">
</body>
</html>
@@ -1,12 +1,11 @@
<!doctype HTML>
<!doctype HTML>
<html>
<head>
<title>HTML5 Canvas Test: restore() pops top entry in drawing state stack</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
</head>
<body>
<p>Description: restore() pops the top entry in the drawing state stack.</p>
<p>Test passes if a rectangle is seen on the page with three colors - ordered from left to right: yellow, blue, green. The test fails if this order is not shown or if any red is seen.</p>
<div><img src='../images/threecolors.png' alt='3 colors'></div>
<div><img src='/images/threecolors.png' alt='3 colors'></div>
</body>
</html>
3 changes: 1 addition & 2 deletions 2dcontext/the-canvas-state/canvas_state_restore_001.htm
Expand Up @@ -36,7 +36,6 @@
</head>
<body onload="runTest()">
<p>Description: restore() pops the top entry in the drawing state stack.</p>
<p>Test passes if a rectangle is seen on the page with three colors - ordered from left to right: yellow, blue, green. The test fails if this order is not shown or if any red is seen.</p>
<canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
</body>
</html>
</html>
@@ -1,12 +1,11 @@
<!doctype HTML>
<!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>
<p>Test passes if there is no red visible on the page and a black rectangle is seen on the page.</p>
<div><img alt='black rectangle' src="/support/images/black-rectangle.png"></div>
<div><img alt='black rectangle' src="/images/black-rectangle.png"></div>
</body>
</html>
Expand Up @@ -24,7 +24,6 @@
</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>
<p>Test passes if there is no red visible on the page and a black rectangle is seen on the page.</p>
<canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
</body>
</html>
</html>
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

0 comments on commit 33d3e50

Please sign in to comment.