chromium/src/third_party/blink/web_tests/fast/canvas-api/canvas-direction.html - manifest_repos/chromium_src - Git at Google

 <html>
 <head>
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 </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>
 var fontSettings = "12px 'Arial'";

 function verifyDrawText(canvasId, text, expectedDirection)
 {
     var canvasElement = document.getElementById(canvasId);
     var ctx = canvasElement.getContext('2d');
     var width = canvasElement.width/2;
     var height = canvasElement.height;
     assert_equals(ctx.direction, expectedDirection);
     ctx.moveTo(width, 0);
     ctx.lineTo(width, height);
     ctx.stroke();
     ctx.font = fontSettings;
     ctx.fillText(text, width, height/2);
 }

 function verifyDrawTextWithSpecifiedDirection(testItem)
 {
     var canvasElement = document.getElementById(testItem['canvasId']);
     var ctx = canvasElement.getContext('2d');
     var width = canvasElement.width/2;
     var height = canvasElement.height;
     var currentDirection = ctx.direction;
     ctx.direction = testItem['direction'];
     assert_not_equals(currentDirection, null);
     assert_equals(ctx.direction, testItem['expectedDirection']);
     ctx.moveTo(width, 0);
     ctx.lineTo(width, height);
     ctx.stroke();
     ctx.font = fontSettings;
     ctx.fillText(testItem['text'], width, height/2);
 }

 function verifyDirectionAfterReset(testItem)
 {
     var canvasElement = document.getElementById(testItem['canvasId']);
     var width = canvasElement.width/2;
     var height = canvasElement.height;
     var ctx = canvasElement.getContext('2d');
     ctx.direction = testItem['direction'];
     ctx.moveTo(width, 0);
     ctx.lineTo(width, height);
     ctx.stroke();
     ctx.font = fontSettings;
     ctx.fillText(testItem['text'], width, height/2);
     canvasElement.width = canvasElement.width + 1;
     assert_equals(ctx.direction, testItem['expectedDirection']);
     document.body.removeChild(canvasElement.parentElement);
 }

 function verifyDirectionAfterAttributeChange(testItem)
 {
     var canvasElement = document.getElementById(testItem['canvasId']);
     var ctx = canvasElement.getContext('2d');
     var width = canvasElement.width/2;
     var height = canvasElement.height;

     if (testItem['forParentElement'])
         canvasElement.parentElement.dir = testItem['newDirection'];
     else
         canvasElement.dir = testItem['newDirection'];
     assert_equals(ctx.direction, testItem['newDirection']);
     ctx.moveTo(width, 0);
     ctx.lineTo(width, height);
     ctx.stroke();
     ctx.font = fontSettings;
     ctx.fillText(testItem['text'], width, height/2);
 }

 function verifyDirectionAcrossSaveRestores(canvasId, testVector)
 {
     var canvasElement = document.getElementById(canvasId);
     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++;
     }
     assert_equals(validDirectionCount, testVectorLength - 1);
 }

 function verifyInvalidDirection(direction)
 {
     var ctx = document.createElement('canvas').getContext('2d');
     var currentDirection = ctx.direction;
     ctx.direction = direction;
     assert_equals(ctx.direction, currentDirection);
 }

 test(function(t) {

     var newCanvasElement = document.createElement('canvas');
     assert_not_equals(newCanvasElement.getContext('2d').direction, null);

     var drawTextTests = [
         ['DrawTextTest1', 'canvas1', 'Left-to-Right text', 'ltr'],
         ['DrawTextTest2', 'canvas2', 'Right-to-Left text', 'rtl'],
     ];
     generate_tests(verifyDrawText, drawTextTests);

     var drawTextWithSpecifiedDirectionTests = [
         ['DrawTextWithSpecifiedDirectionTest1',
          {canvasId: 'canvas3', text: 'Right-to-Left text', direction: 'rtl', expectedDirection: 'rtl'}],
         ['DrawTextWithSpecifiedDirectionTest2',
          {canvasId: 'canvas4', text: 'Left-to-Right text', direction: 'ltr', expectedDirection: 'ltr'}],
         ['DrawTextWithSpecifiedDirectionTest3',
          {canvasId: 'canvas5', text: 'Left-to-Right text', direction: 'inherit', expectedDirection: 'ltr'}],
         ['DrawTextWithSpecifiedDirectionTest4',
          {canvasId: 'canvas6', text: 'Right-to-Left text', direction: 'inherit', expectedDirection: 'rtl'}],
     ];
     generate_tests(verifyDrawTextWithSpecifiedDirection, drawTextWithSpecifiedDirectionTests);

     var directionAfterResetTests = [
         ['DirectionAfterResetTest1',
          {canvasId: 'canvas7', text: 'Right-to-Left', direction: 'rtl', expectedDirection: 'ltr'}],
         ['DirectionAfterResetTest2',
          {canvasId: 'canvas8', text: 'Right-to-Left', direction: 'ltr', expectedDirection: 'rtl'}],
     ];
     generate_tests(verifyDirectionAfterReset, directionAfterResetTests);

     var directionAfterAttributeChangeTests = [
         ['DirectionAfterResetTest3',
          {canvasId: 'canvas9', text: 'Right-to-Left text', newDirection: 'rtl', forParentElement: true}],
         ['DirectionAfterResetTest4',
          {canvasId: 'canvas10', text: 'Left-to-Right text', newDirection: 'ltr', forParentElement: false}],
     ];
     generate_tests(verifyDirectionAfterAttributeChange, directionAfterAttributeChangeTests);

     verifyDirectionAcrossSaveRestores('canvas11',
                                       [{ 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' }]);
     var invalidDirectionTests = [
         ['InvalidDirectionTestRTL', 'RTL'],
         ['InvalidDirectionTestLTR', 'LTR'],
         ['InvalidDirectionTestINHERIT', 'INHERIT'],
     ];
     generate_tests(verifyInvalidDirection, invalidDirectionTests);
 }, "Verify that canvas 2d context supports 'direction' attribute.");
 </script>
	<html>
	<head>
	<script src="../../resources/testharness.js"></script>
	<script src="../../resources/testharnessreport.js"></script>
	</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>
	var fontSettings = "12px 'Arial'";

	function verifyDrawText(canvasId, text, expectedDirection)
	{
	var canvasElement = document.getElementById(canvasId);
	var ctx = canvasElement.getContext('2d');
	var width = canvasElement.width/2;
	var height = canvasElement.height;
	assert_equals(ctx.direction, expectedDirection);
	ctx.moveTo(width, 0);
	ctx.lineTo(width, height);
	ctx.stroke();
	ctx.font = fontSettings;
	ctx.fillText(text, width, height/2);
	}

	function verifyDrawTextWithSpecifiedDirection(testItem)
	{
	var canvasElement = document.getElementById(testItem['canvasId']);
	var ctx = canvasElement.getContext('2d');
	var width = canvasElement.width/2;
	var height = canvasElement.height;
	var currentDirection = ctx.direction;
	ctx.direction = testItem['direction'];
	assert_not_equals(currentDirection, null);
	assert_equals(ctx.direction, testItem['expectedDirection']);
	ctx.moveTo(width, 0);
	ctx.lineTo(width, height);
	ctx.stroke();
	ctx.font = fontSettings;
	ctx.fillText(testItem['text'], width, height/2);
	}

	function verifyDirectionAfterReset(testItem)
	{
	var canvasElement = document.getElementById(testItem['canvasId']);
	var width = canvasElement.width/2;
	var height = canvasElement.height;
	var ctx = canvasElement.getContext('2d');
	ctx.direction = testItem['direction'];
	ctx.moveTo(width, 0);
	ctx.lineTo(width, height);
	ctx.stroke();
	ctx.font = fontSettings;
	ctx.fillText(testItem['text'], width, height/2);
	canvasElement.width = canvasElement.width + 1;
	assert_equals(ctx.direction, testItem['expectedDirection']);
	document.body.removeChild(canvasElement.parentElement);
	}

	function verifyDirectionAfterAttributeChange(testItem)
	{
	var canvasElement = document.getElementById(testItem['canvasId']);
	var ctx = canvasElement.getContext('2d');
	var width = canvasElement.width/2;
	var height = canvasElement.height;

	if (testItem['forParentElement'])
	canvasElement.parentElement.dir = testItem['newDirection'];
	else
	canvasElement.dir = testItem['newDirection'];
	assert_equals(ctx.direction, testItem['newDirection']);
	ctx.moveTo(width, 0);
	ctx.lineTo(width, height);
	ctx.stroke();
	ctx.font = fontSettings;
	ctx.fillText(testItem['text'], width, height/2);
	}

	function verifyDirectionAcrossSaveRestores(canvasId, testVector)
	{
	var canvasElement = document.getElementById(canvasId);
	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++;
	}
	assert_equals(validDirectionCount, testVectorLength - 1);
	}

	function verifyInvalidDirection(direction)
	{
	var ctx = document.createElement('canvas').getContext('2d');
	var currentDirection = ctx.direction;
	ctx.direction = direction;
	assert_equals(ctx.direction, currentDirection);
	}

	test(function(t) {

	var newCanvasElement = document.createElement('canvas');
	assert_not_equals(newCanvasElement.getContext('2d').direction, null);

	var drawTextTests = [
	['DrawTextTest1', 'canvas1', 'Left-to-Right text', 'ltr'],
	['DrawTextTest2', 'canvas2', 'Right-to-Left text', 'rtl'],
	];
	generate_tests(verifyDrawText, drawTextTests);

	var drawTextWithSpecifiedDirectionTests = [
	['DrawTextWithSpecifiedDirectionTest1',
	{canvasId: 'canvas3', text: 'Right-to-Left text', direction: 'rtl', expectedDirection: 'rtl'}],
	['DrawTextWithSpecifiedDirectionTest2',
	{canvasId: 'canvas4', text: 'Left-to-Right text', direction: 'ltr', expectedDirection: 'ltr'}],
	['DrawTextWithSpecifiedDirectionTest3',
	{canvasId: 'canvas5', text: 'Left-to-Right text', direction: 'inherit', expectedDirection: 'ltr'}],
	['DrawTextWithSpecifiedDirectionTest4',
	{canvasId: 'canvas6', text: 'Right-to-Left text', direction: 'inherit', expectedDirection: 'rtl'}],
	];
	generate_tests(verifyDrawTextWithSpecifiedDirection, drawTextWithSpecifiedDirectionTests);

	var directionAfterResetTests = [
	['DirectionAfterResetTest1',
	{canvasId: 'canvas7', text: 'Right-to-Left', direction: 'rtl', expectedDirection: 'ltr'}],
	['DirectionAfterResetTest2',
	{canvasId: 'canvas8', text: 'Right-to-Left', direction: 'ltr', expectedDirection: 'rtl'}],
	];
	generate_tests(verifyDirectionAfterReset, directionAfterResetTests);

	var directionAfterAttributeChangeTests = [
	['DirectionAfterResetTest3',
	{canvasId: 'canvas9', text: 'Right-to-Left text', newDirection: 'rtl', forParentElement: true}],
	['DirectionAfterResetTest4',
	{canvasId: 'canvas10', text: 'Left-to-Right text', newDirection: 'ltr', forParentElement: false}],
	];
	generate_tests(verifyDirectionAfterAttributeChange, directionAfterAttributeChangeTests);

	verifyDirectionAcrossSaveRestores('canvas11',
	[{ 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' }]);
	var invalidDirectionTests = [
	['InvalidDirectionTestRTL', 'RTL'],
	['InvalidDirectionTestLTR', 'LTR'],
	['InvalidDirectionTestINHERIT', 'INHERIT'],
	];
	generate_tests(verifyInvalidDirection, invalidDirectionTests);
	}, "Verify that canvas 2d context supports 'direction' attribute.");
	</script>