-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add tests for density-corrected size #23789
Closed
Closed
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
2aceef0
Add tests for density-corrected size
noamr e1092ad
Use piexif to dynamically generate density-corrected size images
noamr b31a218
Ignore 3rd party file
noamr 49c0c7a
Add tests for invalid exif resolution
noamr 3d310bb
Moved piexif to third_party dir
noamr File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
38 changes: 38 additions & 0 deletions
38
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,38 @@ | ||
| <!DOCTYPE html> | ||
| <body> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="./resources/piexif.js"></script> | ||
| <script src="./resources/exify.js"></script> | ||
| <link rel="author" title="Noam Rosenthal" href="[email protected]"> | ||
| <script> | ||
| async function test_valid(input) { | ||
| const image = await createImageWithMetadata(input) | ||
| assert_equals(image.naturalWidth, input.preferredWidth) | ||
| assert_equals(image.naturalHeight, input.preferredHeight) | ||
| } | ||
| async function test_invalid(input) { | ||
| const image = await createImageWithMetadata(input) | ||
| assert_equals(image.naturalWidth, input.width) | ||
| assert_equals(image.naturalHeight, input.height) | ||
| } | ||
|
|
||
| async function test() { | ||
| await test_valid({width: 10, height: 20, preferredWidth: 20, preferredHeight: 40, resolutionX: 36, resolutionY: 36, resolutionUnit: 2}) | ||
| await test_valid({width: 10, height: 20, preferredWidth: 2, preferredHeight: 4, resolutionX: 360, resolutionY: 360, resolutionUnit: 2}) | ||
| await test_valid({width: 10, height: 20, preferredWidth: 20, preferredHeight: 10, resolutionX: 36, resolutionY: 144, resolutionUnit: 2}) | ||
| await test_valid({width: 10, height: 20, preferredWidth: 10, preferredHeight: 40, resolutionX: 72, resolutionY: 36, resolutionUnit: 2}) | ||
| await test_valid({width: 30, height: 30, preferredWidth: 90, preferredHeight: 30, resolutionX: 24, resolutionY: 72, resolutionUnit: 2}) | ||
|
|
||
| await test_valid({width: 10, height: 20, preferredWidth: 20, preferredHeight: 40, resolutionX: 36, resolutionY: 36, resolutionUnit: 2}) | ||
| await test_valid({width: 10, height: 20, preferredWidth: 20, preferredHeight: 40, resolutionX: 36, resolutionY: 36, resolutionUnit: 2}) | ||
| await test_valid({width: 10, height: 20, preferredWidth: 20, preferredHeight: 40, resolutionX: 36, resolutionY: 36, resolutionUnit: 2}) | ||
| await test_valid({width: 10, height: 20, preferredWidth: 20, preferredHeight: 40, resolutionX: 36, resolutionY: 36, resolutionUnit: 2}) | ||
| } | ||
|
|
||
| promise_test(test) | ||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
| </html> | ||
38 changes: 38 additions & 0 deletions
38
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,38 @@ | ||
| <!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: 100px 200px; background-size: scale-down; } | ||
| </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> | ||
| <br/> | ||
| <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> | ||
| <br/> | ||
| <div class="default-after box"></div> | ||
| </body> | ||
| </html> |
46 changes: 46 additions & 0 deletions
46
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,46 @@ | ||
| <!DOCTYPE html> | ||
| <head> | ||
| <title>Density corrected size: rendering</title> | ||
| <link rel="author" title="Noam Rosenthal" href="[email protected]"> | ||
| <link rel="match" href="density-corrected-size-rendering-ref.html" /> | ||
| <meta name="assert" content="Assert that images with EXIF density-corrected-size are rendered correctly"> | ||
| <script src="./resources/piexif.js"></script> | ||
| <script src="./resources/exify.js"></script> | ||
| </head> | ||
| <body> | ||
| <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> | ||
| <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" /> | ||
| <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> | ||
| <br/> | ||
| <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> | ||
| <br /> | ||
| <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>Density corrected size: 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 density-corrected size in EXIF 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.
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.
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 @@ | ||
| function createImageWithMetadata({ | ||
| width, | ||
| height, | ||
| preferredWidth, | ||
| preferredHeight, | ||
| resolutionX, | ||
| resolutionY, | ||
| resolutionUnit, | ||
| orientation | ||
| }) { | ||
| const canvas = document.createElement('canvas') | ||
| canvas.width = width || 100 | ||
| canvas.height = height || 100 | ||
| const ctx = canvas.getContext('2d') | ||
| ctx.fillColor = 'green' | ||
| ctx.fillRect(0, 0, canvas.width, canvas.height) | ||
| const original = canvas.toDataURL('image/jpeg') | ||
| const root = {} | ||
| const exif = {} | ||
| if (orientation !== undefined) | ||
| root[piexif.ExifIFD.Orientation] = orientation | ||
| if (resolutionX !== undefined) | ||
| root[piexif.ImageIFD.XResolution] = [resolutionX, 1] | ||
| if (resolutionY !== undefined) | ||
| root[piexif.ImageIFD.YResolution] = [resolutionY, 1] | ||
| if (resolutionUnit !== undefined) | ||
| root[piexif.ImageIFD.ResolutionUnit] = resolutionUnit | ||
| if (preferredWidth !== undefined) | ||
| exif[piexif.ExifIFD.PixelXDimension] = preferredWidth | ||
| if (preferredHeight !== undefined) | ||
| exif[piexif.ExifIFD.PixelYDimension] = preferredHeight | ||
| const exifString = piexif.dump({'0th': root, 'Exif': exif}) | ||
| const newDataUrl = piexif.insert(exifString, original) | ||
| const image = new Image() | ||
| image.src = newDataUrl | ||
| return new Promise(resolve => { | ||
| image.onload = () => resolve(image); | ||
| }) | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's the difference between those 4 tests?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lores, hires, only one of the dimension, change in aspect ratio.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oops, forgot to erase some identical tests