diff options
Diffstat (limited to 'testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref')
8 files changed, 249 insertions, 0 deletions
diff --git a/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_clear-ref.html b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_clear-ref.html new file mode 100644 index 0000000000..e37b78c3a6 --- /dev/null +++ b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_clear-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <title>WebGPU canvas_clear (ref)</title> + <meta charset="utf-8" /> + <link rel="help" href="https://gpuweb.github.io/gpuweb/" /> + <canvas id="cvs0" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <canvas id="cvs1" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <canvas id="cvs2" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <script> + function draw(canvas) { + var c = document.getElementById(canvas); + var ctx = c.getContext('2d'); + ctx.fillStyle = '#66FF00'; + ctx.fillRect(0, 0, c.width, c.height); + } + + draw('cvs0'); + draw('cvs1'); + draw('cvs2'); + + </script> +</html> diff --git a/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_colorspace-ref.html b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_colorspace-ref.html new file mode 100644 index 0000000000..a6da9f6748 --- /dev/null +++ b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_colorspace-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <title>WebGPU canvas_colorspace (ref)</title> + <meta charset="utf-8" /> + <link rel="help" href="https://gpuweb.github.io/gpuweb/" /> + <style> + canvas { + width: 128px; + height: 128px; + margin-right: 5px; + image-rendering: pixelated; + image-rendering: crisp-edges; + } + </style> + <body></body> + <script type="module" src="canvas_colorspace-ref.html.js"></script> +</html> diff --git a/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_complex-ref.html b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_complex-ref.html new file mode 100644 index 0000000000..b1d46c108a --- /dev/null +++ b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_complex-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <title>WebGPU canvas_complex (ref)</title> + <meta charset="utf-8" /> + <link rel="help" href="https://gpuweb.github.io/gpuweb/" /> + <canvas id="cvs0" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <canvas id="cvs1" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <canvas id="cvs2" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <script> + function draw(ctx) { + ctx.fillStyle = '#660000'; + ctx.fillRect(0, 0, 10, 10); + ctx.fillStyle = '#006600'; + ctx.fillRect(10, 0, 10, 10); + ctx.fillStyle = '#000066'; + ctx.fillRect(0, 10, 10, 10); + ctx.fillStyle = '#666600'; + ctx.fillRect(10, 10, 10, 10); + } + + draw(cvs0.getContext('2d')); + draw(cvs1.getContext('2d')); + draw(cvs2.getContext('2d')); + + </script> +</html> diff --git a/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_composite_alpha_opaque-ref.html b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_composite_alpha_opaque-ref.html new file mode 100644 index 0000000000..94b9486514 --- /dev/null +++ b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_composite_alpha_opaque-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <title>WebGPU canvas_composite_alpha_premultiplied (ref)</title> + <meta charset="utf-8" /> + <link rel="help" href="https://gpuweb.github.io/gpuweb/" /> + <style> + body { background-color: #F0E68C; } + #c-canvas { background-color: #8CF0E6; } + </style> + <canvas id="c-body" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <canvas id="c-canvas" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <script> + document.querySelectorAll('canvas').forEach(canvas => { + const ctx = canvas.getContext('2d'); + ctx.globalAlpha = 1.0; + ctx.fillStyle = '#660000'; + ctx.fillRect(0, 0, 15, 15); + ctx.fillStyle = '#006600'; + ctx.fillRect(5, 0, 15, 15); + ctx.fillStyle = '#000066'; + ctx.fillRect(0, 5, 15, 20); + ctx.fillStyle = '#666600'; + ctx.fillRect(5, 5, 20, 20); + }); + </script> +</html> diff --git a/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_composite_alpha_premultiplied-ref.html b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_composite_alpha_premultiplied-ref.html new file mode 100644 index 0000000000..635625ecc7 --- /dev/null +++ b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_composite_alpha_premultiplied-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <title>WebGPU canvas_composite_alpha_premultiplied (ref)</title> + <meta charset="utf-8" /> + <link rel="help" href="https://gpuweb.github.io/gpuweb/" /> + <style> + body { background-color: #F0E68C; } + #c-canvas { background-color: #8CF0E6; } + </style> + <canvas id="c-body" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <canvas id="c-canvas" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <script> + document.querySelectorAll('canvas').forEach(canvas => { + const ctx = canvas.getContext('2d'); + ctx.globalAlpha = 0.5; + ctx.fillStyle = '#660000'; + ctx.fillRect(0, 0, 15, 15); + ctx.fillStyle = '#006600'; + ctx.fillRect(5, 0, 15, 15); + ctx.fillStyle = '#000066'; + ctx.fillRect(0, 5, 15, 20); + ctx.fillStyle = '#666600'; + ctx.fillRect(5, 5, 20, 20); + }); + </script> +</html> diff --git a/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_image_rendering-ref.html b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_image_rendering-ref.html new file mode 100644 index 0000000000..56e3453c56 --- /dev/null +++ b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/canvas_image_rendering-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <title>WebGPU canvas_image_rendering (ref)</title> + <meta charset="utf-8" /> + <link rel="help" href="https://gpuweb.github.io/gpuweb/" /> + <img id="elem1" width="64" height="64" style="width: 128px; height: 128px;"> + <img id="elem2" width="64" height="64" style="width: 128px; height: 128px; image-rendering: pixelated;"> + <img id="elem3" width="64" height="64" style="width: 128px; height: 128px; image-rendering: crisp-edges"> + <img id="elem4" width="64" height="64" style="width: 128px; height: 128px;"> + <img id="elem5" width="64" height="64" style="width: 128px; height: 128px; image-rendering: pixelated;"> + <img id="elem6" width="64" height="64" style="width: 128px; height: 128px; image-rendering: crisp-edges"> + <script type="module"> + import { takeScreenshotDelayed } from '../../../../common/util/wpt_reftest_wait.js'; + + (async () => { + const dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAKdJREFUeF7t28kJwDAQA0Cp/6I3hJAqNK/kazDr2atJ7u7S9v3Z+76nnz18m7oBboAYIAZMRv//1fMKcAAHkCAJLuYAXoEv8ZMLcAAHcAAHcAAHjBZEOeBSDuAADuAADuAADtjrCqsIqQh98xAkSIIkSIIkSIIkSIKrYzJ6gyRIgiRIgiRIgiRIgiRoZ2hwYcp8gKqwSVF9AXuD9gbtDdobXGWw7nCbB5+MQQlHipKKAAAAAElFTkSuQmCC'; + await Promise.all([...document.querySelectorAll('img')].map(img => { + img.src = dataURL; + return img.decode(); + })); + + takeScreenshotDelayed(50); + })(); + </script> +</html> diff --git a/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/delay_get_texture-ref.html b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/delay_get_texture-ref.html new file mode 100644 index 0000000000..fcf485dbe1 --- /dev/null +++ b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/delay_get_texture-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <title>WebGPU delay getCurrentTexture (ref)</title> + <meta charset="utf-8" /> + <link rel="help" href="https://gpuweb.github.io/gpuweb/" /> + <canvas id="cvs0" width="20" height="20" style="width: 20px; height: 20px;"></canvas> + <script> + function draw(canvas) { + var c = document.getElementById(canvas); + var ctx = c.getContext('2d'); + ctx.fillStyle = '#00FF00'; + ctx.fillRect(0, 0, c.width, c.height); + } + + draw('cvs0'); + </script> +</html> diff --git a/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/resize_observer-ref.html b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/resize_observer-ref.html new file mode 100644 index 0000000000..5259a25c27 --- /dev/null +++ b/testing/web-platform/mozilla/tests/webgpu/cts/web_platform/reftests/ref/resize_observer-ref.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html> + <title>WebGPU ResizeObserver test (ref)</title> + <meta charset="utf-8" /> + <link rel="help" href="https://gpuweb.github.io/gpuweb/" /> + <style> + .outer { + display: flex; + align-items: center; + flex-direction: column; + } + .outer>* { + display: block; + height: 100px; + } + </style> + <body> + <div id="dpr"></div> + <div class="outer"></div> + <script type="module"> + import { takeScreenshotDelayed } from '../../../../common/util/wpt_reftest_wait.js'; + import createPatternDataURL from '../create-pattern-data-url.js'; + + (async () => { + const {patternSize, dataURL} = createPatternDataURL(); + + document.querySelector('#dpr').textContent = `dpr: ${devicePixelRatio}`; + + /** + * Set the pattern's size on this element so that it draws where + * 1 pixel in the pattern maps to 1 devicePixel. + */ + function setPattern(elem) { + const oneDevicePixel = 1 / devicePixelRatio; + const patternPixels = oneDevicePixel * patternSize; + elem.style.backgroundImage = `url("${dataURL}")`; + elem.style.backgroundSize = `${patternPixels}px ${patternPixels}px`; + } + + /* + This ref creates elements like this + <body> + <div class="outer"> + <div></div> + <div></div> + <div></div> + ... + </div> + </body> + Where the outer div is a flexbox centering the child elements. + Each of the child elements is set to a different width in percent. + The devicePixelContentBox size of each child element is observed + with a ResizeObserver and when changed, a pattern is applied to + the element and the pattern's size set so each pixel in the pattern + will be one device pixel. + A similar process happens in the test HTML using canvases + and patterns generated using putImageData. + The test and this reference page should then match. + */ + + const outerElem = document.querySelector('.outer'); + + let resolve; + const promise = new Promise(_resolve => (resolve = _resolve)); + + /** + * Set the pattern's size on this element so that it draws where + * 1 pixel in the pattern maps to 1 devicePixel. + */ + function setPatterns(entries) { + for (const entry of entries) { + setPattern(entry.target) + } + resolve(); + } + + const observer = new ResizeObserver(setPatterns); + for (let percentSize = 7; percentSize < 100; percentSize += 13) { + const innerElem = document.createElement('div'); + innerElem.style.width = `${percentSize}%`; + observer.observe(innerElem, {box:"device-pixel-content-box"}); + outerElem.appendChild(innerElem); + } + + await promise; + takeScreenshotDelayed(50); + })(); + </script> + </body> +</html> |