Add test case on test website around pictures srcsets

openzim · Sep 30, 2024 · a4ffd09 · a4ffd09
1 parent c8e1e96
commit a4ffd09
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 0 deletions.
diff --git a/test-website/content/image-srcset.html b/test-website/content/image-srcset.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Test website</title>
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="./icons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="./icons/favicon-16x16.png"
+    />
+    <link rel="manifest" href="./icons/site.webmanifest" />
+    <link rel="shortcut icon" href="./icons/favicon.ico" />
+  </head>
+
+  <body>
+    <p>
+      This page contains tests around varying images based on screen / device.
+    </p>
+
+    <h2>Image srcset</h2>
+
+    <p>
+      An image should be displayed below at all screen sizes and pixel ratios.
+    </p>
+
+    <img
+      srcset="
+        ./images/image1.png,
+        ./images/image1-1x.png   1x,
+        ./images/image1-1.5x.png 1.5x,
+        ./images/image1-2x.png   2x
+      "
+      src="./images/image1.png"
+      alt="an image"
+    />
+
+    <h2>Picture sources - with media queries</h2>
+
+    <p>
+      An image should be displayed below at all screen sizes and pixel ratios.
+    </p>
+
+    <picture>
+      <source
+        srcset="./images/image1-2x.png"
+        media="all and (min-width: 1280px)"
+        type="image/png"
+      />
+      <source
+        srcset="./images/image1-1.5x.png"
+        media="all and (min-width: 600px)"
+        type="image/png"
+      />
+      <source
+        srcset="./images/image1-1x.png"
+        media="all and (min-width: 0px)"
+        type="image/png"
+      />
+      <img src="./images/image1.png" alt="an image" />
+    </picture>
+
+    <h2>Picture sources - with media queries</h2>
+
+    <p>
+      An image should be displayed below at all screen sizes and pixel ratios.
+    </p>
+
+    <picture>
+      <source
+        srcset="
+          ./images/image1.png,
+          ./images/image1-1x.png   1x,
+          ./images/image1-1.5x.png 1.5x,
+          ./images/image1-2x.png   2x
+        "
+        type="image/png"
+      />
+      <img src="./images/image1.png" alt="an image" />
+    </picture>
+  </body>
+</html>
diff --git a/test-website/content/images/image1-1.5x.png b/test-website/content/images/image1-1.5x.png
diff --git a/test-website/content/images/image1-1x.png b/test-website/content/images/image1-1x.png
diff --git a/test-website/content/images/image1-2x.png b/test-website/content/images/image1-2x.png
diff --git a/test-website/content/index.html b/test-website/content/index.html
@@ -50,6 +50,7 @@
         <li><a href="./bad-redirections.html">Bad redirections</a></li>
         <li><a href="./content-types/index.html">Handling of content types</a></li>
         <li><a href="./http-equiv-redirect.html">Redirect with http-equiv meta directive</a></li>
+        <li><a href="./image-srcset.html">Image with srcset</a></li>
     </ul>
 </body>