2d.text.draw.fill.maxWidth.negative.html

<!DOCTYPE html>
<title>Test that color gets applied properly with canvas2d text drawing when filled with negative 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 = "200px 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 = '#0f0';
        ctx.fillRect(0, 0, 100, 100);
        ctx.fillStyle = '#f00';
        ctx.fillText("X", 0, 100, -5);
        // 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>
chromium/third_party/blink/web_tests/fast/canvas/2d.text.draw.fill.maxWidth.negative.html
