Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <style> | 3 <script src="../../resources/testharness.js"></script> |
| 4 .pass { | 4 <script src="../../resources/testharnessreport.js"></script> |
| 5 color: green; | |
| 6 font-weight: bold; | |
| 7 } | |
| 8 | |
| 9 .fail { | |
| 10 color: red; | |
| 11 font-weight: bold; | |
| 12 } | |
| 13 </style> | |
| 14 </head> | 5 </head> |
| 15 <body> | 6 <body> |
| 16 <span>Tests that canvas 2d context supports 'direction' attribute: <span id="sup ported"></span></span> | 7 <span>Tests that canvas 2d context supports 'direction' attribute: <span id="sup ported"></span></span> |
| 17 <div> | 8 <div> |
| 18 <span>Tests that context.direction is 'ltr' with parent element having unspecifi ed direction: <span id="result1"></span></span><br> | 9 <span>Tests that context.direction is 'ltr' with parent element having unspecifi ed direction: <span id="result1"></span></span><br> |
| 19 <canvas id="canvas1" width=400 height=20 style="border:1px solid black"></canvas > | 10 <canvas id="canvas1" width=400 height=20 style="border:1px solid black"></canvas > |
| 20 </div> | 11 </div> |
| 21 <div dir="rtl"> | 12 <div dir="rtl"> |
| 22 <span>Tests that context.direction is 'rtl' with parent element having direction as rtl: <span id="result2"></span></span><br> | 13 <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 > | 14 <canvas id="canvas2" width=400 height=20 style="border:1px solid black"></canvas > |
| (...skipping 30 matching lines...) Expand all Loading... | |
| 54 <span>Tests that change in element's dir attribute is reflected in context.direc tion as ltr: <span id="result10"></span></span><br> | 45 <span>Tests that change in element's dir attribute is reflected in context.direc tion as ltr: <span id="result10"></span></span><br> |
| 55 <canvas id="canvas10" width=400 height=20 style="border:1px solid black"></canva s> | 46 <canvas id="canvas10" width=400 height=20 style="border:1px solid black"></canva s> |
| 56 </div> | 47 </div> |
| 57 <div> | 48 <div> |
| 58 <span>Tests that context.direction reflects the valid direction after save/resto re context operations: <span id="result11"></span></span><br> | 49 <span>Tests that context.direction reflects the valid direction after save/resto re context operations: <span id="result11"></span></span><br> |
| 59 <canvas id="canvas11" style="border:1px solid black"></canvas> | 50 <canvas id="canvas11" style="border:1px solid black"></canvas> |
| 60 </div> | 51 </div> |
| 61 <div id="results"> | 52 <div id="results"> |
| 62 </div> | 53 </div> |
| 63 <script> | 54 <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'"; | 55 var fontSettings = "12px 'Arial'"; |
| 72 | 56 |
| 73 function appendResult(description, result) | 57 function verifyDrawText(canvasId, text, expectedDirection) |
| 74 { | 58 { |
| 75 var descriptionElement = document.createElement('span'); | 59 console.log(canvasId, text, expectedDirection); |
| 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); | 60 var canvasElement = document.getElementById(canvasId); |
| 88 var resultElement = document.getElementById(resultId); | |
| 89 var ctx = canvasElement.getContext('2d'); | 61 var ctx = canvasElement.getContext('2d'); |
| 90 var width = canvasElement.width/2; | 62 var width = canvasElement.width/2; |
| 91 var height = canvasElement.height; | 63 var height = canvasElement.height; |
| 92 resultElement.textContent = (ctx.direction == expectedDirection) ? 'PASS' : 'FAIL'; | 64 assert_equals(ctx.direction, expectedDirection); |
| 93 resultElement.className = (ctx.direction == expectedDirection) ? 'pass' : 'f ail'; | |
| 94 ctx.moveTo(width, 0); | 65 ctx.moveTo(width, 0); |
| 95 ctx.lineTo(width, height); | 66 ctx.lineTo(width, height); |
| 96 ctx.stroke(); | 67 ctx.stroke(); |
| 97 ctx.font = fontSettings; | 68 ctx.font = fontSettings; |
| 98 ctx.fillText(text, width, height/2); | 69 ctx.fillText(text, width, height/2); |
| 99 } | 70 } |
| 100 | 71 |
| 101 function verifyDrawTextWithSpecifiedDirection(canvasId, resultId, text, directio n, expectedDirection) | 72 function verifyDrawTextWithSpecifiedDirection(testItem) |
| 102 { | 73 { |
| 103 var canvasElement = document.getElementById(canvasId); | 74 console.log(testItem); |
| 104 var resultElement = document.getElementById(resultId); | 75 var canvasElement = document.getElementById(testItem['canvasId']); |
| 105 var ctx = canvasElement.getContext('2d'); | 76 var ctx = canvasElement.getContext('2d'); |
| 106 var width = canvasElement.width/2; | 77 var width = canvasElement.width/2; |
| 107 var height = canvasElement.height; | 78 var height = canvasElement.height; |
| 108 var currentDirection = ctx.direction; | 79 var currentDirection = ctx.direction; |
| 109 ctx.direction = direction; | 80 ctx.direction = testItem['direction']; |
| 110 resultElement.textContent = (currentDirection && (ctx.direction == expectedD irection)) ? 'PASS' : 'FAIL'; | 81 assert_not_equals(currentDirection, null); |
| 111 resultElement.className = (currentDirection && (ctx.direction == expectedDir ection)) ? 'pass' : 'fail'; | 82 assert_equals(ctx.direction, testItem['expectedDirection']); |
| 112 ctx.moveTo(width, 0); | 83 ctx.moveTo(width, 0); |
| 113 ctx.lineTo(width, height); | 84 ctx.lineTo(width, height); |
| 114 ctx.stroke(); | 85 ctx.stroke(); |
| 115 ctx.font = fontSettings; | 86 ctx.font = fontSettings; |
| 116 ctx.fillText(text, width, height/2); | 87 ctx.fillText(testItem['text'], width, height/2); |
| 117 } | 88 } |
| 118 | 89 |
| 119 function verifyDirectionAfterReset(canvasId, text, direction, expectedDirection) | 90 function verifyDirectionAfterReset(testItem) |
| 120 { | 91 { |
| 121 var canvasElement = document.getElementById(canvasId); | 92 var canvasElement = document.getElementById(testItem['canvasId']); |
| 122 var width = canvasElement.width/2; | 93 var width = canvasElement.width/2; |
| 123 var height = canvasElement.height; | 94 var height = canvasElement.height; |
| 124 var ctx = canvasElement.getContext('2d'); | 95 var ctx = canvasElement.getContext('2d'); |
| 125 ctx.direction = direction; | 96 ctx.direction = testItem['direction']; |
| 126 ctx.moveTo(width, 0); | 97 ctx.moveTo(width, 0); |
| 127 ctx.lineTo(width, height); | 98 ctx.lineTo(width, height); |
| 128 ctx.stroke(); | 99 ctx.stroke(); |
| 129 ctx.font = fontSettings; | 100 ctx.font = fontSettings; |
| 130 ctx.fillText(text, width, height/2); | 101 ctx.fillText(testItem['text'], width, height/2); |
| 131 canvasElement.width = canvasElement.width + 1; | 102 canvasElement.width = canvasElement.width + 1; |
| 132 var description = 'Tests that context.reset() sets the context.direction to ' + expectedDirection + ': '; | 103 assert_equals(ctx.direction, testItem['expectedDirection']); |
| 133 var result = (ctx.direction == expectedDirection) ? 'PASS' : 'FAIL'; | |
| 134 appendResult(description, result); | |
| 135 document.body.removeChild(canvasElement.parentElement); | 104 document.body.removeChild(canvasElement.parentElement); |
| 136 } | 105 } |
| 137 | 106 |
| 138 function verifyDirectionAfterAttributeChange(canvasId, resultId, text, newDirect ion, forParentElement) | 107 function verifyDirectionAfterAttributeChange(testItem) |
| 139 { | 108 { |
| 140 var canvasElement = document.getElementById(canvasId); | 109 var canvasElement = document.getElementById(testItem['canvasId']); |
| 141 var resultElement = document.getElementById(resultId); | |
| 142 var ctx = canvasElement.getContext('2d'); | 110 var ctx = canvasElement.getContext('2d'); |
| 143 var width = canvasElement.width/2; | 111 var width = canvasElement.width/2; |
| 144 var height = canvasElement.height; | 112 var height = canvasElement.height; |
| 145 | 113 |
| 146 if (forParentElement) | 114 if (testItem['forParentElement']) |
| 147 canvasElement.parentElement.dir = newDirection; | 115 canvasElement.parentElement.dir = testItem['newDirection']; |
| 148 else | 116 else |
| 149 canvasElement.dir = newDirection; | 117 canvasElement.dir = testItem['newDirection']; |
| 150 resultElement.textContent = ctx.direction == newDirection ? 'PASS' : 'FAIL'; | 118 assert_equals(ctx.direction, testItem['newDirection']); |
| 151 resultElement.className = ctx.direction == newDirection ? 'pass' : 'fail'; | |
| 152 ctx.moveTo(width, 0); | 119 ctx.moveTo(width, 0); |
| 153 ctx.lineTo(width, height); | 120 ctx.lineTo(width, height); |
| 154 ctx.stroke(); | 121 ctx.stroke(); |
| 155 ctx.font = fontSettings; | 122 ctx.font = fontSettings; |
| 156 ctx.fillText(text, width, height/2); | 123 ctx.fillText(testItem['text'], width, height/2); |
| 157 } | 124 } |
| 158 | 125 |
| 159 function verifyDirectionAcrossSaveRestores(canvasId, resultId, testVector) | 126 function verifyDirectionAcrossSaveRestores(canvasId, testVector) |
| 160 { | 127 { |
| 161 var canvasElement = document.getElementById(canvasId); | 128 var canvasElement = document.getElementById(canvasId); |
| 162 var resultElement = document.getElementById(resultId); | |
| 163 var ctx = canvasElement.getContext('2d'); | 129 var ctx = canvasElement.getContext('2d'); |
| 164 var width = canvasElement.width/2; | 130 var width = canvasElement.width/2; |
| 165 var height = 0; | 131 var height = 0; |
| 166 ctx.moveTo(width, 0); | 132 ctx.moveTo(width, 0); |
| 167 ctx.lineTo(width, canvasElement.height); | 133 ctx.lineTo(width, canvasElement.height); |
| 168 ctx.stroke(); | 134 ctx.stroke(); |
| 169 ctx.font = fontSettings; | 135 ctx.font = fontSettings; |
| 170 var testVectorLength = testVector.length; | 136 var testVectorLength = testVector.length; |
| 171 var i = 0; | 137 var i = 0; |
| 172 for (; i < testVector.length; ++i) { | 138 for (; i < testVector.length; ++i) { |
| 173 height += 20; | 139 height += 20; |
| 174 ctx.direction = testVector[i].direction; | 140 ctx.direction = testVector[i].direction; |
| 175 ctx.fillText(testVector[i].text, width, height); | 141 ctx.fillText(testVector[i].text, width, height); |
| 176 if (i != testVectorLength - 1) | 142 if (i != testVectorLength - 1) |
| 177 ctx.save(); | 143 ctx.save(); |
| 178 } | 144 } |
| 179 var validDirectionCount = 0; | 145 var validDirectionCount = 0; |
| 180 for (--i; i > 0; --i) { | 146 for (--i; i > 0; --i) { |
| 181 ctx.restore(); | 147 ctx.restore(); |
| 182 if (ctx.direction == testVector[i - 1].direction) | 148 if (ctx.direction == testVector[i - 1].direction) |
| 183 validDirectionCount++; | 149 validDirectionCount++; |
| 184 } | 150 } |
| 185 resultElement.textContent = validDirectionCount == testVectorLength - 1 ? 'P ASS' : 'FAIL'; | 151 assert_equals(validDirectionCount, testVectorLength - 1); |
| 186 resultElement.className = validDirectionCount == testVectorLength - 1 ? 'pas s' : 'fail'; | |
| 187 } | 152 } |
| 188 | 153 |
| 189 function verifyInvalidDirection(direction) | 154 function verifyInvalidDirection(direction) |
| 190 { | 155 { |
| 191 var ctx = document.createElement('canvas').getContext('2d'); | 156 var ctx = document.createElement('canvas').getContext('2d'); |
| 192 var currentDirection = ctx.direction; | 157 var currentDirection = ctx.direction; |
| 193 ctx.direction = direction; | 158 ctx.direction = direction; |
| 194 var description = 'Tests that invalid direction value ' + direction + ' has no effect on the context.direction: '; | 159 assert_equals(ctx.direction, currentDirection); |
| 195 var result = (ctx.direction == currentDirection) ? 'PASS' : 'FAIL'; | |
| 196 appendResult(description, result); | |
| 197 } | 160 } |
| 198 | 161 |
| 199 verifyDrawText('canvas1', 'result1', 'Left-to-Right text', 'ltr'); | 162 test(function(t) { |
| 200 verifyDrawText('canvas2', 'result2', 'Right-to-Left text', 'rtl'); | |
| 201 | 163 |
| 202 verifyDrawTextWithSpecifiedDirection('canvas3', 'result3', 'Right-to-Left text', 'rtl', 'rtl'); | 164 var newCanvasElement = document.createElement('canvas'); |
| 203 verifyDrawTextWithSpecifiedDirection('canvas4', 'result4', 'Left-to-Right text', 'ltr', 'ltr'); | 165 assert_not_equals(newCanvasElement.getContext('2d').direction, null); |
| 204 verifyDrawTextWithSpecifiedDirection('canvas5', 'result5', 'Left-to-Right text', 'inherit', 'ltr'); | 166 |
| 205 verifyDrawTextWithSpecifiedDirection('canvas6', 'result6', 'Right-to-Left text', 'inherit', 'rtl'); | 167 var drawTextTests = [ |
| 168 ['DrawTextTest1', 'canvas1', 'Left-to-Right text', 'ltr'], | |
| 169 ['DrawTextTest2', 'canvas2', 'Right-to-Left text', 'rtl'], | |
| 170 ]; | |
| 171 generate_tests(verifyDrawText, drawTextTests); | |
| 172 | |
| 173 var drawTextWithSpecifiedDirectionTests = [ | |
| 174 ['DrawTextWithSpecifiedDirectionTest1', | |
|
Justin Novosad
2017/02/14 20:22:04
This form is excellent. Very readable, well organi
zakerinasab
2017/02/15 14:53:02
Acknowledged.
| |
| 175 {canvasId: 'canvas3', text: 'Right-to-Left text', direction: 'rtl', exp ectedDirection: 'rtl'}], | |
| 176 ['DrawTextWithSpecifiedDirectionTest2', | |
| 177 {canvasId: 'canvas4', text: 'Left-to-Right text', direction: 'ltr', exp ectedDirection: 'ltr'}], | |
| 178 ['DrawTextWithSpecifiedDirectionTest3', | |
| 179 {canvasId: 'canvas5', text: 'Left-to-Right text', direction: 'inherit', expectedDirection: 'ltr'}], | |
| 180 ['DrawTextWithSpecifiedDirectionTest4', | |
| 181 {canvasId: 'canvas6', text: 'Right-to-Left text', direction: 'inherit', expectedDirection: 'rtl'}], | |
| 182 ]; | |
| 183 generate_tests(verifyDrawTextWithSpecifiedDirection, drawTextWithSpecifiedDi rectionTests); | |
| 184 | |
| 185 var directionAfterResetTests = [ | |
| 186 ['DirectionAfterResetTest1', | |
| 187 {canvasId: 'canvas7', text: 'Right-to-Left', direction: 'rtl', expected Direction: 'ltr'}], | |
| 188 ['DirectionAfterResetTest2', | |
| 189 {canvasId: 'canvas8', text: 'Right-to-Left', direction: 'ltr', expected Direction: 'rtl'}], | |
| 190 ]; | |
| 191 generate_tests(verifyDirectionAfterReset, directionAfterResetTests); | |
| 192 | |
| 193 var directionAfterAttributeChangeTests = [ | |
| 194 ['DirectionAfterResetTest1', | |
| 195 {canvasId: 'canvas9', text: 'Right-to-Left text', newDirection: 'rtl', forParentElement: true}], | |
| 196 ['DirectionAfterResetTest2', | |
| 197 {canvasId: 'canvas10', text: 'Left-to-Right text', newDirection: 'ltr', forParentElement: false}], | |
| 198 ]; | |
| 199 generate_tests(verifyDirectionAfterAttributeChange, directionAfterAttributeC hangeTests); | |
| 200 | |
| 201 verifyDirectionAcrossSaveRestores('canvas11', | |
| 202 [{ text: 'Left-to-Right text', direction: 'ltr' }, | |
| 203 { text: 'Right-to-Left text', direction: 'rtl' }, | |
| 204 { text: 'Right-to-Left text', direction: 'rtl' }, | |
| 205 { text: 'Left-to-Right text', direction: 'ltr' }, | |
| 206 { text: 'Right-to-Left text', direction: 'rtl' }, | |
| 207 { text: 'Right-to-Left text', direction: 'rtl' }]); | |
| 208 var invalidDirectionTests = [ | |
| 209 ['InvalidDirectionTestRTL', 'RTL'], | |
| 210 ['InvalidDirectionTestLTR', 'LTR'], | |
| 211 ['InvalidDirectionTestINHERIT', 'INHERIT'], | |
| 212 ]; | |
| 213 generate_tests(verifyInvalidDirection, invalidDirectionTests); | |
| 206 | 214 |
| 207 verifyDirectionAfterReset('canvas7', 'Right-to-Left', 'rtl', 'ltr'); | 215 }, "Verify that canvas 2d context supports 'direction' attribute."); |
| 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> | 216 </script> |
| OLD | NEW |