0ct0pu5/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-12-13 01:40:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

LibWeb: Add support for object-fit: scale-down

Browse source
This commit is contained in:
InvalidUsernameException 2024-12-08 21:23:15 +01:00
parent 10311fba87
commit e27f0a8a6e
3 changed files with 120 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
Libraries/LibWeb/Painting/ImagePaintable.cpp
View file

@ -75,11 +75,20 @@ void ImagePaintable::paint(PaintContext& context, PaintPhase phase) const
auto bitmap_aspect_ratio = (float)bitmap_rect.height() / bitmap_rect.width();
auto image_aspect_ratio = (float)image_rect.height().value() / image_rect.width().value();
// FIXME: Scale may be wrong if device-pixels != css-pixels.
auto scale_x = 0.0f;
auto scale_y = 0.0f;
Gfx::IntRect bitmap_intersect = bitmap_rect;
auto object_fit = m_is_svg_image ? CSS::ObjectFit::Contain : computed_values().object_fit();
if (object_fit == CSS::ObjectFit::ScaleDown) {
if (bitmap_rect.width() > image_int_rect.width() || bitmap_rect.height() > image_int_rect.height()) {
object_fit = CSS::ObjectFit::Contain;
} else {
object_fit = CSS::ObjectFit::None;
}
}
switch (object_fit) {
case CSS::ObjectFit::Fill:
scale_x = (float)image_int_rect.width() / bitmap_rect.width();
@ -106,7 +115,7 @@ void ImagePaintable::paint(PaintContext& context, PaintPhase phase) const
}
break;
case CSS::ObjectFit::ScaleDown:
// FIXME: Implement
VERIFY_NOT_REACHED(); // handled outside the switch-case
case CSS::ObjectFit::None:
scale_x = 1;
scale_y = 1;

83
Tests/LibWeb/Ref/expected/object-fit-scale-down-ref.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 1px solid #888;
display: inline-block;
width: 128px;
height: 128px;
}
.container div {
position: relative;
}
.red {
background-color: #f00;
}
.yellow {
background-color: #ff0;
}
.green {
background-color: #0f0;
}
.blue {
background-color: #00f;
}
</style>
</head>
<body>
<!-- square_256x256 -->
<div class="container">
<div class="red" style="width: 128px; height: 128px; left: 0px; top: 0px">
<div class="yellow" style="width: 96px; height: 96px; left: 16px; top: 16px;">
<div class="green" style="width: 64px; height: 64px; left: 16px; top: 16px;">
<div class="blue" style="width: 32px; height: 32px; left: 16px; top: 16px;">
</div>
</div>
</div>
</div>
</div>
<!-- square_64x64 -->
<div class="container">
<div class="red" style="width: 64px; height: 64px; left: 32px; top: 32px;">
<div class="yellow" style="width: 48px; height: 48px; left: 8px; top: 8px;">
<div class="green" style="width: 32px; height: 32px; left: 8px; top: 8px;">
<div class="blue" style="width: 16px; height: 16px; left: 8px; top: 8px;">
</div>
</div>
</div>
</div>
</div>
<!-- portrait_128x256 -->
<div class="container">
<div class="red" style="width: 64px; height: 128px; left: 32px; top: 0px;">
<div class="yellow" style="width: 48px; height: 96px; left: 8px; top: 16px;">
<div class="green" style="width: 32px; height: 64px; left: 8px; top: 16px;">
<div class="blue" style="width: 16px; height: 32px; left: 8px; top: 16px;">
</div>
</div>
</div>
</div>
</div>
<!-- landscape_256x128 -->
<div class="container">
<div class="red" style="width: 128px; height: 64px; left: 0px; top: 32px;">
<div class="yellow" style="width: 96px; height: 48px; left: 16px; top: 8px;">
<div class="green" style="width: 64px; height: 32px; left: 16px; top: 8px;">
<div class="blue" style="width: 32px; height: 16px; left: 16px; top: 8px;">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

27
Tests/LibWeb/Ref/input/object-fit-scale-down.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<link rel="match" href="../expected/object-fit-scale-down-ref.html" />
<style>
img {
border: 1px solid #888;
width: 128px;
height: 128px;
object-fit: scale-down;
}
</style>
</head>
<body>
<!-- square_256x256 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAgMAAAAhHED1AAAADFBMVEX/AAD//wAA/wAAAP+LkmRfAAAAWklEQVR42u3MMQ0AIAwAsJnEJCbh4SJZgJe1AhoBAJBojwQCgUAgENQJ+oFAIBAIBIK6wdgIBAKBQCAQCAQCgUAgEOxBRiAQCAQCQb3glkAgEAgEgv8DAIBlAquBmQ+mfdtgAAAAAElFTkSuQmCC" />
<!-- square_64x64 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAADFBMVEX/AAD//wAA/wAAAP+LkmRfAAAAJUlEQVQ4y2NgGDQgFAkMrMAqKBh4gf9AMCow4NGAJjA40umgAABZSCmQoUN9AgAAAABJRU5ErkJggg==" />
<!-- portrait_128x256 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAEAAgMAAAAGl5Y0AAAADFBMVEX/AAD//wAA/wAAAP+LkmRfAAAAQklEQVRo3u3KUQoAEBBAQZd0SZckRW1acoB5f6+mFEl6VC8BAADMaUcAAAAR9BUAAAAAAMAviAEAAGyQBQAAIElJAx6BTIgBlxbYAAAAAElFTkSuQmCC" />
<!-- landscape_256x128 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACAAgMAAACZ21+ZAAAADFBMVEX/AAD//wAA/wAAAP+LkmRfAAAAQElEQVRo3u3MMQ0AIAwAsJnEJCbhX0KAd2sFNAIgGZ8EAkH9YF4IBIJ+wUoEAoFAIBAITgQCQZ/glUAgqBsA7W37FUyIPAsIjgAAAABJRU5ErkJggg==" />
</body>
</html>