-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add tests for density-corrected size
These test include images that have EXIF values that specify density-corrected size And they assert that the intrinsic size for those images is corrected by that EXIF. WhatWG PR: whatwg/html#5574
- Loading branch information
Showing
14 changed files
with
195 additions
and
0 deletions.
There are no files selected for viewing
28 changes: 28 additions & 0 deletions
28
density-size-correction/density-corrected-natural-size.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <!DOCTYPE html> | ||
| <body> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <link rel="author" title="Noam Rosenthal" href="[email protected]"> | ||
| <img src="resources/exif-resolution-invalid-cm.jpg" data-width="100" data-height="50" class="test-img" /> | ||
| <img src="resources/exif-resolution-invalid-no-match.jpg" data-width="100" data-height="50" class="test-img" /> | ||
| <img src="resources/exif-resolution-invalid-partial.jpg" data-width="100" data-height="50" class="test-img" /> | ||
| <img src="resources/exif-resolution-no-change.jpg" data-width="100" data-height="50" class="test-img" /> | ||
| <img src="resources/exif-resolution-none.jpg" data-width="100" data-height="50" class="test-img" /> | ||
| <img src="resources/exif-resolution-valid-hires.jpg" data-width="50" data-height="25" class="test-img" /> | ||
| <img src="resources/exif-resolution-valid-lores.jpg" data-width="200" data-height="100" class="test-img" /> | ||
| <img src="resources/exif-resolution-valid-non-uniform.jpg" data-width="50" data-height="100" class="test-img" /> | ||
| <img src="resources/exif-resolution-with-orientation.jpg" data-width="100" data-height="200" class="test-img" /> | ||
| <script> | ||
| let run_test = () => { | ||
| test(() => { | ||
| [...document.querySelectorAll('.test-img')].forEach(img => { | ||
| assert_equals(img.naturalWidth, +img.dataset.width, `Density size correction for ${img.src}`); | ||
| assert_equals(img.naturalHeight, +img.dataset.height, `Density size correction for ${img.src}`); | ||
| }) | ||
| }, "Test the image dimensions of different EXIF scenarios"); | ||
| } | ||
| window.addEventListener("load", run_test); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
36 changes: 36 additions & 0 deletions
36
density-size-correction/density-corrected-size-rendering-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <!DOCTYPE html> | ||
| <body> | ||
| <link rel="author" title="Noam Rosenthal" href="[email protected]"> | ||
| <img src="resources/exif-resolution-none.jpg" width="100" height="50" class="test-img" /> | ||
| <img src="resources/exif-resolution-none.jpg" width="50" height="25" class="test-img" /> | ||
| <img src="resources/exif-resolution-none.jpg" width="200" height="100" class="test-img" /> | ||
| <img src="resources/exif-resolution-none.jpg" width="50" height="100" class="test-img" /> | ||
| <style> | ||
| body { | ||
| --default: url(resources/exif-resolution-none.jpg); | ||
| } | ||
| .default-after::after {content: var(--default); } | ||
| .default-bg {background-image: var(--default); } | ||
| .lores-bg {background-image: var(--default); background-size: 200px 100px; } | ||
| .hires-bg {background-image: var(--default); background-size: 50px 25px; } | ||
| .invalid-bg {background-image: var(--default); } | ||
| .non-uniform-bg {background-image: var(--default); background-size: 50px 100px; } | ||
| .box { width: 200px; height: 200px; display: inline-block; } | ||
| .tiled {background-repeat: repeat; } | ||
| .stretch {background-repeat: no-repeat; background-size: contain; } | ||
| .non-uniform-bg.stretch { background-size: 200px 200px; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%, 0 0) } | ||
| </style> | ||
| <br/> | ||
| <div class="default-bg tiled box"></div> | ||
| <div class="lores-bg tiled box"></div> | ||
| <div class="hires-bg tiled box"></div> | ||
| <div class="non-uniform-bg tiled box"></div> | ||
| <div class="lores-bg stretch box"></div> | ||
| <div class="default-bg stretch box"></div> | ||
| <div class="non-uniform-bg stretch box"></div> | ||
| <div class="lores-after box"> | ||
| <img src="resources/exif-resolution-none.jpg" width="200" /> | ||
| </div> | ||
| <div class="default-after box"></div> | ||
| </body> | ||
| </html> |
39 changes: 39 additions & 0 deletions
39
density-size-correction/density-corrected-size-rendering.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <!DOCTYPE html> | ||
| <body> | ||
| <link rel="author" title="Noam Rosenthal" href="[email protected]"> | ||
| <link rel="match" href="densit-corrected-size-ref-ref.html" /> | ||
| <meta name="assert" content="Assert that images with EXIF density-corrected-size are rendered correctly"> | ||
| <img src="resources/exif-resolution-none.jpg" data-width="100" data-height="50" class="test-img" /> | ||
| <img src="resources/exif-resolution-valid-hires.jpg" data-width="50" data-height="25" class="test-img" /> | ||
| <img src="resources/exif-resolution-valid-lores.jpg" data-width="200" data-height="10" class="test-img" /> | ||
| <img src="resources/exif-resolution-valid-non-uniform.jpg" data-width="50" data-height="100" class="test-img" /> | ||
| <style> | ||
| body { | ||
| --lores: url(resources/exif-resolution-valid-lores.jpg); | ||
| --hires: url(resources/exif-resolution-valid-hires.jpg); | ||
| --default: url(resources/exif-resolution-none.jpg); | ||
| --non-uniform: url(resources/exif-resolution-valid-non-uniform.jpg); | ||
| } | ||
| .default-bg {background-image: var(--default); } | ||
| .lores-bg {background-image: var(--lores); } | ||
| .lores-after::after {content: var(--lores); } | ||
| .default-after::after {content: var(--default); } | ||
| .hires-bg {background-image: var(--hires); } | ||
| .invalid-bg {background-image: var(--invalid); } | ||
| .non-uniform-bg {background-image: var(--non-uniform); } | ||
| .box { width: 200px; height: 200px; display: inline-block; } | ||
| .tiled {background-repeat: repeat; } | ||
| .stretch {background-repeat: no-repeat; background-size: contain; } | ||
| </style> | ||
| <br/> | ||
| <div class="default-bg tiled box"></div> | ||
| <div class="lores-bg tiled box"></div> | ||
| <div class="hires-bg tiled box"></div> | ||
| <div class="non-uniform-bg tiled box"></div> | ||
| <div class="lores-bg stretch box"></div> | ||
| <div class="default-bg stretch box"></div> | ||
| <div class="non-uniform-bg stretch box"></div> | ||
| <div class="lores-after box"></div> | ||
| <div class="default-after box"></div> | ||
| </body> | ||
| </html> |
46 changes: 46 additions & 0 deletions
46
density-size-correction/density-corrected-various-elements-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <html> | ||
| <head> | ||
| <title>Content-DPR: various elements</title> | ||
| <link rel="author" title="Noam Rosenthal" href="[email protected]"> | ||
| <style> | ||
| .row { | ||
| display: flex; | ||
| } | ||
|
|
||
| .row > * { | ||
| object-fit: none; | ||
| object-position: top left; | ||
| margin: 5px; | ||
| width: 100px; | ||
| height: 50px; | ||
| background: #CCCCCC; | ||
| } | ||
| </style> | ||
| <script> | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const canvas = document.getElementById('canvas') | ||
| const image = new Image() | ||
| image.onload = () => { | ||
| const ctx = canvas.getContext('2d') | ||
| ctx.drawImage(image, 0, 0, 50, 25) | ||
| } | ||
| image.src = "resources/exif-resolution-none.jpg" | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <p>There following boxes should be identical (the colorful boxes at the top-left quarter)</p> | ||
| <div class="row"> | ||
| <div> | ||
| <img src="resources/exif-resolution-none.jpg" width="50" height="25" /> | ||
| </div> | ||
| <div> | ||
| <img src="resources/exif-resolution-none.jpg" width="50" height="25" /> | ||
| </div> | ||
| <div> | ||
| <img src="resources/exif-resolution-none.jpg" width="50" height="25" /> | ||
| </div> | ||
| <canvas id="canvas" width="100" height="50"> | ||
| </div> | ||
| </body> | ||
| </html> |
46 changes: 46 additions & 0 deletions
46
density-size-correction/density-corrected-various-elements.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <html> | ||
| <head> | ||
| <title>Content-DPR: various elements</title> | ||
| <link rel="author" title="Noam Rosenthal" href="[email protected]"> | ||
| <link rel="match" href="density-corrected-various-elements-ref.html" /> | ||
| <meta name="assert" content="Assert that content-dpr is taken into account for images in all relevant elements (input/canvas/svg/video-poster)"> | ||
| <style> | ||
| .row { | ||
| display: flex; | ||
| } | ||
|
|
||
| .row > * { | ||
| object-fit: none; | ||
| object-position: top left; | ||
| margin: 5px; | ||
| width: 100px; | ||
| height: 50px; | ||
| background: #CCCCCC; | ||
| } | ||
| </style> | ||
| <script> | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const canvas = document.getElementById('canvas') | ||
| const image = new Image() | ||
| image.onload = () => { | ||
| const ctx = canvas.getContext('2d') | ||
| ctx.drawImage(image, 0, 0) | ||
| } | ||
| image.src = "resources/exif-resolution-valid-hires.jpg" | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <p>There following boxes should be identical (the colorful boxes at the top-left quarter)</p> | ||
| <div class="row"> | ||
| <div> | ||
| <img src="resources/exif-resolution-none.jpg" width="50" height="25" /> | ||
| </div> | ||
| <video poster="resources/exif-resolution-valid-hires.jpg"></video> | ||
| <div> | ||
| <input type="image" src="resources/exif-resolution-valid-hires.jpg" /> | ||
| </div> | ||
| <canvas id="canvas" width="100" height="50"> | ||
| </div> | ||
| </body> | ||
| </html> |
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
BIN
+1.97 KB
density-size-correction/resources/exif-resolution-invalid-no-match.jpg
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
BIN
+1.95 KB
density-size-correction/resources/exif-resolution-invalid-partial.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
BIN
+1.97 KB
density-size-correction/resources/exif-resolution-valid-non-uniform.jpg
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
BIN
+1.98 KB
density-size-correction/resources/exif-resolution-with-orientation.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.