<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>
Codebase Browser
chromium