<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../resources/js-test-pre.js"></script>
    </head>
    <body>
        <p>The second and third results should be the same.</p>
        <pre id='console'></pre>
        <canvas></canvas>

        <script>
            "use strict";

            const log = console.log.bind(console);

            const canvas = document.querySelector("canvas");
            const ctx = canvas.getContext("2d");
            log(ctx.getLineDash());

            ctx.setLineDash([1, 2, 3]);
            log("Using an array: " + ctx.getLineDash());

            function* generator() {
                yield 10;
                yield 11;
                yield 12;
            }

            const iterator = generator();
            ctx.setLineDash(iterator);
            let a = ctx.getLineDash();
            log("Using an iterator: " + a);

            const array = [1, 2, 3];
            Object.defineProperty(array, Symbol.iterator, {
                value: () => generator()
            });
            ctx.setLineDash(array);
            let b = ctx.getLineDash();
            log("Using an array but with customized iteration (should be same as iterator): " + b);

            if (a.toString() !== b.toString())
                throw new Error("Bad result. They should be equal.");

        </script>

        <script src="../resources/js-test-post.js"></script>

    </body>
</html>