| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <title>A canvas globalCompositeOperation test with alpha blending</title> | 3 <title>A canvas globalCompositeOperation test with alpha blending</title> |
| 4 <!-- This test was inspired by http://canvex.lazyilluminati.com/misc/composi
tex.html --> | 4 <!-- This test was inspired by http://canvex.lazyilluminati.com/misc/composi
tex.html --> |
| 5 <script type="application/x-javascript"> | 5 <script type="application/x-javascript"> |
| 6 if (window.testRunner) { | 6 if (window.testRunner) { |
| 7 testRunner.dumpAsText(); | 7 testRunner.dumpAsText(); |
| 8 testRunner.waitUntilDone(); | 8 testRunner.waitUntilDone(); |
| 9 } | 9 } |
| 10 | 10 |
| (...skipping 295 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 306 trCanvasElement.appendChild(tdElement); | 306 trCanvasElement.appendChild(tdElement); |
| 307 | 307 |
| 308 // Create div element for pass/fail messages. | 308 // Create div element for pass/fail messages. |
| 309 var messageElement = document.createElement("div"); | 309 var messageElement = document.createElement("div"); |
| 310 tdElement = document.createElement("td"); | 310 tdElement = document.createElement("td"); |
| 311 tdElement.setAttribute("colspan", "2"); | 311 tdElement.setAttribute("colspan", "2"); |
| 312 tdElement.appendChild(messageElement); | 312 tdElement.appendChild(messageElement); |
| 313 trMessageElement.appendChild(tdElement); | 313 trMessageElement.appendChild(tdElement); |
| 314 | 314 |
| 315 var ctx = expectedCanvasElement.getContext("2d"); | 315 var ctx = expectedCanvasElement.getContext("2d"); |
| 316 ctx.lineWidth = 10; |
| 316 // Draw expected image. | 317 // Draw expected image. |
| 317 ctx.globalCompositeOperation = "copy"; | 318 ctx.globalCompositeOperation = "copy"; |
| 318 ctx.fillStyle = getRGBAString(expectedColor.destination); | 319 ctx.fillStyle = getRGBAString(expectedColor.destination); |
| 319 ctx.strokeStyle = getRGBAString(expectedColor.destination); | 320 ctx.strokeStyle = getRGBAString(expectedColor.destination); |
| 320 drawPolicy.drawDestination(ctx); | 321 drawPolicy.drawDestination(ctx); |
| 321 ctx.fillStyle = getRGBAString(expectedColor.source); | 322 ctx.fillStyle = getRGBAString(expectedColor.source); |
| 322 ctx.strokeStyle = getRGBAString(expectedColor.source); | 323 ctx.strokeStyle = getRGBAString(expectedColor.source); |
| 323 drawPolicy.drawSource(ctx); | 324 drawPolicy.drawSource(ctx); |
| 324 ctx.fillStyle = getRGBAString(expectedColor.composition); | 325 ctx.fillStyle = getRGBAString(expectedColor.composition); |
| 325 ctx.strokeStyle = getRGBAString(expectedColor.composition); | 326 ctx.strokeStyle = getRGBAString(expectedColor.composition); |
| 326 drawPolicy.drawComposition(ctx); | 327 drawPolicy.drawComposition(ctx); |
| 327 | 328 |
| 328 ctx = actualCanvasElement.getContext("2d"); | 329 ctx = actualCanvasElement.getContext("2d"); |
| 330 ctx.lineWidth = 10; |
| 329 | 331 |
| 330 // Draw destination rectangle. | 332 // Draw destination rectangle. |
| 331 ctx.globalCompositeOperation = "copy"; | 333 ctx.globalCompositeOperation = "copy"; |
| 332 ctx.fillStyle = getRGBAString(inputColor.destination); | 334 ctx.fillStyle = getRGBAString(inputColor.destination); |
| 333 ctx.strokeStyle = getRGBAString(inputColor.destination); | 335 ctx.strokeStyle = getRGBAString(inputColor.destination); |
| 334 drawPolicy.drawDestination(ctx); | 336 drawPolicy.drawDestination(ctx); |
| 335 | 337 |
| 336 // Draw source rectangle. | 338 // Draw source rectangle. |
| 337 ctx.globalCompositeOperation = type; | 339 ctx.globalCompositeOperation = type; |
| 338 ctx.fillStyle = getRGBAString(inputColor.source); | 340 ctx.fillStyle = getRGBAString(inputColor.source); |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 374 img = ctx.getImageData(0, 0, 1, 1).data; | 376 img = ctx.getImageData(0, 0, 1, 1).data; |
| 375 debugText.value += img[0] + "," + img[1] + "," + img[2] + ","
+ img[3] + "\n"; | 377 debugText.value += img[0] + "," + img[1] + "," + img[2] + ","
+ img[3] + "\n"; |
| 376 img = ctx.getImageData(12, 12, 1, 1).data; | 378 img = ctx.getImageData(12, 12, 1, 1).data; |
| 377 debugText.value += img[0] + "," + img[1] + "," + img[2] + ","
+ img[3] + "\n"; | 379 debugText.value += img[0] + "," + img[1] + "," + img[2] + ","
+ img[3] + "\n"; |
| 378 img = ctx.getImageData(24, 24, 1, 1).data; | 380 img = ctx.getImageData(24, 24, 1, 1).data; |
| 379 debugText.value += img[0] + "," + img[1] + "," + img[2] + ","
+ img[3] + "\n"; | 381 debugText.value += img[0] + "," + img[1] + "," + img[2] + ","
+ img[3] + "\n"; |
| 380 } | 382 } |
| 381 } | 383 } |
| 382 } | 384 } |
| 383 | 385 |
| 384 var useFillRect = { | 386 var useStrokeRect = { |
| 385 drawSource: function(ctx) { | 387 drawSource: function(ctx) { |
| 386 ctx.fillRect(0, 0, 20, 20); | 388 ctx.strokeRect(5, 5, 10, 10); |
| 387 }, | 389 }, |
| 388 | 390 |
| 389 drawDestination: function(ctx) { | 391 drawDestination: function(ctx) { |
| 390 ctx.fillRect(5, 5, 20, 20); | 392 ctx.fillRect(5, 5, 20, 20); |
| 391 }, | 393 }, |
| 392 | 394 |
| 393 drawComposition: function(ctx) { | 395 drawComposition: function(ctx) { |
| 394 ctx.fillRect(5, 5, 15, 15); | 396 ctx.fillRect(5, 5, 15, 15); |
| 395 }, | 397 }, |
| 396 | 398 |
| 397 name: "fill rect" | 399 name: "stroke rect" |
| 398 }; | 400 }; |
| 399 | 401 |
| 400 var usePathAndFill = { | 402 var usePathAndStroke = { |
| 401 drawSource: function(ctx) { | 403 drawSource: function(ctx) { |
| 402 ctx.beginPath(); | 404 ctx.beginPath(); |
| 403 ctx.moveTo(0, 0); | 405 ctx.moveTo(5, 5); |
| 404 ctx.lineTo(15, 0); | 406 ctx.lineTo(15, 5); |
| 405 ctx.lineTo(15, 15); | 407 ctx.lineTo(15, 15); |
| 406 ctx.lineTo(5, 15); | 408 ctx.lineTo(5, 15); |
| 407 ctx.closePath(); | 409 ctx.closePath(); |
| 408 ctx.fill(); | 410 ctx.stroke(); |
| 409 }, | 411 }, |
| 410 | 412 |
| 411 drawDestination: function(ctx) { | 413 drawDestination: function(ctx) { |
| 412 ctx.beginPath(); | 414 ctx.fillRect(5, 5, 20, 20); |
| 413 ctx.moveTo(25, 25); | |
| 414 ctx.lineTo(10, 25); | |
| 415 ctx.lineTo(10, 10); | |
| 416 ctx.lineTo(20, 10); | |
| 417 ctx.closePath(); | |
| 418 ctx.fill(); | |
| 419 }, | 415 }, |
| 420 | 416 |
| 421 drawComposition: function(ctx) { | 417 drawComposition: function(ctx) { |
| 422 ctx.fillRect(10, 10, 5, 5); | 418 ctx.fillRect(5, 5, 15, 15); |
| 423 | |
| 424 ctx.beginPath(); | |
| 425 ctx.closePath(); | |
| 426 ctx.fill(); | |
| 427 }, | 419 }, |
| 428 | 420 |
| 429 name: "path and fill" | 421 name: "path and stroke" |
| 430 }; | 422 }; |
| 431 | 423 |
| 432 function draw() | 424 function draw() |
| 433 { | 425 { |
| 434 drawTable(useFillRect); | 426 drawTable(useStrokeRect); |
| 435 drawTable(usePathAndFill); | 427 drawTable(usePathAndStroke); |
| 436 if (window.testRunner) | 428 if (window.testRunner) |
| 437 testRunner.notifyDone(); | 429 testRunner.notifyDone(); |
| 438 } | 430 } |
| 439 </script> | 431 </script> |
| 440 <style type="text/css"> | 432 <style type="text/css"> |
| 441 body { margin: 20px; font-family: arial,verdana,helvetica; background: #ff
f;} | 433 body { margin: 20px; font-family: arial,verdana,helvetica; background: #ff
f;} |
| 442 h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px
solid #ccc; } | 434 h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px
solid #ccc; } |
| 443 canvas { border: 2px solid #000; margin-bottom: 5px; } | 435 canvas { border: 2px solid #000; margin-bottom: 5px; } |
| 444 table { background: #00f; } | 436 table { background: #00f; } |
| 445 th { font-size: 70%; padding: 0; } | 437 th { font-size: 70%; padding: 0; } |
| 446 td { font-size: 70%; padding: 0; } | 438 td { font-size: 70%; padding: 0; } |
| 447 pre { float:left; display:block; background: rgb(238,238,238); border: 1px
dashed #666; padding: 15px 20px; margin: 0 0 10px 0; } | 439 pre { float:left; display:block; background: rgb(238,238,238); border: 1px
dashed #666; padding: 15px 20px; margin: 0 0 10px 0; } |
| 448 </style> | 440 </style> |
| 449 </head> | 441 </head> |
| 450 <body onload="draw();"> | 442 <body onload="draw();"> |
| 451 <p>This test exercises a bunch of color composition with alpha blending. The
top-left rectangles are the source images and bottom-right rectangles are the d
estination images.</p> | 443 <p>This test exercises a bunch of alpha composition checks with stroking. Th
e top-left rectangles are the source images and bottom-right rectangles are the
destination images.</p> |
| 452 <div id="results"> | 444 <div id="results"> |
| 453 </div> | 445 </div> |
| 454 <textarea id="debug"></textarea> | 446 <textarea id="debug"></textarea> |
| 455 </body> | 447 </body> |
| 456 </html> | 448 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 227213002:
globalCompositeOperation is ignored in stroke, strokeRect. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master