chromium/src/third_party/blink/web_tests/fast/canvas/fillText-shadow.html

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<canvas width="600" height="300" style="border: solid 1px gray"></canvas>

<script>

// Tests that (vertical) shadow offsets are applied correctly when using fillText() regardless of blur amount.

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
ctx.font = 'bold 128px sans-serif';
ctx.shadowColor = 'red'
ctx.shadowOffsetY = 100;

function testWithBlur(blur, belowOffset) {
    ctx.clearRect(0, 0, 600, 300);
    ctx.shadowBlur = blur;
    
    // Center the I around the Y axis.
    ctx.fillText('I', -ctx.measureText('I').width/2, 128);

    // Make sure that the shadow doesn't end up above the text...
    var imageData = ctx.getImageData(0, 0, 1, 1).data;
    assert_array_equals(imageData, [0, 0, 0, 0]);

    // ...but below.
    var imageData = ctx.getImageData(0, belowOffset, 1, 1).data;
    assert_array_equals(imageData, [255, 0, 0, 255]);
}

var testScenariosNoTransform = [
    ['TestShadowOffsetWithNoTransform 1', 0, 150],
    ['TestShadowOffsetWithNoTransform 2', 1, 150],
    ['TestShadowOffsetWithNoTransform 3', 5, 150],
];

var testScenariosScaleTransform = [
    ['TestShadowOffsetWithScaleTransform 1', 0, 299],
    ['TestShadowOffsetWithScaleTransform 2', 1, 299],
    ['TestShadowOffsetWithScaleTransform 3', 5, 299],
];

generate_tests(testWithBlur, testScenariosNoTransform);

ctx.scale(1, 2);
generate_tests(testWithBlur, testScenariosScaleTransform);

</script>