226 lines
9.5 KiB
HTML
226 lines
9.5 KiB
HTML
<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>
|