16 <span>Tests that canvas 2d context supports 'direction' attribute: <span id="supported"></span></span>
18 <span>Tests that context.direction is 'ltr' with parent element having unspecified direction: <span id="result1"></span></span><br>
19 <canvas id="canvas1" width=400 height=20 style="border:1px solid black"></canvas>
22 <span>Tests that context.direction is 'rtl' with parent element having direction as rtl: <span id="result2"></span></span><br>
23 <canvas id="canvas2" width=400 height=20 style="border:1px solid black"></canvas>
26 <span>Tests that context.direction is overridden by 'rtl' with parent element having unspecified direction: <span id="result3"></span></span><br>
27 <canvas id="canvas3" width=400 height=20 style="border:1px solid black"></canvas>
30 <span>Tests that context.direction is overridden by 'ltr' with parent element having direction as rtl: <span id="result4"></span></span><br>
31 <canvas id="canvas4" width=400 height=20 style="border:1px solid black"></canvas>
34 <span>Tests that context.direction is overridden by 'inherit' with parent element having unspecified direction: <span id="result5"></span></span><br>
35 <canvas id="canvas5" width=400 height=20 style="border:1px solid black"></canvas>
38 <span>Tests that context.direction is overridden by 'inherit' with parent element having direction as rtl: <span id="result6"></span></span><br>
39 <canvas id="canvas6" width=400 height=20 style="border:1px solid black"></canvas>
42 <span>Tests that context.reset sets the direction as ltr<span id="result7"></span></span><br>
43 <canvas id="canvas7" width=400 height=20 style="border:1px solid black"></canvas>
46 <span>Tests that context.reset sets the direction as rtl<span id="result8"></span></span><br>
47 <canvas id="canvas8" width=400 height=20 style="border:1px solid black"></canvas>
50 <span>Tests that change in element's dir attribute is reflected in context.direction as rtl: <span id="result9"></span></span><br>
51 <canvas id="canvas9" width=400 height=20 style="border:1px solid black"></canvas>
54 <span>Tests that change in element's dir attribute is reflected in context.direction as ltr: <span id="result10"></span></span><br>
55 <canvas id="canvas10" width=400 height=20 style="border:1px solid black"></canvas>
58 <span>Tests that context.direction reflects the valid direction after save/restore context operations: <span id="result11"></span></span><br>
59 <canvas id="canvas11" style="border:1px solid black"></canvas>
64 if (window.testRunner)
65 testRunner.dumpAsText();
67 var newCanvasElement = document.createElement('canvas');
68 document.getElementById('supported').textContent = newCanvasElement.getContext('2d').direction ? 'PASS' : 'FAIL';
69 document.getElementById('supported').className = newCanvasElement.getContext('2d').direction ? 'pass' : 'fail';
71 var fontSettings = "12px 'Arial'";
73 function appendResult(description, result)
75 var descriptionElement = document.createElement('span');
76 var resultElement = document.createElement('span');
77 descriptionElement.innerHTML = description;
78 resultElement.textContent = result;
79 resultElement.className = (result === 'PASS') ? 'pass' : 'fail';
80 descriptionElement.appendChild(resultElement);
81 document.getElementById("results").appendChild(descriptionElement);
82 document.getElementById("results").appendChild(document.createElement('br'));
85 function verifyDrawText(canvasId, resultId, text, expectedDirection)
87 var canvasElement = document.getElementById(canvasId);
88 var resultElement = document.getElementById(resultId);
89 var ctx = canvasElement.getContext('2d');
90 var width = canvasElement.width/2;
91 var height = canvasElement.height;
92 resultElement.textContent = (ctx.direction == expectedDirection) ? 'PASS' : 'FAIL';
93 resultElement.className = (ctx.direction == expectedDirection) ? 'pass' : 'fail';
95 ctx.lineTo(width, height);
97 ctx.font = fontSettings;
98 ctx.fillText(text, width, height/2);
101 function verifyDrawTextWithSpecifiedDirection(canvasId, resultId, text, direction, expectedDirection)
103 var canvasElement = document.getElementById(canvasId);
104 var resultElement = document.getElementById(resultId);
105 var ctx = canvasElement.getContext('2d');
106 var width = canvasElement.width/2;
107 var height = canvasElement.height;
108 var currentDirection = ctx.direction;
109 ctx.direction = direction;
110 resultElement.textContent = (currentDirection && (ctx.direction == expectedDirection)) ? 'PASS' : 'FAIL';
111 resultElement.className = (currentDirection && (ctx.direction == expectedDirection)) ? 'pass' : 'fail';
112 ctx.moveTo(width, 0);
113 ctx.lineTo(width, height);
115 ctx.font = fontSettings;
116 ctx.fillText(text, width, height/2);
119 function verifyDirectionAfterReset(canvasId, text, direction, expectedDirection)
121 var canvasElement = document.getElementById(canvasId);
122 var width = canvasElement.width/2;
123 var height = canvasElement.height;
124 var ctx = canvasElement.getContext('2d');
125 ctx.direction = direction;
126 ctx.moveTo(width, 0);
127 ctx.lineTo(width, height);
129 ctx.font = fontSettings;
130 ctx.fillText(text, width, height/2);
131 canvasElement.width = canvasElement.width + 1;
132 var description = 'Tests that context.reset() sets the context.direction to ' + expectedDirection + ': ';
133 var result = (ctx.direction == expectedDirection) ? 'PASS' : 'FAIL';
134 appendResult(description, result);
135 document.body.removeChild(canvasElement.parentElement);
138 function verifyDirectionAfterAttributeChange(canvasId, resultId, text, newDirection, forParentElement)
140 var canvasElement = document.getElementById(canvasId);
141 var resultElement = document.getElementById(resultId);
142 var ctx = canvasElement.getContext('2d');
143 var width = canvasElement.width/2;
144 var height = canvasElement.height;
146 if (forParentElement)
147 canvasElement.parentElement.dir = newDirection;
149 canvasElement.dir = newDirection;
150 resultElement.textContent = ctx.direction == newDirection ? 'PASS' : 'FAIL';
151 resultElement.className = ctx.direction == newDirection ? 'pass' : 'fail';
152 ctx.moveTo(width, 0);
153 ctx.lineTo(width, height);
155 ctx.font = fontSettings;
156 ctx.fillText(text, width, height/2);
159 function verifyDirectionAcrossSaveRestores(canvasId, resultId, testVector)
161 var canvasElement = document.getElementById(canvasId);
162 var resultElement = document.getElementById(resultId);
163 var ctx = canvasElement.getContext('2d');
164 var width = canvasElement.width/2;
166 ctx.moveTo(width, 0);
167 ctx.lineTo(width, canvasElement.height);
169 ctx.font = fontSettings;
170 var testVectorLength = testVector.length;
172 for (; i < testVector.length; ++i) {
174 ctx.direction = testVector[i].direction;
175 ctx.fillText(testVector[i].text, width, height);
176 if (i != testVectorLength - 1)
179 var validDirectionCount = 0;
180 for (--i; i > 0; --i) {
182 if (ctx.direction == testVector[i - 1].direction)
183 validDirectionCount++;
185 resultElement.textContent = validDirectionCount == testVectorLength - 1 ? 'PASS' : 'FAIL';
186 resultElement.className = validDirectionCount == testVectorLength - 1 ? 'pass' : 'fail';
189 function verifyInvalidDirection(direction)
191 var ctx = document.createElement('canvas').getContext('2d');
192 var currentDirection = ctx.direction;
193 ctx.direction = direction;
194 var description = 'Tests that invalid direction value ' + direction + ' has no effect on the context.direction: ';
195 var result = (ctx.direction == currentDirection) ? 'PASS' : 'FAIL';
196 appendResult(description, result);
199 verifyDrawText('canvas1', 'result1', 'Left-to-Right text', 'ltr');
200 verifyDrawText('canvas2', 'result2', 'Right-to-Left text', 'rtl');
202 verifyDrawTextWithSpecifiedDirection('canvas3', 'result3', 'Right-to-Left text', 'rtl', 'rtl');
203 verifyDrawTextWithSpecifiedDirection('canvas4', 'result4', 'Left-to-Right text', 'ltr', 'ltr');
204 verifyDrawTextWithSpecifiedDirection('canvas5', 'result5', 'Left-to-Right text', 'inherit', 'ltr');
205 verifyDrawTextWithSpecifiedDirection('canvas6', 'result6', 'Right-to-Left text', 'inherit', 'rtl');
207 verifyDirectionAfterReset('canvas7', 'Right-to-Left', 'rtl', 'ltr');
208 verifyDirectionAfterReset('canvas8', 'Right-to-Left', 'ltr', 'rtl');
210 verifyDirectionAfterAttributeChange('canvas9', 'result9', 'Right-to-Left text', 'rtl', true);
211 verifyDirectionAfterAttributeChange('canvas10', 'result10', 'Left-to-Right text', 'ltr', false);
213 verifyDirectionAcrossSaveRestores('canvas11',
215 [{ text: 'Left-to-Right text', direction: 'ltr' },
216 { text: 'Right-to-Left text', direction: 'rtl' },
217 { text: 'Right-to-Left text', direction: 'rtl' },
218 { text: 'Left-to-Right text', direction: 'ltr' },
219 { text: 'Right-to-Left text', direction: 'rtl' },
220 { text: 'Right-to-Left text', direction: 'rtl' }]);
222 verifyInvalidDirection('RTL');
223 verifyInvalidDirection('LTR');
224 verifyInvalidDirection('INHERIT');