mirrors/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-01-22 09:12:13 -05:00
Code Issues Projects Releases Packages Wiki Activity

Tests: Add tests that verify object-fit and -position with zoom

Browse source
This commit is contained in:
InvalidUsernameException 2024-12-23 22:43:12 +01:00 committed by Alexander Kalenik
parent 5cc9a5802d
commit 6a798732b9
Notes: github-actions[bot] 2025-01-21 15:12:26 +00:00 
Author: https://github.com/InvalidUsernameException
Commit: https://github.com/LadybirdBrowser/ladybird/commit/6a798732b9d
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2982
Reviewed-by: https://github.com/AtkinsSJ
4 changed files with 176 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
Tests/LibWeb/Ref/expected/object-fit-with-zoom-ref.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; }
.row { clear: both; }
.container {
width: 128px;
height: 128px;
border: 4px solid black;
float: left;
}
.blue { background-color: #00f; }
.green { background-color: #0f0; }
.full {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.center-half {
position: relative;
left: 25%;
top: 25%;
width: 50%;
height: 50%;
}
.offset-half {
position: relative;
left: 12.5%;
top: 12.5%;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div class="row">
<div class="container"><div class="blue full"></div></div>
<div class="container"><div class="green offset-half"><div class="blue center-half"></div></div></div>
</div>
<div class="row">
<div class="container"><div class="green full"><div class="blue center-half"></div></div></div>
<div class="container"><div class="green offset-half"><div class="blue center-half"></div></div></div>
</div>
</body>
</html>

41
Tests/LibWeb/Ref/input/object-fit-with-zoom-0.5.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<link rel="match" href="../expected/object-fit-with-zoom-ref.html" />
<style>
body { margin: 0; }
div { clear: both; }
.scale-down > img { object-fit: scale-down }
img {
width: 256px;
height: 256px;
object-fit: none;
image-rendering: crisp-edges;
border: 8px solid black;
float: left;
}
.offset {
object-position: 32px 32px;
}
</style>
</head>
<body>
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIAAQMAAADOtka5AAAABlBMVEUAAP8A/wDoRkJMAAAAlElEQVR42u3MoQ0AQAjAQPZfGvybDyEorrLiIocFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwDs+AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsA90AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACcBwrJtKWSEyoL6AAAAABJRU5ErkJggg==" />
<img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQMAAAD58POIAAAABlBMVEUAAP8A/wDoRkJMAAAAJklEQVRIx2P4jwYYRgVGBdAEGKBgVGBUYFRgVIBUgdHydFQAhwAABZj6TKPJLmoAAAAASUVORK5CYII=" />
</div>
<div class="scale-down">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIAAQMAAADOtka5AAAABlBMVEUAAP8A/wDoRkJMAAAAlElEQVR42u3MoQ0AQAjAQPZfGvybDyEorrLiIocFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwDs+AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsA90AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACcBwrJtKWSEyoL6AAAAABJRU5ErkJggg==" />
<img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQMAAAD58POIAAAABlBMVEUAAP8A/wDoRkJMAAAAJklEQVRIx2P4jwYYRgVGBdAEGKBgVGBUYFRgVIBUgdHydFQAhwAABZj6TKPJLmoAAAAASUVORK5CYII=" />
</div>
<script>
if (window.internals) {
window.internals.setBrowserZoom(0.5);
} else {
document.body.innerText = "This test requires access to the internals object. When opening it manually, please start Ladybird with the command line argument `--expose-internals-object`";
}
</script>
</body>
</html>

41
Tests/LibWeb/Ref/input/object-fit-with-zoom-2.0.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<link rel="match" href="../expected/object-fit-with-zoom-ref.html" />
<style>
body { margin: 0; }
div { clear: both; }
.scale-down > img { object-fit: scale-down }
img {
width: 64px;
height: 64px;
object-fit: none;
image-rendering: crisp-edges;
border: 2px solid black;
float: left;
}
.offset {
object-position: 8px 8px;
}
</style>
</head>
<body>
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQMAAAD58POIAAAABlBMVEUAAP8A/wDoRkJMAAAAJklEQVRIx2P4jwYYRgVGBdAEGKBgVGBUYFRgVIBUgdHydFQAhwAABZj6TKPJLmoAAAAASUVORK5CYII=" />
<img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEUAAP8A/wDoRkJMAAAAFUlEQVQI12P4DwQMxBAMDNQliLMXAORTX6F6xmICAAAAAElFTkSuQmCC" />
</div>
<div class="scale-down">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQMAAAD58POIAAAABlBMVEUAAP8A/wDoRkJMAAAAJklEQVRIx2P4jwYYRgVGBdAEGKBgVGBUYFRgVIBUgdHydFQAhwAABZj6TKPJLmoAAAAASUVORK5CYII=" />
<img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEUAAP8A/wDoRkJMAAAAFUlEQVQI12P4DwQMxBAMDNQliLMXAORTX6F6xmICAAAAAElFTkSuQmCC" />
</div>
<script>
if (window.internals) {
window.internals.setBrowserZoom(2.0);
} else {
document.body.innerText = "This test requires access to the internals object. When opening it manually, please start Ladybird with the command line argument `--expose-internals-object`";
}
</script>
</body>
</html>

41
Tests/LibWeb/Ref/input/object-fit-with-zoom-4.0.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<link rel="match" href="../expected/object-fit-with-zoom-ref.html" />
<style>
body { margin: 0; }
div { clear: both; }
.scale-down > img { object-fit: scale-down }
img {
width: 32px;
height: 32px;
object-fit: none;
image-rendering: crisp-edges;
border: 1px solid black;
float: left;
}
.offset {
object-position: 4px 4px;
}
</style>
</head>
<body>
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAP8A/wDoRkJMAAAAGElEQVQoz2P4DwUMg4bBAASjDNyMQRVfAGtyfpBbaRBCAAAAAElFTkSuQmCC" />
<img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAP8A/wDoRkJMAAAAE0lEQVQI12P4/58Bjj7wY0dIagBBkhfpgPvxRQAAAABJRU5ErkJggg==" />
</div>
<div class="scale-down">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAP8A/wDoRkJMAAAAGElEQVQoz2P4DwUMg4bBAASjDNyMQRVfAGtyfpBbaRBCAAAAAElFTkSuQmCC" />
<img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAP8A/wDoRkJMAAAAE0lEQVQI12P4/58Bjj7wY0dIagBBkhfpgPvxRQAAAABJRU5ErkJggg==" />
</div>
<script>
if (window.internals) {
window.internals.setBrowserZoom(4.0);
} else {
document.body.innerText = "This test requires access to the internals object. When opening it manually, please start Ladybird with the command line argument `--expose-internals-object`";
}
</script>
</body>
</html>