| <!-- |
| Tests that image-rendering behavior for WebGL canvas element is the same as |
| for an image with the same contents. |
| Left (canvas element) should be the same as right (image element). |
| --> |
| <body> |
| <style type=text/css> |
| canvas { |
| width: 64px; |
| height: 64px; |
| display: inline-block; |
| } |
| img { |
| width: 64px; |
| height: 64px; |
| display: inline-block; |
| } |
| .pixelated canvas, .pixelated img { |
| image-rendering: pixelated; |
| } |
| .crisp-edges canvas, .crisp-edges img { |
| image-rendering: crisp-edges; |
| } |
| </style> |
| <div class="pixelated"> |
| <canvas width="2" height="2""></canvas> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAqADAAQAAAABAAAAAgAAAADtGLyqAAAADklEQVQIHWNg+A+EyAAAHfQB/5BEIGEAAAAASUVORK5CYII="> |
| </div> |
| <div class="to-be-pixelated"> |
| <canvas width="2" height="2""></canvas> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAqADAAQAAAABAAAAAgAAAADtGLyqAAAADklEQVQIHWNg+A+EyAAAHfQB/5BEIGEAAAAASUVORK5CYII="> |
| </div> |
| <div class="pixelated delayed"> |
| <canvas width="2" height="2""></canvas> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAqADAAQAAAABAAAAAgAAAADtGLyqAAAADklEQVQIHWNg+A+EyAAAHfQB/5BEIGEAAAAASUVORK5CYII="> |
| </div> |
| <div class="crisp-edges"> |
| <canvas width="2" height="2"></canvas> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAqADAAQAAAABAAAAAgAAAADtGLyqAAAADklEQVQIHWNg+A+EyAAAHfQB/5BEIGEAAAAASUVORK5CYII="> |
| </div> |
| <div class="to-be-crisp-edges"> |
| <canvas width="2" height="2"></canvas> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAqADAAQAAAABAAAAAgAAAADtGLyqAAAADklEQVQIHWNg+A+EyAAAHfQB/5BEIGEAAAAASUVORK5CYII="> |
| </div> |
| <div class="crisp-edges delayed"> |
| <canvas width="2" height="2"></canvas> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAqADAAQAAAABAAAAAgAAAADtGLyqAAAADklEQVQIHWNg+A+EyAAAHfQB/5BEIGEAAAAASUVORK5CYII="> |
| </div> |
| <div> |
| <canvas width="2" height="2"></canvas> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAqADAAQAAAABAAAAAgAAAADtGLyqAAAADklEQVQIHWNg+A+EyAAAHfQB/5BEIGEAAAAASUVORK5CYII="> |
| </div> |
| <div class="to-be-cleared pixelated"> |
| <canvas width="2" height="2"></canvas> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAqADAAQAAAABAAAAAgAAAADtGLyqAAAADklEQVQIHWNg+A+EyAAAHfQB/5BEIGEAAAAASUVORK5CYII="> |
| </div> |
| <div class="to-be-cleared crisp-edges"> |
| <canvas width="2" height="2"></canvas> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAqADAAQAAAABAAAAAgAAAADtGLyqAAAADklEQVQIHWNg+A+EyAAAHfQB/5BEIGEAAAAASUVORK5CYII="> |
| </div> |
| |
| <script> |
| if (window.testRunner) { |
| window.testRunner.dumpAsText(true); |
| window.testRunner.waitUntilDone(); |
| } |
| function clear(e) { |
| const gl = e.getContext('webgl'); |
| gl.clearColor(0, 1, 0, 1); |
| gl.enable(gl.SCISSOR_TEST); |
| gl.scissor(0, 1, 1, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| } |
| [...document.querySelectorAll('canvas')].forEach((e) => { |
| if (e.parentNode.className.includes("delayed")) |
| return; |
| clear(e); |
| }); |
| |
| [...document.querySelectorAll('.to-be-cleared')].forEach((e) => { |
| e.className = "" |
| }); |
| window.requestAnimationFrame(() => { |
| [...document.querySelectorAll('.to-be-pixelated')].forEach((e) => { |
| e.className = "pixelated" |
| }); |
| [...document.querySelectorAll('.to-be-crisp-edges')].forEach((e) => { |
| e.className = "crisp-edges" |
| }); |
| [...document.querySelectorAll('div.delayed > canvas')].forEach((e) => { |
| clear(e); |
| }); |
| if (window.testRunner) |
| window.testRunner.notifyDone(); |
| }); |
| </script> |
| </body> |
