web-platform-tests · chromium-wpt-export-bot · Mar 13, 2026 · Mar 13, 2026
diff --git a/jpegxl/alpha-modular-reftest-ref.html b/jpegxl/alpha-modular-reftest-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<img src="resources/3x3a_srgb_lossless.png">
diff --git a/jpegxl/alpha-modular-reftest.html b/jpegxl/alpha-modular-reftest.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<link rel="match" href="alpha-modular-reftest-ref.html">
+<meta name="assert" content="Alpha-bearing modular JPEG XL decode should match PNG reference output.">
+
+<img src="resources/3x3a_srgb_lossless.jxl">
diff --git a/jpegxl/alpha-vardct.html b/jpegxl/alpha-vardct.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>JPEG XL: alpha with VarDCT-oriented fixture</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<meta name="assert" content="Decodes alpha-bearing fixture and verifies transparency exists.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/helpers.js"></script>
+<script>
+
+promise_test(async () => {
+  const img = await loadImage('resources/conformance_alpha_nonpremultiplied.jxl');
+  const px = samplePixel(img, 10, 10);
+  assert_less_than(px[3], 255, 'fixture should include transparent pixels');
+}, 'Alpha channel is preserved for high bit-depth fixture.');
+
+</script>
diff --git a/jpegxl/basic-decode-reftest-ref.html b/jpegxl/basic-decode-reftest-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<img src="resources/basic.png">
diff --git a/jpegxl/basic-decode-reftest.html b/jpegxl/basic-decode-reftest.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<link rel="match" href="basic-decode-reftest-ref.html">
+<meta name="assert" content="Minimal 1x1 JPEG XL decode should match PNG reference output.">
+
+<img src="resources/basic.jxl">
diff --git a/jpegxl/bitdepth-10bpc-reftest-ref.html b/jpegxl/bitdepth-10bpc-reftest-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<img src="resources/conformance_sunset_logo.png">
diff --git a/jpegxl/bitdepth-10bpc-reftest.html b/jpegxl/bitdepth-10bpc-reftest.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<link rel="match" href="bitdepth-10bpc-reftest-ref.html">
+<meta name="assert" content="10-bit JPEG XL decode should match PNG reference output.">
+
+<img src="resources/conformance_sunset_logo.jxl">
diff --git a/jpegxl/bitdepth-12bpc-reftest-ref.html b/jpegxl/bitdepth-12bpc-reftest-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<img src="resources/conformance_alpha_nonpremultiplied.png">
diff --git a/jpegxl/bitdepth-12bpc-reftest.html b/jpegxl/bitdepth-12bpc-reftest.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<link rel="match" href="bitdepth-12bpc-reftest-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-100000">
+<meta name="assert" content="12-bit JPEG XL decode should match PNG reference output.">
+
+<img src="resources/conformance_alpha_nonpremultiplied.jxl">
diff --git a/jpegxl/bitdepth-16bpc-reftest-ref.html b/jpegxl/bitdepth-16bpc-reftest-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<img src="resources/has_permutation.png">
diff --git a/jpegxl/bitdepth-16bpc-reftest.html b/jpegxl/bitdepth-16bpc-reftest.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<link rel="match" href="bitdepth-16bpc-reftest-ref.html">
+<meta name="assert" content="16-bit JPEG XL decode should match PNG reference output.">
+
+<img src="resources/has_permutation.jxl">
diff --git a/jpegxl/bitdepth-8bpc-reftest-ref.html b/jpegxl/bitdepth-8bpc-reftest-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<img src="resources/3x3_srgb_lossless.png">
diff --git a/jpegxl/bitdepth-8bpc-reftest.html b/jpegxl/bitdepth-8bpc-reftest.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<link rel="match" href="bitdepth-8bpc-reftest-ref.html">
+<meta name="assert" content="8-bit JPEG XL decode should match PNG reference output.">
+
+<img src="resources/3x3_srgb_lossless.jxl">
diff --git a/jpegxl/canvas-decode-paths.html b/jpegxl/canvas-decode-paths.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>JPEG XL integration: canvas decode paths</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+promise_test(async () => {
+  const image = new Image();
+  const loaded = new Promise((resolve, reject) => {
+    image.onload = resolve;
+    image.onerror = () => reject(new Error('image decode failed'));
+  });
+  image.src = 'resources/3x3_srgb_lossless.jxl';
+  await loaded;
+
+  const canvas = document.createElement('canvas');
+  canvas.width = 3;
+  canvas.height = 3;
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(image, 0, 0);
+
+  const p = ctx.getImageData(1, 1, 1, 1).data;
+  const nonZero = p[0] !== 0 || p[1] !== 0 || p[2] !== 0 || p[3] !== 0;
+  assert_true(nonZero, '2D canvas contains decoded JPEG XL pixels');
+}, 'Canvas 2D drawImage path with JPEG XL image.');
+
+promise_test(async () => {
+  const response = await fetch('resources/3x3_srgb_lossless.jxl');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+  assert_equals(bitmap.width, 3);
+  assert_equals(bitmap.height, 3);
+  bitmap.close();
+}, 'createImageBitmap() decodes JPEG XL blob.');
+</script>
diff --git a/jpegxl/cmyk-basic-conversion-reftest-ref.html b/jpegxl/cmyk-basic-conversion-reftest-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<img src="resources/conformance_cmyk_layers.png">
diff --git a/jpegxl/cmyk-basic-conversion-reftest.html b/jpegxl/cmyk-basic-conversion-reftest.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<link rel="match" href="cmyk-basic-conversion-reftest-ref.html">
+<meta name="assert" content="CMYK JPEG XL conversion/rendering should match PNG reference output.">
+
+<img src="resources/conformance_cmyk_layers.jxl">
diff --git a/jpegxl/css-image-usage.html b/jpegxl/css-image-usage.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<title>JPEG XL integration: CSS image uses</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #bg {
+    width: 30px;
+    height: 30px;
+    background-image: url('resources/3x3_srgb_lossless.jxl');
+  }
+
+  #content::before {
+    content: url('resources/3x3_srgb_lossless.jxl');
+  }
+
+  #imageset {
+    width: 30px;
+    height: 30px;
+    background-image: image-set(url('resources/3x3_srgb_lossless.jxl') 1x);
+  }
+
+  #list {
+    list-style-image: url('resources/3x3_srgb_lossless.jxl');
+  }
+</style>
+
+<div id="bg"></div>
+<div id="content"></div>
+<div id="imageset"></div>
+<ul><li id="list">item</li></ul>
+
+<script>
+promise_test(async () => {
+  const bg = getComputedStyle(document.getElementById('bg')).backgroundImage;
+  const before = getComputedStyle(document.getElementById('content'), '::before').content;
+  const set = getComputedStyle(document.getElementById('imageset')).backgroundImage;
+  const list = getComputedStyle(document.getElementById('list')).listStyleImage;
+
+  assert_true(bg.includes('.jxl'));
+  assert_true(before.includes('.jxl'));
+  assert_true(set.includes('.jxl'));
+  assert_true(list.includes('.jxl'));
+}, 'CSS properties accept JPEG XL image URLs');
+</script>
diff --git a/jpegxl/hdr-gain-map-visual.manual.html b/jpegxl/hdr-gain-map-visual.manual.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<title>JPEG XL manual: HDR gain map</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<p>Manual test placeholder for JPEG XL gain-map behavior.</p>
diff --git a/jpegxl/hdr-hlg-visual.manual.html b/jpegxl/hdr-hlg-visual.manual.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<title>JPEG XL manual: HDR HLG</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<p>Manual test placeholder for HDR HLG tone mapping in JPEG XL.</p>
+<img src="resources/hdr_hlg_test.jxl" alt="HDR HLG JPEG XL fixture">
diff --git a/jpegxl/hdr-pq-visual.manual.html b/jpegxl/hdr-pq-visual.manual.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<title>JPEG XL manual: HDR PQ</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<p>Manual test placeholder for HDR PQ tone mapping in JPEG XL.</p>
+<img src="resources/hdr_pq_test.jxl" alt="HDR PQ JPEG XL fixture">
diff --git a/jpegxl/html-embed-object-iframe-ref.html b/jpegxl/html-embed-object-iframe-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>JPEG XL integration reference: embed object iframe</title>
+
+<style>
+  .row {
+    display: flex;
+    gap: 8px;
+  }
+  embed,
+  object,
+  iframe {
+    width: 60px;
+    height: 60px;
+    border: 0;
+    image-rendering: pixelated;
+  }
+</style>
+
+<div class="row">
+  <embed src="resources/3x3_srgb_lossless.png" type="image/png">
+  <object data="resources/3x3_srgb_lossless.png" type="image/png"></object>
+  <iframe src="resources/3x3_srgb_lossless.png"></iframe>
+</div>
diff --git a/jpegxl/html-embed-object-iframe.html b/jpegxl/html-embed-object-iframe.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>JPEG XL integration: embed object iframe</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<link rel="match" href="html-embed-object-iframe-ref.html">
+<meta name=fuzzy content="0-8;0-10000">
+<meta name="assert" content="embed/object/iframe render JPEG XL images similarly to PNG references.">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+  .row {
+    display: flex;
+    gap: 8px;
+  }
+  embed,
+  object,
+  iframe {
+    width: 60px;
+    height: 60px;
+    border: 0;
+    image-rendering: pixelated;
+  }
+</style>
+
+<div class="row">
+  <embed src="resources/3x3_srgb_lossless.jxl" type="image/jxl">
+  <object data="resources/3x3_srgb_lossless.jxl" type="image/jxl"></object>
+  <iframe src="resources/3x3_srgb_lossless.jxl"></iframe>
+</div>
+
+<script>
+const elements = document.querySelectorAll('embed, object, iframe');
+Promise.all([...elements].map(el =>
+  new Promise(resolve => el.addEventListener('load', resolve))
+)).then(takeScreenshot);
+</script>
+</html>
diff --git a/jpegxl/html-img.html b/jpegxl/html-img.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>JPEG XL integration: img and picture/source</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<img id="plain" src="resources/3x3_srgb_lossless.jxl" alt="plain img">
+<picture id="pic">
+  <source srcset="resources/3x3_srgb_lossless.jxl" type="image/jxl">
+  <img id="picture-img" src="resources/3x3_srgb_lossless.png" alt="picture fallback">
+</picture>
+
+<script>
+promise_test(async () => {
+  const plain = document.getElementById('plain');
+  if (!plain.complete) {
+    await new Promise((resolve, reject) => {
+      plain.onload = resolve;
+      plain.onerror = () => reject(new Error('plain img failed'));
+    });
+  }
+  assert_true(plain.currentSrc.endsWith('.jxl'));
+  assert_greater_than(plain.naturalWidth, 0);
+}, '<img> decodes JPEG XL');
+
+promise_test(async () => {
+  const img = document.getElementById('picture-img');
+  if (!img.complete) {
+    await new Promise((resolve, reject) => {
+      img.onload = resolve;
+      img.onerror = () => reject(new Error('picture img failed'));
+    });
+  }
+  assert_true(img.currentSrc.endsWith('.jxl'));
+  assert_greater_than(img.naturalWidth, 0);
+}, '<picture>/<source> selects and decodes JPEG XL source');
+</script>
diff --git a/jpegxl/html-input-image.html b/jpegxl/html-input-image.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>JPEG XL integration: input type=image</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<input id="img-input" type="image" src="resources/3x3_srgb_lossless.jxl" alt="submit" width="30" height="30">
+
+<script>
+promise_test(async () => {
+  const input = document.getElementById('img-input');
+  await new Promise((resolve, reject) => {
+    input.addEventListener('load', resolve, { once: true });
+    input.addEventListener('error', () => reject(new Error('input image failed')), { once: true });
+  });
+  const rect = input.getBoundingClientRect();
+  assert_greater_than(rect.width, 0);
+  assert_greater_than(rect.height, 0);
+}, '<input type=image> can load JPEG XL source');
+</script>
diff --git a/jpegxl/html-preload-image.html b/jpegxl/html-preload-image.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>JPEG XL integration: link rel=preload as=image</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+promise_test(async () => {
+  const href = new URL('resources/3x3_srgb_lossless.jxl', location.href).toString();
+
+  const preload = document.createElement('link');
+  preload.rel = 'preload';
+  preload.as = 'image';
+  preload.href = href;
+
+  const preloadDone = new Promise((resolve, reject) => {
+    preload.onload = resolve;
+    preload.onerror = () => reject(new Error('preload failed'));
+  });
+
+  document.head.appendChild(preload);
+  await preloadDone;
+
+  const img = new Image();
+  const loaded = new Promise((resolve, reject) => {
+    img.onload = resolve;
+    img.onerror = () => reject(new Error('image failed after preload'));
+  });
+  img.src = href;
+  await loaded;
+
+  assert_greater_than(img.naturalWidth, 0);
+  assert_true(performance.getEntriesByName(href).length > 0,
+      'resource timing should include the JPEG XL image request');
+}, '<link rel=preload as=image> preloads JPEG XL image');
+</script>
diff --git a/jpegxl/html-video-poster-ref.html b/jpegxl/html-video-poster-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>JPEG XL integration reference: video poster</title>
+
+<style>
+  img {
+    width: 60px;
+    height: 60px;
+    image-rendering: pixelated;
+  }
+</style>
+
+<img src="resources/3x3_srgb_lossless.jxl" alt="reference image">
diff --git a/jpegxl/html-video-poster.html b/jpegxl/html-video-poster.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>JPEG XL integration: video poster</title>
+<link rel="help" href="https://github.com/web-platform-tests/interop-jpegxl">
+<link rel="match" href="html-video-poster-ref.html">
+<meta name="assert" content="A <video> poster can render from a JPEG XL image URL.">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+  video {
+    width: 60px;
+    height: 60px;
+    image-rendering: pixelated;
+  }
+</style>
+
+<video poster="resources/3x3_srgb_lossless.jxl"></video>
+
+<script>
+const img = new Image();
+img.src = document.querySelector('video').poster;
+img.decode().then(() => {
+  requestAnimationFrame(takeScreenshot);
+});
+</script>
+</html>
diff --git a/jpegxl/icc-uncommon-profile-reftest-ref.html b/jpegxl/icc-uncommon-profile-reftest-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+
+<img src="resources/with_icc.png">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<!DOCTYPE html>

		<img src="resources/3x3a_srgb_lossless.png">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<!DOCTYPE html>

		<img src="resources/basic.png">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<!DOCTYPE html>

		<img src="resources/conformance_sunset_logo.png">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<!DOCTYPE html>

		<img src="resources/conformance_alpha_nonpremultiplied.png">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<!DOCTYPE html>

		<img src="resources/has_permutation.png">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<!DOCTYPE html>

		<img src="resources/3x3_srgb_lossless.png">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<!DOCTYPE html>

		<img src="resources/conformance_cmyk_layers.png">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<!DOCTYPE html>

		<img src="resources/with_icc.png">