third_party/WebKit/LayoutTests/fast/canvas/canvas-direction.html

   1 <html>
   2 <head>
   3 <style>
   4 .pass {
   5     color: green;
   6     font-weight: bold;
   7 }
   8
   9 .fail {
  10     color: red;
  11     font-weight: bold;
  12 }
  13 </style>
  14 </head>
  15 <body>
  16 <span>Tests that canvas 2d context supports 'direction' attribute: <span id="supported"></span></span>
  17 <div>
  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>
  20 </div>
  21 <div dir="rtl">
  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>
  24 </div>
  25 <div>
  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>
  28 </div>
  29 <div dir="rtl">
  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>
  32 </div>
  33 <div>
  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>
  36 </div>
  37 <div dir="rtl">
  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>
  40 </div>
  41 <div>
  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>
  44 </div>
  45 <div dir="rtl">
  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>
  48 </div>
  49 <div>
  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>
  52 </div>
  53 <div dir="rtl">
  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>
  56 </div>
  57 <div>
  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>
  60 </div>
  61 <div id="results">
  62 </div>
  63 <script>
  64 if (window.testRunner)
  65     testRunner.dumpAsText();
  66
  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';
  70
  71 var fontSettings = "12px 'Arial'";
  72
  73 function appendResult(description, result)
  74 {
  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'));
  83 }
  84
  85 function verifyDrawText(canvasId, resultId, text, expectedDirection)
  86 {
  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';
  94     ctx.moveTo(width, 0);
  95     ctx.lineTo(width, height);
  96     ctx.stroke();
  97     ctx.font = fontSettings;
  98     ctx.fillText(text, width, height/2);
  99 }
 100
 101 function verifyDrawTextWithSpecifiedDirection(canvasId, resultId, text, direction, expectedDirection)
 102 {
 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);
 114     ctx.stroke();
 115     ctx.font = fontSettings;
 116     ctx.fillText(text, width, height/2);
 117 }
 118
 119 function verifyDirectionAfterReset(canvasId, text, direction, expectedDirection)
 120 {
 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);
 128     ctx.stroke();
 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);
 136 }
 137
 138 function verifyDirectionAfterAttributeChange(canvasId, resultId, text, newDirection, forParentElement)
 139 {
 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;
 145
 146     if (forParentElement)
 147         canvasElement.parentElement.dir = newDirection;
 148     else
 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);
 154     ctx.stroke();
 155     ctx.font = fontSettings;
 156     ctx.fillText(text, width, height/2);
 157 }
 158
 159 function verifyDirectionAcrossSaveRestores(canvasId, resultId, testVector)
 160 {
 161     var canvasElement = document.getElementById(canvasId);
 162     var resultElement = document.getElementById(resultId);
 163     var ctx = canvasElement.getContext('2d');
 164     var width = canvasElement.width/2;
 165     var height = 0;
 166     ctx.moveTo(width, 0);
 167     ctx.lineTo(width, canvasElement.height);
 168     ctx.stroke();
 169     ctx.font = fontSettings;
 170     var testVectorLength = testVector.length;
 171     var i = 0;
 172     for (; i < testVector.length; ++i) {
 173         height += 20;
 174         ctx.direction = testVector[i].direction;
 175         ctx.fillText(testVector[i].text, width, height);
 176         if (i != testVectorLength - 1)
 177             ctx.save();
 178     }
 179     var validDirectionCount = 0;
 180     for (--i; i > 0; --i) {
 181         ctx.restore();
 182         if (ctx.direction == testVector[i - 1].direction)
 183             validDirectionCount++;
 184     }
 185     resultElement.textContent = validDirectionCount == testVectorLength - 1 ? 'PASS' : 'FAIL';
 186     resultElement.className = validDirectionCount == testVectorLength - 1 ? 'pass' : 'fail';
 187 }
 188
 189 function verifyInvalidDirection(direction)
 190 {
 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);
 197 }
 198
 199 verifyDrawText('canvas1', 'result1', 'Left-to-Right text', 'ltr');
 200 verifyDrawText('canvas2', 'result2', 'Right-to-Left text', 'rtl');
 201
 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');
 206
 207 verifyDirectionAfterReset('canvas7', 'Right-to-Left', 'rtl', 'ltr');
 208 verifyDirectionAfterReset('canvas8', 'Right-to-Left', 'ltr', 'rtl');
 209
 210 verifyDirectionAfterAttributeChange('canvas9', 'result9', 'Right-to-Left text', 'rtl', true);
 211 verifyDirectionAfterAttributeChange('canvas10', 'result10', 'Left-to-Right text', 'ltr', false);
 212
 213 verifyDirectionAcrossSaveRestores('canvas11',
 214                                   'result11',
 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' }]);
 221
 222 verifyInvalidDirection('RTL');
 223 verifyInvalidDirection('LTR');
 224 verifyInvalidDirection('INHERIT');
 225 </script>