Attachment 343322 Details for Bug 186916 – test case

test case

test.html (text/html), 3.29 KB, created by d.lukashenko on 2018-06-22 05:55:42 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: d.lukashenko

Created: 2018-06-22 05:55:42 PDT

Size: 3.29 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
>
></head>
><body id="body">
>    <canvas id="canvaz" width="458" height="228">bad, bad browser.</canvas>
>    <button onclick="javascript:run()">click</button>
>    <script>
>        var ranges = {};
>        ranges.FillRatioLow = 0.001;
>        ranges.FillRatioHigh = 1;
>
>        var body = document.getElementsByTagName('body');
>        var canvas = document.getElementById('canvaz');
>        var startX, startY;
>
>        var context = canvas.getContext('2d');
>        canvas.addEventListener('touchstart', e => onTouchStart(e));
>        canvas.addEventListener('touchend', e => onTouchEnd(e));
>        canvas.addEventListener('touchcancel', e => onTouchCancel(e));
>        canvas.addEventListener('touchmove', e => onTouchMove(e));
>
>        function run() {
>            for (var i = 0; i < 100; i++)
>                test();
>        }
>
>        function startDrawing() {
>            context.beginPath();
>            context.moveTo(startX, startY);
>        }
>
>        function drawLineToCurrentPosition() {
>            context.lineTo(startX, startY);
>            context.stroke();
>        }
>
>        function onTouchStart(e) {
>            if (saveUpdatePositionFromTouch(e.targetTouches)) {
>                startDrawing();
>            }
>        }
>
>        function onTouchEnd(e) {
>            if (saveUpdatePositionFromTouch(e.changedTouches)) {
>                drawLineToCurrentPosition();
>                stopDrawing();
>            }
>        }
>
>        function onTouchCancel() {
>            if (saveUpdatePositionFromTouch(e.targetTouches)) {
>                drawLineToCurrentPosition();
>                stopDrawing();
>            }
>        }
>
>        function onTouchMove(e) {
>            if (saveUpdatePositionFromTouch(e.targetTouches)) {
>                drawLineToCurrentPosition();
>            }
>        }
>
>        function stopDrawing() {
>            context.closePath();
>        }
>
>        function saveUpdatePositionFromTouch(touches) {
>            var rect = canvas.getBoundingClientRect();
>
>            if (touches.length != 1) {
>                return false;
>            }
>
>            startX = touches.item(0).clientX - rect.left;
>            startY = touches.item(0).clientY - rect.top;
>
>            return true;
>        }
>
>        function getImageData() {
>                return context.getImageData(0, 0, canvas.width, canvas.height);
>        }
>        
>        function test() {
>            if (!canvas) {
>                return null;
>            }
>            var data = getImageData();
>            var pixels = data.data.length / 4;
>            var filled = 0;
>            for (var i = 0; i < data.data.length; i += 4) {
>                if (data.data[i] == 0 && data.data[i + 1] == 0 && data.data[i + 2] == 0 && data.data[i + 3] == 0) {
>                    continue;
>                }
>                filled++;
>            }
>            var fillRatio = filled / pixels;
>            if (fillRatio < ranges.FillRatioLow || fillRatio > ranges.FillRatioHigh) {
>                var div = document.createElement('div');
>                div.innerText = "fail (" + fillRatio + ", but should be " + (filled / pixels) + ") ";
>                document.body.appendChild(div);
>            }
>        }
>    </script>
></body>
></html>

<!DOCTYPE html>
<html>
<head>

</head>
<body id="body">
    <canvas id="canvaz" width="458" height="228">bad, bad browser.</canvas>
    <button onclick="javascript:run()">click</button>
    <script>
        var ranges = {};
        ranges.FillRatioLow = 0.001;
        ranges.FillRatioHigh = 1;

        var body = document.getElementsByTagName('body');
        var canvas = document.getElementById('canvaz');
        var startX, startY;

        var context = canvas.getContext('2d');
        canvas.addEventListener('touchstart', e => onTouchStart(e));
        canvas.addEventListener('touchend', e => onTouchEnd(e));
        canvas.addEventListener('touchcancel', e => onTouchCancel(e));
        canvas.addEventListener('touchmove', e => onTouchMove(e));

        function run() {
            for (var i = 0; i < 100; i++)
                test();
        }

        function startDrawing() {
            context.beginPath();
            context.moveTo(startX, startY);
        }

        function drawLineToCurrentPosition() {
            context.lineTo(startX, startY);
            context.stroke();
        }

        function onTouchStart(e) {
            if (saveUpdatePositionFromTouch(e.targetTouches)) {
                startDrawing();
            }
        }

        function onTouchEnd(e) {
            if (saveUpdatePositionFromTouch(e.changedTouches)) {
                drawLineToCurrentPosition();
                stopDrawing();
            }
        }

        function onTouchCancel() {
            if (saveUpdatePositionFromTouch(e.targetTouches)) {
                drawLineToCurrentPosition();
                stopDrawing();
            }
        }

        function onTouchMove(e) {
            if (saveUpdatePositionFromTouch(e.targetTouches)) {
                drawLineToCurrentPosition();
            }
        }

        function stopDrawing() {
            context.closePath();
        }

        function saveUpdatePositionFromTouch(touches) {
            var rect = canvas.getBoundingClientRect();

            if (touches.length != 1) {
                return false;
            }

            startX = touches.item(0).clientX - rect.left;
            startY = touches.item(0).clientY - rect.top;

            return true;
        }

        function getImageData() {
                return context.getImageData(0, 0, canvas.width, canvas.height);
        }
        
        function test() {
            if (!canvas) {
                return null;
            }
            var data = getImageData();
            var pixels = data.data.length / 4;
            var filled = 0;
            for (var i = 0; i < data.data.length; i += 4) {
                if (data.data[i] == 0 && data.data[i + 1] == 0 && data.data[i + 2] == 0 && data.data[i + 3] == 0) {
                    continue;
                }
                filled++;
            }
            var fillRatio = filled / pixels;
            if (fillRatio < ranges.FillRatioLow || fillRatio > ranges.FillRatioHigh) {
                var div = document.createElement('div');
                div.innerText = "fail (" + fillRatio + ", but should be " + (filled / pixels) + ") ";
                document.body.appendChild(div);
            }
        }
    </script>
</body>
</html>

Actions: View

Attachments on bug 186916: 343322 | 359650 | 359658 | 359659 | 359660 | 359664 | 364048 | 364066 | 364562 | 364757