canvas-ellipse-360-winding.html | Explore in Territory

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>
test(function(t) {
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas)
    canvas.setAttribute('width', '300');
    canvas.setAttribute('height', '150');
    var ctx = canvas.getContext('2d');
    
    var r;
    var anticlockwise = true;
    ctx.beginPath();
    for (r = 200; r >= 10; r -= 10) {
        ctx.moveTo(150 + r, 75);
        // Test that anticlockwise is both optional and defaults to false.
        if (anticlockwise) {
          ctx.ellipse(150, 75, r, r * 1.2, 0, 0, Math.PI * 2, anticlockwise);
        } else {
          ctx.ellipse(150, 75, r, r * 1.2, 0, 0, Math.PI * 2);
        }
        ctx.closePath();
        anticlockwise = !anticlockwise;
    }
    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
    ctx.strokeStyle = 'rgba(0, 255, 0, 1)';
    ctx.fill();
    ctx.stroke();
    
    var imageData = ctx.getImageData(297, 75, 1, 1);
    var data = imageData.data;
    assert_equals(data[1], 0);
    
    imageData = ctx.getImageData(295, 144, 1, 1);
    data = imageData.data;
    assert_equals(data[1], 255);
    
    imageData = ctx.getImageData(272, 144, 1, 1);
    data = imageData.data;
    assert_equals(data[1], 255);
    
    imageData = ctx.getImageData(262, 144, 1, 1);
    data = imageData.data;
    assert_equals(data[1], 0);
    
    imageData = ctx.getImageData(239, 144, 1, 1);
    data = imageData.data;
    assert_equals(data[1], 0);
    
    imageData = ctx.getImageData(228, 144, 1, 1);
    data = imageData.data;
    assert_equals(data[1], 255);
}, "This tests canvas full arc fill with nonzero winding rule. Eight green concentric thick circumferences should be displayed.");
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-ellipse-360-winding.html
