-
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.
Test density size correction for cross-origin images
See whatwg/html#5574
- Loading branch information
Showing
9 changed files
with
184 additions
and
0 deletions.
There are no files selected for viewing
31 changes: 31 additions & 0 deletions
31
density-size-correction/density-corrected-image-svg-aspect-ratio-cross-origin.sub.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,31 @@ | ||
| <html> | ||
| <head> | ||
| <title>Density Corrected Size: SVG aspect ratio (cross-origin)</title> | ||
| <link rel="match" href="density-corrected-image-svg-aspect-ratio-ref.html" /> | ||
| <meta name="assert" content="Assert that SVG aspect ratio is applied correctly on density-corrected images"> | ||
| <meta name=fuzzy content="10;100"> | ||
| </head> | ||
| <body> | ||
| <svg style="width: 800px; height: 800px"> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg" x="0" y="0" width="120" height="120" preserveAspectRatio="xMinYMin meet"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-lores.jpg" x="200" y="0" width="120" height="120" preserveAspectRatio="xMidYMin meet"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg" x="400" y="0" width="120" height="120" preserveAspectRatio="xMaxYMin meet"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-non-uniform.jpg" x="600" y="0" width="120" height="120" preserveAspectRatio="xMidYMin meet"></image> | ||
|
|
||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-lores.jpg" x="0" y="150" width="120" height="120" preserveAspectRatio="xMinYMid slice"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg" x="200" y="150" width="120" height="120" preserveAspectRatio="xMidYMid slice"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-lores.jpg" x="400" y="150" width="120" height="120" preserveAspectRatio="xMaxYMid slice"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-non-uniform.jpg" x="600" y="150" width="120" height="120" preserveAspectRatio="xMinYMid slice"></image> | ||
|
|
||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg" x="200" y="300" width="120" height="120" preserveAspectRatio="xMidYMax meet"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-lores.jpg" x="400" y="300" width="120" height="120" preserveAspectRatio="xMaxYMax meet"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-non-uniform.jpg" x="600" y="300" width="120" height="120" preserveAspectRatio="xMaxYMid slice"></image> | ||
|
|
||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg" x="0" y="450" width="120" height="120" preserveAspectRatio="none"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-lores.jpg" x="200" y="450" width="120" height="120" preserveAspectRatio="none"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-non-uniform.jpg" x="400" y="450" width="120" height="120" preserveAspectRatio="none"></image> | ||
| <image xlink:href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-non-uniform.jpg" x="600" y="450" width="120" height="120" preserveAspectRatio="xMaxYMax meet"></image> | ||
| </svg> | ||
| </div> | ||
| </body> | ||
| </html> |
25 changes: 25 additions & 0 deletions
25
density-size-correction/density-corrected-image-svg-cross-origin.sub.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,25 @@ | ||
| <html> | ||
| <head> | ||
| <title>Density Corrected Size: SVG (cross-origin)</title> | ||
| <link rel="match" href="density-corrected-image-svg-ref.html" /> | ||
| <meta name="assert" content="Assert that density-corrected size in EXIF is taken into account for SVG <image>"> | ||
| </head> | ||
| <body> | ||
| <svg width="200" height="200"> | ||
| <image href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-none.jpg" /> | ||
| </svg> | ||
| <svg width="200" height="200"> | ||
| <image href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg" /> | ||
| </svg> | ||
| <svg width="200" height="200"> | ||
| <image href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-lores.jpg" /> | ||
| </svg> | ||
| <svg width="200" height="200"> | ||
| <image href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-non-uniform.jpg" /> | ||
| </svg> | ||
| <svg width="200" height="200"> | ||
| <image href="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-with-orientation.jpg" /> | ||
| </svg> | ||
| </div> | ||
| </body> | ||
| </html> |
33 changes: 33 additions & 0 deletions
33
density-size-correction/density-corrected-size-bg-cross-origin.sub.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,33 @@ | ||
| <!DOCTYPE html> | ||
| <head> | ||
| <title>Density corrected size: background images (cross-origin)</title> | ||
| <link rel="match" href="density-corrected-size-bg-ref.html" /> | ||
| <meta name="assert" content="Assert that background images with EXIF density-corrected-size are rendered correctly"> | ||
| </head> | ||
| <body> | ||
| <style> | ||
| body { | ||
| --lores: url(http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-lores.jpg); | ||
| --hires: url(http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg); | ||
| --default: url(http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-none.jpg); | ||
| --non-uniform: url(http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-non-uniform.jpg); | ||
| } | ||
| .default-bg {background-image: var(--default); } | ||
| .lores-bg {background-image: var(--lores); } | ||
| .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> | ||
| <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> | ||
| </body> | ||
| </html> |
13 changes: 13 additions & 0 deletions
13
density-size-correction/density-corrected-size-img-cross-origin.sub.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,13 @@ | ||
| <!DOCTYPE html> | ||
| <head> | ||
| <title>Density corrected size: rendering</title> | ||
| <link rel="match" href="density-corrected-size-img-ref.html" /> | ||
| <meta name="assert" content="Assert that images with EXIF density-corrected-size are rendered correctly"> | ||
| </head> | ||
| <body> | ||
| <img src="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-none.jpg" /> | ||
| <img src="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg" /> | ||
| <img src="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-lores.jpg" /> | ||
| <img src="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-non-uniform.jpg" /> | ||
| </body> | ||
| </html> |
19 changes: 19 additions & 0 deletions
19
density-size-correction/density-corrected-size-pseudo-elements-cross-origin.sub.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,19 @@ | ||
| <!DOCTYPE html> | ||
| <head> | ||
| <title>Density corrected size: pseudo-elements (cross-origin)</title> | ||
| <link rel="match" href="density-corrected-size-pseudo-elements-ref.html" /> | ||
| <meta name="assert" content="Assert that images with EXIF density-corrected-size are rendered correctly when in a pseudo element"> | ||
| </head> | ||
| <body> | ||
| <style> | ||
| body { | ||
| --lores: url(http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-lores.jpg); | ||
| --default: url(http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-none.jpg); | ||
| } | ||
| .lores-after::after {content: var(--lores); } | ||
| .default-after::after {content: var(--default); } | ||
| </style> | ||
| <div class="lores-after box"></div> | ||
| <div class="default-after box"></div> | ||
| </body> | ||
| </html> |
33 changes: 33 additions & 0 deletions
33
density-size-correction/density-corrected-various-elements-cross-origin.sub.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,33 @@ | ||
| <html> | ||
| <head> | ||
| <title>Density Corrected Size: various elements (cross-origin)</title> | ||
| <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/video-poster)"> | ||
| <style> | ||
| .row { | ||
| display: flex; | ||
| } | ||
|
|
||
| .row > * { | ||
| object-fit: none; | ||
| object-position: top left; | ||
| margin: 5px; | ||
| width: 100px; | ||
| height: 50px; | ||
| background: #CCCCCC; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>There following boxes should be identical (the colorful boxes at the top-left quarter)</p> | ||
| <div class="row"> | ||
| <div> | ||
| <img src="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-none.jpg" width="50" height="25" /> | ||
| </div> | ||
| <video poster="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg"></video> | ||
| <div> | ||
| <input type="image" src="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg" /> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
13 changes: 13 additions & 0 deletions
13
density-size-correction/image-set-001-cross-origin.sub.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,13 @@ | ||
| <!doctype html> | ||
| <link rel="match" href="image-set-001-ref.html"> | ||
| <style> | ||
| body { margin: 0 } | ||
| div { | ||
| width: 100vw; | ||
| height: 100vh; | ||
| background-image: -webkit-image-set(url(http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg) 1x); | ||
| background-image: image-set(url(http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg) 1x); | ||
| background-repeat: no-repeat; | ||
| } | ||
| </style> | ||
| <div></div> |
13 changes: 13 additions & 0 deletions
13
density-size-correction/image-set-002-cross-origin.sub.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,13 @@ | ||
| <!doctype html> | ||
| <link rel="match" href="image-set-002-ref.html"> | ||
| <style> | ||
| body { margin: 0 } | ||
| div { | ||
| width: 100vw; | ||
| height: 100vh; | ||
| background-image: -webkit-image-set(url(http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg) 0.5x); | ||
| background-image: image-set(url(http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg) 0.5x); | ||
| background-repeat: no-repeat; | ||
| } | ||
| </style> | ||
| <div></div> |
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,4 @@ | ||
| <!doctype html> | ||
| <link rel="match" href="srcset-ref.html"> | ||
| <img srcset="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg 1x"> | ||
| <img srcset="http://{{hosts[alt][]}}:{{ports[http][0]}}/density-size-correction/resources/exif-resolution-valid-hires.jpg 0.5x"> |