mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-01 05:39:11 +00:00
LibWeb: Do not deform bitmaps partially outside the img-box
Instead of trying to manually determine which parts of a bitmap fall within the box of the `<img>` element, just draw the whole bitmap and let Skia clip the draw-area to the correct rectangle. This fixes a bug where the entire bitmap was squashed into the rectangle of the image box instead of being clipped. With this change, image rendering is now correct enough to import some of the WPT tests for object-fit and object-position. To get some good coverage I have imported all tests for the `<img>` tag. I also wanted to import a subset of the tests for the `<object>` tag, since those are passing as well now. Unfortunately, they are flaky for unknown reasons.
This commit is contained in:
InvalidUsernameException
Alexander Kalenik
parent
389a63d6bf
commit
e055927ead
Notes:
github-actions[bot]
2025-03-05 15:33:54 +00:00
Author: https://github.com/InvalidUsernameException
Commit: e055927ead
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3809
36 changed files with 1752 additions and 22 deletions
|
|
@ -0,0 +1,79 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<br>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-16x8.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<br>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-8x16.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<br>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-16x8.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<br>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-8x16.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<br>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-16x8.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<br>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-8x16.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8.png");
|
||||
background-size: auto auto;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<br>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-16x8.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16.png");
|
||||
background-size: auto auto;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<br>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-8x16.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8.png");
|
||||
background-size: auto auto;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.objectOuter > .small { background-size: contain; }
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<br>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-16x8.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16.png");
|
||||
background-size: auto auto;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.objectOuter > .small { background-size: contain; }
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<br>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-8x16.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background: lightgray;
|
||||
margin-right: 2px;
|
||||
background-image: url("support/colors-16x8.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.op_y-7 { background-position: 50% -7% }
|
||||
.op_y13 { background-position: 50% 13% }
|
||||
.op_y23 { background-position: 50% 23% }
|
||||
.op_y50 { background-position: 50% 50% }
|
||||
.op_y75 { background-position: 50% 75% }
|
||||
.op_y88 { background-position: 50% 88% }
|
||||
.op_y111 { background-position: 50% 111% }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="op_y-7"></div>
|
||||
<div class="op_y13"></div>
|
||||
<div class="op_y23"></div>
|
||||
<div class="op_y50"></div>
|
||||
<div class="op_y75"></div>
|
||||
<div class="op_y88"></div>
|
||||
<div class="op_y111"></div>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-16x8.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background: lightgray;
|
||||
margin-right: 2px;
|
||||
background-image: url("support/colors-8x16.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.op_x-7 { background-position: -7% 50% }
|
||||
.op_x13 { background-position: 13% 50% }
|
||||
.op_x23 { background-position: 23% 50% }
|
||||
.op_x50 { background-position: 50% 50% }
|
||||
.op_x75 { background-position: 75% 50% }
|
||||
.op_x88 { background-position: 88% 50% }
|
||||
.op_x111 { background-position: 111% 50% }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="op_x-7"></div>
|
||||
<div class="op_x13"></div>
|
||||
<div class="op_x23"></div>
|
||||
<div class="op_x50"></div>
|
||||
<div class="op_x75"></div>
|
||||
<div class="op_x88"></div>
|
||||
<div class="op_x111"></div>
|
||||
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
||||
<img style="display: none;" src="support/colors-8x16.png" />
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 93 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Loading…
Add table
Add a link
Reference in a new issue