<!DOCTYPE html>
<title>Test that color gets applied properly with canvas2d text drawing when filled with large 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>
<canvas width="100" height="100"></canvas>
<script>
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() {
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 100);
ctx.fillStyle = '#f00';
ctx.fillText("X", -100, 100, 200);
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>