forked from kdashg/gecko-cinn
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 1889799 [wpt PR 45563] - Test interaction between
object-fit an…
…d `contain: size`, a=testonly Automatic update from web-platform-tests Test interaction between `object-fit` and `contain: size` (#45563) * Test interaction between object-fit and contain:size [css-images] [css-contain] `object-fit` should use the "real" natural aspect ratio, and `contain: size` should not ruin this w3c/csswg-drafts#10116 w3c/csswg-drafts#6257 * Change image-rendering: crisp-edges to pixelated Chromium doesn’t support `crisp-edges` * Remove whitespace to make linter happy -- wpt-commits: ae05e1ac2530c57f3e6205c50d6176b4875098ff wpt-pr: 45563
- Loading branch information
1 parent
cf60eb5
commit eff88c1
Showing
3 changed files
with
176 additions
and
0 deletions.
There are no files selected for viewing
58 changes: 58 additions & 0 deletions
58
...tform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001i.tentative.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,58 @@ | ||
| <!DOCTYPE html> | ||
| <!-- | ||
| Any copyright is dedicated to the Public Domain. | ||
| http://creativecommons.org/publicdomain/zero/1.0/ | ||
| --> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Test: 'object-fit: contain' and 'contain-intrinsic-size' on img element, embedding a PNG image</title> | ||
| <link rel="author" title="Eric Portis" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116"> | ||
| <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html"> | ||
| <style type="text/css"> | ||
| img { | ||
| border: 1px dashed gray; | ||
| padding: 1px; | ||
| image-rendering: pixelated; | ||
| float: left; | ||
| object-position: top left; | ||
| contain: size; | ||
| } | ||
| br { | ||
| clear: both; | ||
| } | ||
| .big { | ||
| contain-intrinsic-width: 32px; | ||
| contain-intrinsic-height: 48px; | ||
| } | ||
| .small { | ||
| contain-intrinsic-width: 8px; | ||
| contain-intrinsic-height: 8px; | ||
| } | ||
|
|
||
| .cover { object-fit: cover } | ||
| .contain { object-fit: contain } | ||
| .fill { object-fit: fill } | ||
| .none { object-fit: none } | ||
| .scaledown { object-fit: scale-down } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <!-- big: --> | ||
| <img src="support/colors-16x8.png" class="big cover"> | ||
| <img src="support/colors-16x8.png" class="big contain"> | ||
| <img src="support/colors-16x8.png" class="big fill"> | ||
| <img src="support/colors-16x8.png" class="big none"> | ||
| <img src="support/colors-16x8.png" class="big scaledown"> | ||
| <br> | ||
| <!-- small: --> | ||
| <img src="support/colors-16x8.png" class="small cover"> | ||
| <img src="support/colors-16x8.png" class="small contain"> | ||
| <img src="support/colors-16x8.png" class="small fill"> | ||
| <img src="support/colors-16x8.png" class="small none"> | ||
| <img src="support/colors-16x8.png" class="small scaledown"> | ||
| <br> | ||
| </body> | ||
| </html> |
60 changes: 60 additions & 0 deletions
60
testing/web-platform/tests/css/css-images/object-fit-containsize-png-001-ref.tentative.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,60 @@ | ||
| <!DOCTYPE html> | ||
| <!-- | ||
| Any copyright is dedicated to the Public Domain. | ||
| http://creativecommons.org/publicdomain/zero/1.0/ | ||
| --> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Reftest Reference</title> | ||
| <link rel="author" title="Eric Portis" href="mailto:[email protected]"> | ||
| <style type="text/css"> | ||
| .objectOuter { | ||
| border: 1px dashed gray; | ||
| padding: 1px; | ||
| float: left; | ||
| } | ||
| .objectOuter > * { | ||
| background-image: url("support/colors-16x8.png"); | ||
| background-repeat: no-repeat; | ||
| image-rendering: pixelated; | ||
| background-position: 0% 0%; | ||
| } | ||
| br { | ||
| clear: both; | ||
| } | ||
| .big { | ||
| width: 32px; | ||
| height: 48px; | ||
| } | ||
| .small { | ||
| width: 8px; | ||
| height: 8px; | ||
| } | ||
|
|
||
| .cover { background-size: cover; } | ||
| .contain { background-size: contain; } | ||
| .fill { background-size: 100% 100%; } | ||
| .none { background-size: auto auto; } | ||
| .scaledown { background-size: auto auto; } | ||
| .small.scaledown { background-size: contain; } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <!-- big: --> | ||
| <div class="objectOuter"><div class="big cover"></div></div> | ||
| <div class="objectOuter"><div class="big contain"></div></div> | ||
| <div class="objectOuter"><div class="big fill"></div></div> | ||
| <div class="objectOuter"><div class="big none"></div></div> | ||
| <div class="objectOuter"><div class="big scaledown"></div></div> | ||
| <br> | ||
| <!-- small: --> | ||
| <div class="objectOuter"><div class="small cover"></div></div> | ||
| <div class="objectOuter"><div class="small contain"></div></div> | ||
| <div class="objectOuter"><div class="small fill"></div></div> | ||
| <div class="objectOuter"><div class="small none"></div></div> | ||
| <div class="objectOuter"><div class="small scaledown"></div></div> | ||
| <br> | ||
| </body> | ||
| </html> |
58 changes: 58 additions & 0 deletions
58
testing/web-platform/tests/css/css-images/object-fit-containsize-png-001i.tentative.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,58 @@ | ||
| <!DOCTYPE html> | ||
| <!-- | ||
| Any copyright is dedicated to the Public Domain. | ||
| http://creativecommons.org/publicdomain/zero/1.0/ | ||
| --> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Test: 'object-fit: contain' and 'contain: size' on img element, embedding a PNG image</title> | ||
| <link rel="author" title="Eric Portis" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116"> | ||
| <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html"> | ||
| <style type="text/css"> | ||
| img { | ||
| border: 1px dashed gray; | ||
| padding: 1px; | ||
| image-rendering: pixelated; | ||
| float: left; | ||
| contain: size; | ||
| object-position: top left; | ||
| } | ||
| br { | ||
| clear: both; | ||
| } | ||
| .big { | ||
| width: 32px; | ||
| height: 48px; | ||
| } | ||
| .small { | ||
| width: 8px; | ||
| height: 8px; | ||
| } | ||
|
|
||
| .cover { object-fit: cover } | ||
| .contain { object-fit: contain } | ||
| .fill { object-fit: fill } | ||
| .none { object-fit: none } | ||
| .scaledown { object-fit: scale-down } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <!-- big: --> | ||
| <img src="support/colors-16x8.png" class="big cover"> | ||
| <img src="support/colors-16x8.png" class="big contain"> | ||
| <img src="support/colors-16x8.png" class="big fill"> | ||
| <img src="support/colors-16x8.png" class="big none"> | ||
| <img src="support/colors-16x8.png" class="big scaledown"> | ||
| <br> | ||
| <!-- small: --> | ||
| <img src="support/colors-16x8.png" class="small cover"> | ||
| <img src="support/colors-16x8.png" class="small contain"> | ||
| <img src="support/colors-16x8.png" class="small fill"> | ||
| <img src="support/colors-16x8.png" class="small none"> | ||
| <img src="support/colors-16x8.png" class="small scaledown"> | ||
| <br> | ||
| </body> | ||
| </html> |