2d.fillText.gradient.html | Explore in Territory

<!DOCTYPE html>
<title>Test that color gradient is applied properly for fillText() in 2d canvas.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<canvas width="100" height="100"></canvas>
<script>
test(function() {
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext("2d");
    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.font = "500px Times";
    ctx.fillText("I", -5, 100);
    // Check for a green pixel from the text.
    var imageData = ctx.getImageData(75,75,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");
    // Check the red pixel outside of text wasn't touched.
    var imageData = ctx.getImageData(25,25,1,1);
    assert_equals(imageData.data[0], 255, "red");
    assert_equals(imageData.data[1], 0, "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.fillText.gradient.html
