Add WPT coverage of Sec-CH-Width

This patch adds WPT coverage of Sec-CH-Width: https://wicg.github.io/responsive-image-client-hints/#sec-ch-width Bug: 335630145 Change-Id: I329d39c8d0d259e9226e64468a083513c555322b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5523418 Reviewed-by: Traian Captan <tcaptan@chromium.org> Commit-Queue: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1300292}
web-platform-tests · May 14, 2024 · 7572479 · 7572479
1 parent 4991f75
commit 7572479
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/client-hints/resources/2x3-svg-scaled-by-sec-ch-width.py b/client-hints/resources/2x3-svg-scaled-by-sec-ch-width.py
@@ -0,0 +1,22 @@
+def main(request, response):
+    """
+    Simple handler that responds with an SVG image with width `2 * sec-ch-width`
+    and height `3 * sec-ch-width`, or 1x1 if sec-ch-width is not present.
+    """
+
+    width = 1
+    height = 1
+
+    if b"sec-ch-width" in request.headers:
+      sec_ch_width = request.headers.get(b"sec-ch-width").decode()
+      width = 2 * int(sec_ch_width)
+      height = 3 * int(sec_ch_width)
+
+    response.headers.set(b"Content-Type", b"image/svg+xml")
+    response.content = str.encode(f"""<svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        width="{width}"
+        height="{height}">
+      <rect width="100%" height="100%" fill="green" />
+    </svg>""")
diff --git a/client-hints/sec-ch-width.https.html b/client-hints/sec-ch-width.https.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta http-equiv="Delegate-CH" content="Sec-CH-Width">
+<title>Tests Sec-CH-Width</title>
+<link rel="help" href="https://wicg.github.io/responsive-image-client-hints/#sec-ch-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<img src="resources/2x3-svg-scaled-by-sec-ch-width.py" width="50" height="50">
+
+<script>
+  promise_test(async (test) => {
+    const testImage = document.getElementsByTagName('img')[0];
+    await new Promise(resolve => testImage.onload = resolve);
+    assert_equals(testImage.naturalWidth, 100);
+    assert_equals(testImage.naturalHeight, 150);
+  }, 'Sec-CH-Width should be set');
+</script>