<!DOCTYPE html>
<title>Test that color gets applied properly with canvas2d text drawing when filled with small 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("XX", -10, 100, 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>