LayoutTests/fast/canvas/canvas-direction.html - WebKit - Git at Google

 <html>
 <head>
 <style>
 .pass {
     color: green;
     font-weight: bold;
 }

 .fail {
     color: red;
     font-weight: bold;
 }
 </style>
 </head>
 <body>
 <span>Tests that canvas 2d context supports 'direction' attribute: <span id="supported"></span></span>
 <div>
 <span>Tests that context.direction is 'ltr' with parent element having unspecified direction: <span id="result1"></span></span><br>
 <canvas id="canvas1" width=400 height=20 style="border:1px solid black"></canvas>
 </div>
 <div dir="rtl">
 <span>Tests that context.direction is 'rtl' with parent element having direction as rtl: <span id="result2"></span></span><br>
 <canvas id="canvas2" width=400 height=20 style="border:1px solid black"></canvas>
 </div>
 <div>
 <span>Tests that context.direction is overridden by 'rtl' with parent element having unspecified direction: <span id="result3"></span></span><br>
 <canvas id="canvas3" width=400 height=20 style="border:1px solid black"></canvas>
 </div>
 <div dir="rtl">
 <span>Tests that context.direction is overridden by 'ltr' with parent element having direction as rtl: <span id="result4"></span></span><br>
 <canvas id="canvas4" width=400 height=20 style="border:1px solid black"></canvas>
 </div>
 <div>
 <span>Tests that context.direction is overridden by 'inherit' with parent element having unspecified direction: <span id="result5"></span></span><br>
 <canvas id="canvas5" width=400 height=20 style="border:1px solid black"></canvas>
 </div>
 <div dir="rtl">
 <span>Tests that context.direction is overridden by 'inherit' with parent element having direction as rtl: <span id="result6"></span></span><br>
 <canvas id="canvas6" width=400 height=20 style="border:1px solid black"></canvas>
 </div>
 <div>
 <span>Tests that context.reset sets the direction as ltr<span id="result7"></span></span><br>
 <canvas id="canvas7" width=400 height=20 style="border:1px solid black"></canvas>
 </div>
 <div dir="rtl">
 <span>Tests that context.reset sets the direction as rtl<span id="result8"></span></span><br>
 <canvas id="canvas8" width=400 height=20 style="border:1px solid black"></canvas>
 </div>
 <div>
 <span>Tests that change in element's dir attribute is reflected in context.direction as rtl: <span id="result9"></span></span><br>
 <canvas id="canvas9" width=400 height=20 style="border:1px solid black"></canvas>
 </div>
 <div dir="rtl">
 <span>Tests that change in element's dir attribute is reflected in context.direction as ltr: <span id="result10"></span></span><br>
 <canvas id="canvas10" width=400 height=20 style="border:1px solid black"></canvas>
 </div>
 <div>
 <span>Tests that context.direction reflects the valid direction after save/restore context operations: <span id="result11"></span></span><br>
 <canvas id="canvas11" style="border:1px solid black"></canvas>
 </div>
 <div id="results">
 </div>
 <script>
 if (window.testRunner)
     testRunner.dumpAsText();

 var newCanvasElement = document.createElement('canvas');
 document.getElementById('supported').textContent = newCanvasElement.getContext('2d').direction ? 'PASS' : 'FAIL';
 document.getElementById('supported').className = newCanvasElement.getContext('2d').direction ? 'pass' : 'fail';

 var fontSettings = "12px 'Arial'";

 function appendResult(description, result)
 {
     var descriptionElement = document.createElement('span');
     var resultElement = document.createElement('span');
     descriptionElement.innerHTML = description;
     resultElement.textContent = result;
     resultElement.className = (result === 'PASS') ? 'pass' : 'fail';
     descriptionElement.appendChild(resultElement);
     document.getElementById("results").appendChild(descriptionElement);
     document.getElementById("results").appendChild(document.createElement('br'));
 }

 function verifyDrawText(canvasId, resultId, text, expectedDirection)
 {
     var canvasElement = document.getElementById(canvasId);
     var resultElement = document.getElementById(resultId);
     var ctx = canvasElement.getContext('2d');
     var width = canvasElement.width/2;
     var height = canvasElement.height;
     resultElement.textContent = (ctx.direction == expectedDirection) ? 'PASS' : 'FAIL';
     resultElement.className = (ctx.direction == expectedDirection) ? 'pass' : 'fail';
     ctx.moveTo(width, 0);
     ctx.lineTo(width, height);
     ctx.stroke();
     ctx.font = fontSettings;
     ctx.fillText(text, width, height/2);
 }

 function verifyDrawTextWithSpecifiedDirection(canvasId, resultId, text, direction, expectedDirection)
 {
     var canvasElement = document.getElementById(canvasId);
     var resultElement = document.getElementById(resultId);
     var ctx = canvasElement.getContext('2d');
     var width = canvasElement.width/2;
     var height = canvasElement.height;
     var currentDirection = ctx.direction;
     ctx.direction = direction;
     resultElement.textContent = (currentDirection && (ctx.direction == expectedDirection)) ? 'PASS' : 'FAIL';
     resultElement.className = (currentDirection && (ctx.direction == expectedDirection)) ? 'pass' : 'fail';
     ctx.moveTo(width, 0);
     ctx.lineTo(width, height);
     ctx.stroke();
     ctx.font = fontSettings;
     ctx.fillText(text, width, height/2);
 }

 function verifyDirectionAfterReset(canvasId, text, direction, expectedDirection)
 {
     var canvasElement = document.getElementById(canvasId);
     var width = canvasElement.width/2;
     var height = canvasElement.height;
     var ctx = canvasElement.getContext('2d');
     ctx.direction = direction;
     ctx.moveTo(width, 0);
     ctx.lineTo(width, height);
     ctx.stroke();
     ctx.font = fontSettings;
     ctx.fillText(text, width, height/2);
     canvasElement.width = canvasElement.width + 1;
     var description = 'Tests that context.reset() sets the context.direction to ' + expectedDirection + ': ';
     var result = (ctx.direction == expectedDirection) ? 'PASS' : 'FAIL';
     appendResult(description, result);
     document.body.removeChild(canvasElement.parentElement);
 }

 function verifyDirectionAfterAttributeChange(canvasId, resultId, text, newDirection, forParentElement)
 {
     var canvasElement = document.getElementById(canvasId);
     var resultElement = document.getElementById(resultId);
     var ctx = canvasElement.getContext('2d');
     var width = canvasElement.width/2;
     var height = canvasElement.height;

     if (forParentElement)
         canvasElement.parentElement.dir = newDirection;
     else
         canvasElement.dir = newDirection;
     resultElement.textContent = ctx.direction == newDirection ? 'PASS' : 'FAIL';
     resultElement.className = ctx.direction == newDirection ? 'pass' : 'fail';
     ctx.moveTo(width, 0);
     ctx.lineTo(width, height);
     ctx.stroke();
     ctx.font = fontSettings;
     ctx.fillText(text, width, height/2);
 }

 function verifyDirectionAcrossSaveRestores(canvasId, resultId, testVector)
 {
     var canvasElement = document.getElementById(canvasId);
     var resultElement = document.getElementById(resultId);
     var ctx = canvasElement.getContext('2d');
     var width = canvasElement.width/2;
     var height = 0;
     ctx.moveTo(width, 0);
     ctx.lineTo(width, canvasElement.height);
     ctx.stroke();
     ctx.font = fontSettings;
     var testVectorLength = testVector.length;
     var i = 0;
     for (; i < testVector.length; ++i) {
         height += 20;
         ctx.direction = testVector[i].direction;
         ctx.fillText(testVector[i].text, width, height);
         if (i != testVectorLength - 1)
             ctx.save();
     }
     var validDirectionCount = 0;
     for (--i; i > 0; --i) {
         ctx.restore();
         if (ctx.direction == testVector[i - 1].direction)
             validDirectionCount++;
     }
     resultElement.textContent = validDirectionCount == testVectorLength - 1 ? 'PASS' : 'FAIL';
     resultElement.className = validDirectionCount == testVectorLength - 1 ? 'pass' : 'fail';
 }

 function verifyInvalidDirection(direction)
 {
     var ctx = document.createElement('canvas').getContext('2d');
     var currentDirection = ctx.direction;
     ctx.direction = direction;
     var description = 'Tests that invalid direction value ' + direction + ' has no effect on the context.direction: ';
     var result = (ctx.direction == currentDirection) ? 'PASS' : 'FAIL';
     appendResult(description, result);
 }

 verifyDrawText('canvas1', 'result1', 'Left-to-Right text', 'ltr');
 verifyDrawText('canvas2', 'result2', 'Right-to-Left text', 'rtl');

 verifyDrawTextWithSpecifiedDirection('canvas3', 'result3', 'Right-to-Left text', 'rtl', 'rtl');
 verifyDrawTextWithSpecifiedDirection('canvas4', 'result4', 'Left-to-Right text', 'ltr', 'ltr');
 verifyDrawTextWithSpecifiedDirection('canvas5', 'result5', 'Left-to-Right text', 'inherit', 'ltr');
 verifyDrawTextWithSpecifiedDirection('canvas6', 'result6', 'Right-to-Left text', 'inherit', 'rtl');

 verifyDirectionAfterReset('canvas7', 'Right-to-Left', 'rtl', 'ltr');
 verifyDirectionAfterReset('canvas8', 'Right-to-Left', 'ltr', 'rtl');

 verifyDirectionAfterAttributeChange('canvas9', 'result9', 'Right-to-Left text', 'rtl', true);
 verifyDirectionAfterAttributeChange('canvas10', 'result10', 'Left-to-Right text', 'ltr', false);

 verifyDirectionAcrossSaveRestores('canvas11',
                                   'result11',
                                   [{ text: 'Left-to-Right text', direction: 'ltr' },
                                    { text: 'Right-to-Left text', direction: 'rtl' },
                                    { text: 'Right-to-Left text', direction: 'rtl' },
                                    { text: 'Left-to-Right text', direction: 'ltr' },
                                    { text: 'Right-to-Left text', direction: 'rtl' },
                                    { text: 'Right-to-Left text', direction: 'rtl' }]);

 verifyInvalidDirection('RTL');
 verifyInvalidDirection('LTR');
 verifyInvalidDirection('INHERIT');
 </script>
	<html>
	<head>
	<style>
	.pass {
	color: green;
	font-weight: bold;
	}

	.fail {
	color: red;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<span>Tests that canvas 2d context supports 'direction' attribute: <span id="supported"></span></span>
	<div>
	<span>Tests that context.direction is 'ltr' with parent element having unspecified direction: <span id="result1"></span></span><br>
	<canvas id="canvas1" width=400 height=20 style="border:1px solid black"></canvas>
	</div>
	<div dir="rtl">
	<span>Tests that context.direction is 'rtl' with parent element having direction as rtl: <span id="result2"></span></span><br>
	<canvas id="canvas2" width=400 height=20 style="border:1px solid black"></canvas>
	</div>
	<div>
	<span>Tests that context.direction is overridden by 'rtl' with parent element having unspecified direction: <span id="result3"></span></span><br>
	<canvas id="canvas3" width=400 height=20 style="border:1px solid black"></canvas>
	</div>
	<div dir="rtl">
	<span>Tests that context.direction is overridden by 'ltr' with parent element having direction as rtl: <span id="result4"></span></span><br>
	<canvas id="canvas4" width=400 height=20 style="border:1px solid black"></canvas>
	</div>
	<div>
	<span>Tests that context.direction is overridden by 'inherit' with parent element having unspecified direction: <span id="result5"></span></span><br>
	<canvas id="canvas5" width=400 height=20 style="border:1px solid black"></canvas>
	</div>
	<div dir="rtl">
	<span>Tests that context.direction is overridden by 'inherit' with parent element having direction as rtl: <span id="result6"></span></span><br>
	<canvas id="canvas6" width=400 height=20 style="border:1px solid black"></canvas>
	</div>
	<div>
	<span>Tests that context.reset sets the direction as ltr<span id="result7"></span></span><br>
	<canvas id="canvas7" width=400 height=20 style="border:1px solid black"></canvas>
	</div>
	<div dir="rtl">
	<span>Tests that context.reset sets the direction as rtl<span id="result8"></span></span><br>
	<canvas id="canvas8" width=400 height=20 style="border:1px solid black"></canvas>
	</div>
	<div>
	<span>Tests that change in element's dir attribute is reflected in context.direction as rtl: <span id="result9"></span></span><br>
	<canvas id="canvas9" width=400 height=20 style="border:1px solid black"></canvas>
	</div>
	<div dir="rtl">
	<span>Tests that change in element's dir attribute is reflected in context.direction as ltr: <span id="result10"></span></span><br>
	<canvas id="canvas10" width=400 height=20 style="border:1px solid black"></canvas>
	</div>
	<div>
	<span>Tests that context.direction reflects the valid direction after save/restore context operations: <span id="result11"></span></span><br>
	<canvas id="canvas11" style="border:1px solid black"></canvas>
	</div>
	<div id="results">
	</div>
	<script>
	if (window.testRunner)
	testRunner.dumpAsText();

	var newCanvasElement = document.createElement('canvas');
	document.getElementById('supported').textContent = newCanvasElement.getContext('2d').direction ? 'PASS' : 'FAIL';
	document.getElementById('supported').className = newCanvasElement.getContext('2d').direction ? 'pass' : 'fail';

	var fontSettings = "12px 'Arial'";

	function appendResult(description, result)
	{
	var descriptionElement = document.createElement('span');
	var resultElement = document.createElement('span');
	descriptionElement.innerHTML = description;
	resultElement.textContent = result;
	resultElement.className = (result === 'PASS') ? 'pass' : 'fail';
	descriptionElement.appendChild(resultElement);
	document.getElementById("results").appendChild(descriptionElement);
	document.getElementById("results").appendChild(document.createElement('br'));
	}

	function verifyDrawText(canvasId, resultId, text, expectedDirection)
	{
	var canvasElement = document.getElementById(canvasId);
	var resultElement = document.getElementById(resultId);
	var ctx = canvasElement.getContext('2d');
	var width = canvasElement.width/2;
	var height = canvasElement.height;
	resultElement.textContent = (ctx.direction == expectedDirection) ? 'PASS' : 'FAIL';
	resultElement.className = (ctx.direction == expectedDirection) ? 'pass' : 'fail';
	ctx.moveTo(width, 0);
	ctx.lineTo(width, height);
	ctx.stroke();
	ctx.font = fontSettings;
	ctx.fillText(text, width, height/2);
	}

	function verifyDrawTextWithSpecifiedDirection(canvasId, resultId, text, direction, expectedDirection)
	{
	var canvasElement = document.getElementById(canvasId);
	var resultElement = document.getElementById(resultId);
	var ctx = canvasElement.getContext('2d');
	var width = canvasElement.width/2;
	var height = canvasElement.height;
	var currentDirection = ctx.direction;
	ctx.direction = direction;
	resultElement.textContent = (currentDirection && (ctx.direction == expectedDirection)) ? 'PASS' : 'FAIL';
	resultElement.className = (currentDirection && (ctx.direction == expectedDirection)) ? 'pass' : 'fail';
	ctx.moveTo(width, 0);
	ctx.lineTo(width, height);
	ctx.stroke();
	ctx.font = fontSettings;
	ctx.fillText(text, width, height/2);
	}

	function verifyDirectionAfterReset(canvasId, text, direction, expectedDirection)
	{
	var canvasElement = document.getElementById(canvasId);
	var width = canvasElement.width/2;
	var height = canvasElement.height;
	var ctx = canvasElement.getContext('2d');
	ctx.direction = direction;
	ctx.moveTo(width, 0);
	ctx.lineTo(width, height);
	ctx.stroke();
	ctx.font = fontSettings;
	ctx.fillText(text, width, height/2);
	canvasElement.width = canvasElement.width + 1;
	var description = 'Tests that context.reset() sets the context.direction to ' + expectedDirection + ': ';
	var result = (ctx.direction == expectedDirection) ? 'PASS' : 'FAIL';
	appendResult(description, result);
	document.body.removeChild(canvasElement.parentElement);
	}

	function verifyDirectionAfterAttributeChange(canvasId, resultId, text, newDirection, forParentElement)
	{
	var canvasElement = document.getElementById(canvasId);
	var resultElement = document.getElementById(resultId);
	var ctx = canvasElement.getContext('2d');
	var width = canvasElement.width/2;
	var height = canvasElement.height;

	if (forParentElement)
	canvasElement.parentElement.dir = newDirection;
	else
	canvasElement.dir = newDirection;
	resultElement.textContent = ctx.direction == newDirection ? 'PASS' : 'FAIL';
	resultElement.className = ctx.direction == newDirection ? 'pass' : 'fail';
	ctx.moveTo(width, 0);
	ctx.lineTo(width, height);
	ctx.stroke();
	ctx.font = fontSettings;
	ctx.fillText(text, width, height/2);
	}

	function verifyDirectionAcrossSaveRestores(canvasId, resultId, testVector)
	{
	var canvasElement = document.getElementById(canvasId);
	var resultElement = document.getElementById(resultId);
	var ctx = canvasElement.getContext('2d');
	var width = canvasElement.width/2;
	var height = 0;
	ctx.moveTo(width, 0);
	ctx.lineTo(width, canvasElement.height);
	ctx.stroke();
	ctx.font = fontSettings;
	var testVectorLength = testVector.length;
	var i = 0;
	for (; i < testVector.length; ++i) {
	height += 20;
	ctx.direction = testVector[i].direction;
	ctx.fillText(testVector[i].text, width, height);
	if (i != testVectorLength - 1)
	ctx.save();
	}
	var validDirectionCount = 0;
	for (--i; i > 0; --i) {
	ctx.restore();
	if (ctx.direction == testVector[i - 1].direction)
	validDirectionCount++;
	}
	resultElement.textContent = validDirectionCount == testVectorLength - 1 ? 'PASS' : 'FAIL';
	resultElement.className = validDirectionCount == testVectorLength - 1 ? 'pass' : 'fail';
	}

	function verifyInvalidDirection(direction)
	{
	var ctx = document.createElement('canvas').getContext('2d');
	var currentDirection = ctx.direction;
	ctx.direction = direction;
	var description = 'Tests that invalid direction value ' + direction + ' has no effect on the context.direction: ';
	var result = (ctx.direction == currentDirection) ? 'PASS' : 'FAIL';
	appendResult(description, result);
	}

	verifyDrawText('canvas1', 'result1', 'Left-to-Right text', 'ltr');
	verifyDrawText('canvas2', 'result2', 'Right-to-Left text', 'rtl');

	verifyDrawTextWithSpecifiedDirection('canvas3', 'result3', 'Right-to-Left text', 'rtl', 'rtl');
	verifyDrawTextWithSpecifiedDirection('canvas4', 'result4', 'Left-to-Right text', 'ltr', 'ltr');
	verifyDrawTextWithSpecifiedDirection('canvas5', 'result5', 'Left-to-Right text', 'inherit', 'ltr');
	verifyDrawTextWithSpecifiedDirection('canvas6', 'result6', 'Right-to-Left text', 'inherit', 'rtl');

	verifyDirectionAfterReset('canvas7', 'Right-to-Left', 'rtl', 'ltr');
	verifyDirectionAfterReset('canvas8', 'Right-to-Left', 'ltr', 'rtl');

	verifyDirectionAfterAttributeChange('canvas9', 'result9', 'Right-to-Left text', 'rtl', true);
	verifyDirectionAfterAttributeChange('canvas10', 'result10', 'Left-to-Right text', 'ltr', false);

	verifyDirectionAcrossSaveRestores('canvas11',
	'result11',
	[{ text: 'Left-to-Right text', direction: 'ltr' },
	{ text: 'Right-to-Left text', direction: 'rtl' },
	{ text: 'Right-to-Left text', direction: 'rtl' },
	{ text: 'Left-to-Right text', direction: 'ltr' },
	{ text: 'Right-to-Left text', direction: 'rtl' },
	{ text: 'Right-to-Left text', direction: 'rtl' }]);

	verifyInvalidDirection('RTL');
	verifyInvalidDirection('LTR');
	verifyInvalidDirection('INHERIT');
	</script>