Skip to content

Commit

Permalink
Add test case on test website around pictures srcsets
Browse files Browse the repository at this point in the history
  • Loading branch information
benoit74 committed Sep 30, 2024
1 parent c8e1e96 commit a4ffd09
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 0 deletions.
93 changes: 93 additions & 0 deletions test-website/content/image-srcset.html
Original file line number Diff line number Diff line change
@@ -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>
Binary file added test-website/content/images/image1-1.5x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test-website/content/images/image1-1x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test-website/content/images/image1-2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions test-website/content/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit a4ffd09

Please sign in to comment.