Index: third_party/WebKit/LayoutTests/fast/canvas/2d.text.draw.fill.maxWidth.gradient.html |
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/2d.text.draw.fill.maxWidth.gradient.html b/third_party/WebKit/LayoutTests/fast/canvas/2d.text.draw.fill.maxWidth.gradient.html |
index 2fcfd67d27e4f4a4758076277058022eb21a917f..d42ca5795ad482f7419b78fcaa2381624a19c9f4 100644 |
--- a/third_party/WebKit/LayoutTests/fast/canvas/2d.text.draw.fill.maxWidth.gradient.html |
+++ b/third_party/WebKit/LayoutTests/fast/canvas/2d.text.draw.fill.maxWidth.gradient.html |
@@ -1,66 +1,39 @@ |
<!DOCTYPE html> |
-<head> |
+<title>Test that gradient gets applied properly with canvas2d text drawing when filled with maxwidth</title> |
+<script src="../../resources/testharness.js"></script> |
+<script src="../../resources/testharnessreport.js"></script> |
<style> |
@font-face { |
font-family: Ahem; |
src: url('../../resources/Ahem.ttf'); |
} |
</style> |
-</head> |
-<body> |
-<p>On success, there should only be a green rectangle.</p> |
-<canvas id="c" class="output" width="100" height="100"><p class="fallback">FAIL (fallback content)</p></canvas> |
-<div id="console"></div> |
- |
+<canvas width="100" height="100"></canvas> |
<script> |
-function drawCanvas(ctx) { |
- ctx.fillStyle = '#f00'; |
- ctx.fillRect(0,0,100,100); |
- var gradient = ctx.createLinearGradient(0, 0, 100, 100); |
- gradient.addColorStop(0, '#0f0'); |
- gradient.addColorStop(1, '#0f0'); |
- ctx.fillStyle = gradient; |
- ctx.fillText("X", 0, 80, 200); |
- ctx.fillStyle = '#f00'; |
- ctx.fillText("X", 0, 80, -10); |
-} |
- |
-function doDeferredTest() { |
- drawCanvas(ctx); |
- |
- // Check that the letter rendered appropriately |
- var renderedCorrectly = true; |
- |
- // Check that there is only a green rectangle |
- var imageData = ctx.getImageData(50,50,1,1); |
- if (imageData.data[0] != 0) renderedCorrectly = false; |
- if (imageData.data[1] != 255) renderedCorrectly = false; |
- if (imageData.data[2] != 0) renderedCorrectly = false; |
- if (imageData.data[3] != 255) renderedCorrectly = false; |
- |
- if (renderedCorrectly) |
- document.getElementById("console").innerHTML = "TEST PASSED"; |
- else |
- document.getElementById("console").innerHTML = "TEST FAILED"; |
- |
- if (window.testRunner) |
- testRunner.notifyDone(); |
-} |
- |
-if (window.testRunner) { |
- testRunner.dumpAsText(); |
- testRunner.waitUntilDone(); |
-} |
- |
-var canvas = document.getElementById('c'); |
-var ctx = canvas.getContext("2d"); |
-ctx.font = "100px Ahem"; |
- |
-// Kick off loading of the font |
-ctx.fillText(" ", 0, 0); |
- |
-// Wait for the font to load, then run |
-document.fonts.addEventListener('loadingdone', doDeferredTest); |
+async_test(function(t) { |
+ var canvas = document.querySelector('canvas'); |
+ var ctx = canvas.getContext("2d"); |
+ ctx.font = "100px Ahem"; |
+ // Kick off loading of the font. |
+ ctx.fillText(" ", 0, 0); |
+ // Wait for the font to load, then run. |
+ document.fonts.onloadingdone = t.step_func_done(function() { |
+ // Draw to canvas. |
+ ctx.fillStyle = '#f00'; |
+ ctx.fillRect(0, 0, 100, 100); |
+ var gradient = ctx.createLinearGradient(0, 0, 100, 100); |
+ gradient.addColorStop(0, '#0f0'); |
+ gradient.addColorStop(1, '#0f0'); |
+ ctx.fillStyle = gradient; |
+ ctx.fillText("X", 0, 80, 200); |
+ ctx.fillStyle = '#f00'; |
+ ctx.fillText("X", 0, 80, -10); |
+ // Check that there is only a green rectangle. |
+ var imageData = ctx.getImageData(50, 50, 1, 1); |
+ assert_equals(imageData.data[0], 0, "red"); |
+ assert_equals(imageData.data[1], 255, "green"); |
+ assert_equals(imageData.data[2], 0, "blue"); |
+ assert_equals(imageData.data[3], 255, "alpha"); |
+ }); |
+}); |
</script> |
-</body> |
-</html> |