Test WebGPU’s unaligned compressed textures and linear canvas color spaces

Start with separate capability checks

Chrome’s WebGPU 155–156 update adds compressed textures with unaligned base dimensions and two linear canvas color spaces: srgb-linear and display-p3-linear. For a testbed, treat compressed-asset support and canvas output as separate decisions. Sources: Chrome for Developers, Chromium blink-dev

Chrome demonstrates checking adapter features and requesting unaligned compression when creating a device. The specification separately requires the compression-family feature that matches the asset. Choose that family from the application’s assets or transcoder output. Then use the helper below to request the supported features. Its result gives the application a basis for selecting a rendering path. Both helpers in this guide are untested examples. Their cross-platform behavior and any performance benefit remain unestablished. Sources: Chrome for Developers, W3C

async function createTestDevice(compressionFeature) {
  if (!navigator.gpu) return { fallback: "webgpu-unavailable" };

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) return { fallback: "adapter-unavailable" };

  const requiredFeatures = [];
  const compressed = adapter.features.has(compressionFeature);
  const unaligned =
    compressed &&
    adapter.features.has("texture-compression-unaligned");

  if (compressed) requiredFeatures.push(compressionFeature);
  if (unaligned) requiredFeatures.push("texture-compression-unaligned");

  const device = await adapter.requestDevice({ requiredFeatures });

  return {
    device,
    compressed,
    unaligned,
    enabledFeatures: [...device.features],
  };
}

Make texture fallbacks explicit

Unaligned compression relaxes texture dimensions without introducing a new codec. Chromium’s shipping intent describes compression blocks ranging from 4×4 to 12×12. Derive fixture dimensions from the selected format. Smaller mip levels already supported partial blocks, according to GPUWeb’s July discussion. Copies still operate on whole compressed blocks. Sources: W3C, Chromium blink-dev, GPUWeb

For command-encoder copyBufferToTexture() and copyTextureToBuffer() operations, bytesPerRow must be a multiple of 256 bytes when specified. queue.writeTexture() does not impose that 256-byte requirement. For these APIs, bytesPerRow is required when a copy spans multiple rows of blocks or multiple images. It can be omitted for a single block row in a single image; no row stride then needs alignment. Keep upload-layout checks separate from texture-creation checks. Sources: W3C

Treat padding and rescaling as separate fallback experiments. Padding preserves the interior sample grid but complicates boundary sampling. Rescaling changes the image and can discard high-frequency detail. The table below proposes application paths and their validation targets. Add controls that force each applicable fallback even when the preferred capability is present. Compare each path using the same logical image so fallback selection does not hide a change in output. Sources: Chromium blink-dev

Test texture borders separately

A GPUWeb conformance issue identified a concrete regression target. Sampling at texture coordinates of 1.0 could expose texels outside the texture’s logical dimensions. Chromium contributor Corentin Wallez raised the missing coverage in September. The issue closed on October 7, 2026, after a test contribution. The merged contribution added 600 cases and 1,800 subcases. Those counts describe coverage, not performance or proof that every shipping configuration passes. Sources: GPUWeb

Use a decoded reference for the same compressed payload when isolating sampling behavior. Comparing only with the original uncompressed image mixes codec loss with rendering differences. Report the interior, final row, final column, and corner separately. A whole-image average can conceal a narrow border defect. Run the following fixture sequence for each usable compression format, retaining both validation results and difference images.

1. Create dimensions just below, at, and above each block boundary; record creation and upload failures.
2. Encode a distinct final row and column with contrasting padding; sample the last texel center, texture coordinates of 1.0, and nearby coordinates.
3. Compare nearest and linear filtering with edge-strip difference images.
4. Select mip levels explicitly and compare each level’s output.
5. Exercise clamp and repeat addressing to expose edge and seam changes.
6. Force the padded fallback and compare it with the native unaligned path. Sources: GPUWeb

Probe linear canvas configuration separately

The linear-color shipping intent adds srgb-linear and display-p3-linear for processing such as lighting, interpolation, anti-aliasing, and decimation. Chrome’s announcement demonstrates a linear Display-P3 canvas using rgba16float. The specification treats textures as numeric data. Color interpretation occurs at interfaces such as image copying, external-texture import, and canvas configuration. An sRGB texture format supplies transfer-function behavior without attaching color-space metadata to the texture. Sources: Chrome for Developers, W3C, Chromium blink-dev

Expose separate controls for input interpretation, working texture format, processing space, and output color space with tone mapping. The helper below checks configuration acceptance and records exceptions, validation errors, and the returned configuration. Run probes sequentially on a healthy device. Classify device loss separately from an unsupported configuration. Follow acceptance with rendering tests. The shipping intent distinguishes API-setting checks, draw-and-readback checks, and image-export round trips. Sources: Chromium blink-dev

async function probeCanvasColorSpace(device, colorSpace) {
  const canvas = document.createElement("canvas");
  canvas.width = canvas.height = 2;
  const context = canvas.getContext("webgpu");
  if (!context) return { supported: false };

  let exception;
  let configuration;

  device.pushErrorScope("validation");
  try {
    context.configure({
      device,
      format: "rgba16float",
      colorSpace,
      alphaMode: "opaque",
    });
    context.getCurrentTexture();
    configuration = context.getConfiguration();
  } catch (error) {
    exception = String(error);
  }

  const validationError = await device.popErrorScope();
  context.unconfigure();

  return {
    supported:
      !exception &&
      !validationError &&
      configuration?.colorSpace === colorSpace,
    exception,
    validationError: validationError?.message,
    configuration,
  };
}

Compare numeric output with visible presentation

The particles-sample change linked by Chrome modifies image import alongside canvas configuration. It selects rgba16float to avoid banding in linear spaces. Reviewers explain that correctly converting an ordinary sRGB image through different working spaces should preserve its appearance. The discussion also reports unexpected output differences. On October 7, 2026, Christopher Cameron acknowledged that macOS sometimes presents this output as high dynamic range, or HDR, unexpectedly. That report describes particular presentation behavior, not a universal defect. Sources: WebGPU samples

Save raw numeric readback and screenshots as separate artifacts. Use numeric output to investigate processing errors and screenshots to assess visible presentation. The table below proposes fixtures for separating conversion, precision, gamut, and compositing problems. Where linear canvas spaces are unsupported, test linear intermediate processing with an explicit final conversion. Make gamut mapping and HDR reduction deliberate fallback policies. Then force those paths on capable machines.

Turn failures into routing decisions

Measure the complete workload before choosing a faster path. Record decode or transcode time, padding, upload, first use, steady-state frame time, and sustained throughput separately. Keep the logical image, workload, and output appearance equivalent across comparisons.

Save a capability manifest with the browser build, operating system, GPU and driver, enabled features, asset hashes, canvas dimensions, and display configuration. Include warm-up policy, repetitions, median and tail latency. Distinguish texture payload bytes from measured memory. Keep compression-family and unaligned-dimension checks separate. A proposal to enable unaligned dimensions automatically for certain compression families remains open. Package deterministic fixtures, forced-fallback controls, numeric reports, and saved images together. Use the labels below to route failures toward the next investigation. Sources: GPUWeb

• Unsupported: select an alternate capability path.
• Validation failure: inspect feature requests, dimensions, uploads, or canvas configuration.
• Numeric mismatch: investigate sampling, conversion, precision, or processing against the chosen tolerance.
• Presentation mismatch: inspect display behavior when numeric output meets expectations.