css-image-usage.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /jpegxl/css-image-usage.html - WPT Dashboard Interop Dashboard

<!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>