mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 17:55:07 +02:00
d76f841994
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 is the second attempt at this bugfix. The prior one wase055927eadand broke image rendering whenever the page was scrolled. It has subsequently been reverted in16b14273d1. Hopefully this time it is not horribly broken.
78 lines
2.7 KiB
HTML
78 lines
2.7 KiB
HTML
<!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: fill' on img element, with a PNG image and with various 'object-position' values</title>
|
|
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
|
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
|
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
|
<link rel="match" href="../../../../expected/wpt-import/css/css-images/object-fit-fill-png-001-ref.html">
|
|
<style type="text/css">
|
|
img {
|
|
border: 1px dashed gray;
|
|
padding: 1px;
|
|
object-fit: fill;
|
|
image-rendering: crisp-edges;
|
|
float: left;
|
|
}
|
|
|
|
.bigWide {
|
|
width: 48px;
|
|
height: 32px;
|
|
}
|
|
.bigTall {
|
|
width: 32px;
|
|
height: 48px;
|
|
}
|
|
.small {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
br { clear: both; }
|
|
|
|
.tr { object-position: top right }
|
|
.bl { object-position: bottom left }
|
|
.tl { object-position: top 25% left 25% }
|
|
.br { object-position: bottom 1px right 2px }
|
|
|
|
.tc { object-position: top 3px left 50% }
|
|
.cr { object-position: top 50% right 25% }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- big/wide: -->
|
|
<img src="support/colors-16x8.png" class="bigWide tr">
|
|
<img src="support/colors-16x8.png" class="bigWide bl">
|
|
<img src="support/colors-16x8.png" class="bigWide tl">
|
|
<img src="support/colors-16x8.png" class="bigWide br">
|
|
<img src="support/colors-16x8.png" class="bigWide tc">
|
|
<img src="support/colors-16x8.png" class="bigWide cr">
|
|
<img src="support/colors-16x8.png" class="bigWide">
|
|
<br>
|
|
<!-- big/tall: -->
|
|
<img src="support/colors-16x8.png" class="bigTall tr">
|
|
<img src="support/colors-16x8.png" class="bigTall bl">
|
|
<img src="support/colors-16x8.png" class="bigTall tl">
|
|
<img src="support/colors-16x8.png" class="bigTall br">
|
|
<img src="support/colors-16x8.png" class="bigTall tc">
|
|
<img src="support/colors-16x8.png" class="bigTall cr">
|
|
<img src="support/colors-16x8.png" class="bigTall">
|
|
<br>
|
|
<!-- small: -->
|
|
<img src="support/colors-16x8.png" class="small tr">
|
|
<img src="support/colors-16x8.png" class="small bl">
|
|
<img src="support/colors-16x8.png" class="small tl">
|
|
<img src="support/colors-16x8.png" class="small br">
|
|
<img src="support/colors-16x8.png" class="small tc">
|
|
<img src="support/colors-16x8.png" class="small cr">
|
|
<img src="support/colors-16x8.png" class="small">
|
|
<br>
|
|
</body>
|
|
</html>
|