mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-23 13:05:12 +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: https://github.com/LadybirdBrowser/ladybird/commit/e055927eadc Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3809
36 changed files with 1752 additions and 22 deletions
|
|
@ -149,7 +149,8 @@ void ImageStyleValue::paint(PaintContext& context, DevicePixelRect const& dest_r
|
||||||
{
|
{
|
||||||
if (auto const* b = bitmap(m_current_frame_index, dest_rect.size().to_type<int>()); b != nullptr) {
|
if (auto const* b = bitmap(m_current_frame_index, dest_rect.size().to_type<int>()); b != nullptr) {
|
||||||
auto scaling_mode = to_gfx_scaling_mode(image_rendering, b->rect(), dest_rect.to_type<int>());
|
auto scaling_mode = to_gfx_scaling_mode(image_rendering, b->rect(), dest_rect.to_type<int>());
|
||||||
context.display_list_recorder().draw_scaled_immutable_bitmap(dest_rect.to_type<int>(), *b, b->rect(), scaling_mode);
|
auto dest_int_rect = dest_rect.to_type<int>();
|
||||||
|
context.display_list_recorder().draw_scaled_immutable_bitmap(dest_int_rect, dest_int_rect, *b, scaling_mode);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -72,8 +72,8 @@ struct DrawPaintingSurface {
|
||||||
|
|
||||||
struct DrawScaledImmutableBitmap {
|
struct DrawScaledImmutableBitmap {
|
||||||
Gfx::IntRect dst_rect;
|
Gfx::IntRect dst_rect;
|
||||||
|
Gfx::IntRect clip_rect;
|
||||||
NonnullRefPtr<Gfx::ImmutableBitmap> bitmap;
|
NonnullRefPtr<Gfx::ImmutableBitmap> bitmap;
|
||||||
Gfx::IntRect src_rect;
|
|
||||||
Gfx::ScalingMode scaling_mode;
|
Gfx::ScalingMode scaling_mode;
|
||||||
|
|
||||||
[[nodiscard]] Gfx::IntRect bounding_rect() const { return dst_rect; }
|
[[nodiscard]] Gfx::IntRect bounding_rect() const { return dst_rect; }
|
||||||
|
|
|
||||||
|
|
@ -135,11 +135,14 @@ void DisplayListPlayerSkia::draw_painting_surface(DrawPaintingSurface const& com
|
||||||
|
|
||||||
void DisplayListPlayerSkia::draw_scaled_immutable_bitmap(DrawScaledImmutableBitmap const& command)
|
void DisplayListPlayerSkia::draw_scaled_immutable_bitmap(DrawScaledImmutableBitmap const& command)
|
||||||
{
|
{
|
||||||
auto src_rect = to_skia_rect(command.src_rect);
|
|
||||||
auto dst_rect = to_skia_rect(command.dst_rect);
|
auto dst_rect = to_skia_rect(command.dst_rect);
|
||||||
|
auto clip_rect = to_skia_rect(command.clip_rect);
|
||||||
auto& canvas = surface().canvas();
|
auto& canvas = surface().canvas();
|
||||||
SkPaint paint;
|
SkPaint paint;
|
||||||
canvas.drawImageRect(command.bitmap->sk_image(), src_rect, dst_rect, to_skia_sampling_options(command.scaling_mode), &paint, SkCanvas::kStrict_SrcRectConstraint);
|
canvas.save();
|
||||||
|
canvas.clipRect(clip_rect);
|
||||||
|
canvas.drawImageRect(command.bitmap->sk_image(), dst_rect, to_skia_sampling_options(command.scaling_mode), &paint);
|
||||||
|
canvas.restore();
|
||||||
}
|
}
|
||||||
|
|
||||||
void DisplayListPlayerSkia::draw_repeated_immutable_bitmap(DrawRepeatedImmutableBitmap const& command)
|
void DisplayListPlayerSkia::draw_repeated_immutable_bitmap(DrawRepeatedImmutableBitmap const& command)
|
||||||
|
|
|
||||||
|
|
@ -194,14 +194,14 @@ void DisplayListRecorder::draw_painting_surface(Gfx::IntRect const& dst_rect, No
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
void DisplayListRecorder::draw_scaled_immutable_bitmap(Gfx::IntRect const& dst_rect, Gfx::ImmutableBitmap const& bitmap, Gfx::IntRect const& src_rect, Gfx::ScalingMode scaling_mode)
|
void DisplayListRecorder::draw_scaled_immutable_bitmap(Gfx::IntRect const& dst_rect, Gfx::IntRect const& clip_rect, Gfx::ImmutableBitmap const& bitmap, Gfx::ScalingMode scaling_mode)
|
||||||
{
|
{
|
||||||
if (dst_rect.is_empty())
|
if (dst_rect.is_empty())
|
||||||
return;
|
return;
|
||||||
append(DrawScaledImmutableBitmap {
|
append(DrawScaledImmutableBitmap {
|
||||||
.dst_rect = dst_rect,
|
.dst_rect = dst_rect,
|
||||||
|
.clip_rect = clip_rect,
|
||||||
.bitmap = bitmap,
|
.bitmap = bitmap,
|
||||||
.src_rect = src_rect,
|
|
||||||
.scaling_mode = scaling_mode,
|
.scaling_mode = scaling_mode,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -95,7 +95,7 @@ public:
|
||||||
void draw_rect(Gfx::IntRect const& rect, Color color, bool rough = false);
|
void draw_rect(Gfx::IntRect const& rect, Color color, bool rough = false);
|
||||||
|
|
||||||
void draw_painting_surface(Gfx::IntRect const& dst_rect, NonnullRefPtr<Gfx::PaintingSurface>, Gfx::IntRect const& src_rect, Gfx::ScalingMode scaling_mode = Gfx::ScalingMode::NearestNeighbor);
|
void draw_painting_surface(Gfx::IntRect const& dst_rect, NonnullRefPtr<Gfx::PaintingSurface>, Gfx::IntRect const& src_rect, Gfx::ScalingMode scaling_mode = Gfx::ScalingMode::NearestNeighbor);
|
||||||
void draw_scaled_immutable_bitmap(Gfx::IntRect const& dst_rect, Gfx::ImmutableBitmap const& bitmap, Gfx::IntRect const& src_rect, Gfx::ScalingMode scaling_mode = Gfx::ScalingMode::NearestNeighbor);
|
void draw_scaled_immutable_bitmap(Gfx::IntRect const& dst_rect, Gfx::IntRect const& clip_rect, Gfx::ImmutableBitmap const& bitmap, Gfx::ScalingMode scaling_mode = Gfx::ScalingMode::NearestNeighbor);
|
||||||
|
|
||||||
void draw_repeated_immutable_bitmap(Gfx::IntRect dst_rect, Gfx::IntRect clip_rect, NonnullRefPtr<Gfx::ImmutableBitmap> bitmap, Gfx::ScalingMode scaling_mode, DrawRepeatedImmutableBitmap::Repeat);
|
void draw_repeated_immutable_bitmap(Gfx::IntRect dst_rect, Gfx::IntRect clip_rect, NonnullRefPtr<Gfx::ImmutableBitmap> bitmap, Gfx::ScalingMode scaling_mode, DrawRepeatedImmutableBitmap::Repeat);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -79,7 +79,6 @@ void ImagePaintable::paint(PaintContext& context, PaintPhase phase) const
|
||||||
|
|
||||||
auto scale_x = 0.0f;
|
auto scale_x = 0.0f;
|
||||||
auto scale_y = 0.0f;
|
auto scale_y = 0.0f;
|
||||||
Gfx::IntRect bitmap_intersect = bitmap_rect;
|
|
||||||
|
|
||||||
// https://drafts.csswg.org/css-images/#the-object-fit
|
// https://drafts.csswg.org/css-images/#the-object-fit
|
||||||
auto object_fit = m_is_svg_image ? CSS::ObjectFit::Contain : computed_values().object_fit();
|
auto object_fit = m_is_svg_image ? CSS::ObjectFit::Contain : computed_values().object_fit();
|
||||||
|
|
@ -109,11 +108,9 @@ void ImagePaintable::paint(PaintContext& context, PaintPhase phase) const
|
||||||
if (bitmap_aspect_ratio >= image_aspect_ratio) {
|
if (bitmap_aspect_ratio >= image_aspect_ratio) {
|
||||||
scale_x = (float)image_rect.width() / bitmap_rect.width();
|
scale_x = (float)image_rect.width() / bitmap_rect.width();
|
||||||
scale_y = scale_x;
|
scale_y = scale_x;
|
||||||
bitmap_intersect.set_height(bitmap_rect.width() * image_aspect_ratio);
|
|
||||||
} else {
|
} else {
|
||||||
scale_x = (float)image_rect.height() / bitmap_rect.height();
|
scale_x = (float)image_rect.height() / bitmap_rect.height();
|
||||||
scale_y = scale_x;
|
scale_y = scale_x;
|
||||||
bitmap_intersect.set_width(bitmap_rect.height() / image_aspect_ratio);
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case CSS::ObjectFit::ScaleDown:
|
case CSS::ObjectFit::ScaleDown:
|
||||||
|
|
@ -121,7 +118,6 @@ void ImagePaintable::paint(PaintContext& context, PaintPhase phase) const
|
||||||
case CSS::ObjectFit::None:
|
case CSS::ObjectFit::None:
|
||||||
scale_x = 1;
|
scale_x = 1;
|
||||||
scale_y = 1;
|
scale_y = 1;
|
||||||
bitmap_intersect.set_size(image_rect.size().to_type<int>());
|
|
||||||
}
|
}
|
||||||
|
|
||||||
auto scaled_bitmap_width = CSSPixels::nearest_value_for(bitmap_rect.width() * scale_x);
|
auto scaled_bitmap_width = CSSPixels::nearest_value_for(bitmap_rect.width() * scale_x);
|
||||||
|
|
@ -130,31 +126,22 @@ void ImagePaintable::paint(PaintContext& context, PaintPhase phase) const
|
||||||
auto residual_horizontal = image_rect.width() - scaled_bitmap_width;
|
auto residual_horizontal = image_rect.width() - scaled_bitmap_width;
|
||||||
auto residual_vertical = image_rect.height() - scaled_bitmap_height;
|
auto residual_vertical = image_rect.height() - scaled_bitmap_height;
|
||||||
|
|
||||||
bitmap_intersect.set_x((bitmap_rect.width() - bitmap_intersect.width()) / 2);
|
|
||||||
bitmap_intersect.set_y((bitmap_rect.height() - bitmap_intersect.height()) / 2);
|
|
||||||
|
|
||||||
// https://drafts.csswg.org/css-images/#the-object-position
|
// https://drafts.csswg.org/css-images/#the-object-position
|
||||||
auto const& object_position = computed_values().object_position();
|
auto const& object_position = computed_values().object_position();
|
||||||
|
|
||||||
auto offset_x = CSSPixels::from_raw(0);
|
auto offset_x = CSSPixels::from_raw(0);
|
||||||
if (object_position.edge_x == CSS::PositionEdge::Left) {
|
if (object_position.edge_x == CSS::PositionEdge::Left) {
|
||||||
offset_x = object_position.offset_x.to_px(layout_node(), residual_horizontal);
|
offset_x = object_position.offset_x.to_px(layout_node(), residual_horizontal);
|
||||||
bitmap_intersect.set_x(0);
|
|
||||||
} else if (object_position.edge_x == CSS::PositionEdge::Right) {
|
} else if (object_position.edge_x == CSS::PositionEdge::Right) {
|
||||||
offset_x = residual_horizontal - object_position.offset_x.to_px(layout_node(), residual_horizontal);
|
offset_x = residual_horizontal - object_position.offset_x.to_px(layout_node(), residual_horizontal);
|
||||||
}
|
}
|
||||||
if (image_rect.width() < scaled_bitmap_width)
|
|
||||||
bitmap_intersect.set_x(-(offset_x / scale_x));
|
|
||||||
|
|
||||||
auto offset_y = CSSPixels::from_raw(0);
|
auto offset_y = CSSPixels::from_raw(0);
|
||||||
if (object_position.edge_y == CSS::PositionEdge::Top) {
|
if (object_position.edge_y == CSS::PositionEdge::Top) {
|
||||||
offset_y = object_position.offset_y.to_px(layout_node(), residual_vertical);
|
offset_y = object_position.offset_y.to_px(layout_node(), residual_vertical);
|
||||||
bitmap_intersect.set_y(0);
|
|
||||||
} else if (object_position.edge_y == CSS::PositionEdge::Bottom) {
|
} else if (object_position.edge_y == CSS::PositionEdge::Bottom) {
|
||||||
offset_y = residual_vertical - object_position.offset_y.to_px(layout_node(), residual_vertical);
|
offset_y = residual_vertical - object_position.offset_y.to_px(layout_node(), residual_vertical);
|
||||||
}
|
}
|
||||||
if (image_rect.height() < scaled_bitmap_height)
|
|
||||||
bitmap_intersect.set_y(-(offset_y / scale_y));
|
|
||||||
|
|
||||||
Gfx::IntRect draw_rect = {
|
Gfx::IntRect draw_rect = {
|
||||||
image_int_rect_device_pixels.x() + context.rounded_device_pixels(offset_x).value(),
|
image_int_rect_device_pixels.x() + context.rounded_device_pixels(offset_x).value(),
|
||||||
|
|
@ -163,7 +150,7 @@ void ImagePaintable::paint(PaintContext& context, PaintPhase phase) const
|
||||||
context.rounded_device_pixels(scaled_bitmap_height).value()
|
context.rounded_device_pixels(scaled_bitmap_height).value()
|
||||||
};
|
};
|
||||||
|
|
||||||
context.display_list_recorder().draw_scaled_immutable_bitmap(draw_rect.intersected(image_int_rect_device_pixels), *bitmap, bitmap_rect.intersected(bitmap_intersect), scaling_mode);
|
context.display_list_recorder().draw_scaled_immutable_bitmap(draw_rect, image_int_rect_device_pixels, *bitmap, scaling_mode);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -130,7 +130,8 @@ void VideoPaintable::paint(PaintContext& context, PaintPhase phase) const
|
||||||
|
|
||||||
auto paint_frame = [&](auto const& frame) {
|
auto paint_frame = [&](auto const& frame) {
|
||||||
auto scaling_mode = to_gfx_scaling_mode(computed_values().image_rendering(), frame->rect(), video_rect.to_type<int>());
|
auto scaling_mode = to_gfx_scaling_mode(computed_values().image_rendering(), frame->rect(), video_rect.to_type<int>());
|
||||||
context.display_list_recorder().draw_scaled_immutable_bitmap(video_rect.to_type<int>(), Gfx::ImmutableBitmap::create(*frame), frame->rect(), scaling_mode);
|
auto dst_rect = video_rect.to_type<int>();
|
||||||
|
context.display_list_recorder().draw_scaled_immutable_bitmap(dst_rect, dst_rect, Gfx::ImmutableBitmap::create(*frame), scaling_mode);
|
||||||
};
|
};
|
||||||
|
|
||||||
auto paint_transparent_black = [&]() {
|
auto paint_transparent_black = [&]() {
|
||||||
|
|
|
||||||
|
|
@ -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 |
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!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' 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-contain-png-001-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
img {
|
||||||
|
border: 1px dashed gray;
|
||||||
|
padding: 1px;
|
||||||
|
object-fit: contain;
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!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' 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-contain-png-002-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
img {
|
||||||
|
border: 1px dashed gray;
|
||||||
|
padding: 1px;
|
||||||
|
object-fit: contain;
|
||||||
|
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-8x16.png" class="bigWide tr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide br">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide">
|
||||||
|
<br>
|
||||||
|
<!-- big/tall: -->
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall br">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall">
|
||||||
|
<br>
|
||||||
|
<!-- small: -->
|
||||||
|
<img src="support/colors-8x16.png" class="small tr">
|
||||||
|
<img src="support/colors-8x16.png" class="small bl">
|
||||||
|
<img src="support/colors-8x16.png" class="small tl">
|
||||||
|
<img src="support/colors-8x16.png" class="small br">
|
||||||
|
<img src="support/colors-8x16.png" class="small tc">
|
||||||
|
<img src="support/colors-8x16.png" class="small cr">
|
||||||
|
<img src="support/colors-8x16.png" class="small">
|
||||||
|
<br>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!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: cover' 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-cover-png-001-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
img {
|
||||||
|
border: 1px dashed gray;
|
||||||
|
padding: 1px;
|
||||||
|
object-fit: cover;
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!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: cover' 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-cover-png-002-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
img {
|
||||||
|
border: 1px dashed gray;
|
||||||
|
padding: 1px;
|
||||||
|
object-fit: cover;
|
||||||
|
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-8x16.png" class="bigWide tr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide br">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide">
|
||||||
|
<br>
|
||||||
|
<!-- big/tall: -->
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall br">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall">
|
||||||
|
<br>
|
||||||
|
<!-- small: -->
|
||||||
|
<img src="support/colors-8x16.png" class="small tr">
|
||||||
|
<img src="support/colors-8x16.png" class="small bl">
|
||||||
|
<img src="support/colors-8x16.png" class="small tl">
|
||||||
|
<img src="support/colors-8x16.png" class="small br">
|
||||||
|
<img src="support/colors-8x16.png" class="small tc">
|
||||||
|
<img src="support/colors-8x16.png" class="small cr">
|
||||||
|
<img src="support/colors-8x16.png" class="small">
|
||||||
|
<br>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!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-002-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-8x16.png" class="bigWide tr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide br">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide">
|
||||||
|
<br>
|
||||||
|
<!-- big/tall: -->
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall br">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall">
|
||||||
|
<br>
|
||||||
|
<!-- small: -->
|
||||||
|
<img src="support/colors-8x16.png" class="small tr">
|
||||||
|
<img src="support/colors-8x16.png" class="small bl">
|
||||||
|
<img src="support/colors-8x16.png" class="small tl">
|
||||||
|
<img src="support/colors-8x16.png" class="small br">
|
||||||
|
<img src="support/colors-8x16.png" class="small tc">
|
||||||
|
<img src="support/colors-8x16.png" class="small cr">
|
||||||
|
<img src="support/colors-8x16.png" class="small">
|
||||||
|
<br>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!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: none' 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-none-png-001-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
img {
|
||||||
|
border: 1px dashed gray;
|
||||||
|
padding: 1px;
|
||||||
|
object-fit: none;
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!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: none' 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-none-png-002-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
img {
|
||||||
|
border: 1px dashed gray;
|
||||||
|
padding: 1px;
|
||||||
|
object-fit: none;
|
||||||
|
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-8x16.png" class="bigWide tr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide br">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide">
|
||||||
|
<br>
|
||||||
|
<!-- big/tall: -->
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall br">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall">
|
||||||
|
<br>
|
||||||
|
<!-- small: -->
|
||||||
|
<img src="support/colors-8x16.png" class="small tr">
|
||||||
|
<img src="support/colors-8x16.png" class="small bl">
|
||||||
|
<img src="support/colors-8x16.png" class="small tl">
|
||||||
|
<img src="support/colors-8x16.png" class="small br">
|
||||||
|
<img src="support/colors-8x16.png" class="small tc">
|
||||||
|
<img src="support/colors-8x16.png" class="small cr">
|
||||||
|
<img src="support/colors-8x16.png" class="small">
|
||||||
|
<br>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!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: scale-down' 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-scale-down-png-001-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
img {
|
||||||
|
border: 1px dashed gray;
|
||||||
|
padding: 1px;
|
||||||
|
object-fit: scale-down;
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!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: scale-down' 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-scale-down-png-002-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
img {
|
||||||
|
border: 1px dashed gray;
|
||||||
|
padding: 1px;
|
||||||
|
object-fit: scale-down;
|
||||||
|
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-8x16.png" class="bigWide tr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide br">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigWide">
|
||||||
|
<br>
|
||||||
|
<!-- big/tall: -->
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall br">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||||
|
<img src="support/colors-8x16.png" class="bigTall">
|
||||||
|
<br>
|
||||||
|
<!-- small: -->
|
||||||
|
<img src="support/colors-8x16.png" class="small tr">
|
||||||
|
<img src="support/colors-8x16.png" class="small bl">
|
||||||
|
<img src="support/colors-8x16.png" class="small tl">
|
||||||
|
<img src="support/colors-8x16.png" class="small br">
|
||||||
|
<img src="support/colors-8x16.png" class="small tc">
|
||||||
|
<img src="support/colors-8x16.png" class="small cr">
|
||||||
|
<img src="support/colors-8x16.png" class="small">
|
||||||
|
<br>
|
||||||
|
</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 Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</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-position-png-001-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
img {
|
||||||
|
background: lightgray;
|
||||||
|
margin-right: 2px;
|
||||||
|
object-fit: contain;
|
||||||
|
float: left;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.op_y-7 { object-position: 50% -7% }
|
||||||
|
.op_y13 { object-position: 50% 13% }
|
||||||
|
.op_y23 { object-position: 50% 23% }
|
||||||
|
.op_y50 { object-position: 50% 50% }
|
||||||
|
.op_y75 { object-position: 50% 75% }
|
||||||
|
.op_y88 { object-position: 50% 88% }
|
||||||
|
.op_y111 { object-position: 50% 111% }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<img src="support/colors-16x8.png" class="op_y-7">
|
||||||
|
<img src="support/colors-16x8.png" class="op_y13">
|
||||||
|
<img src="support/colors-16x8.png" class="op_y23">
|
||||||
|
<img src="support/colors-16x8.png" class="op_y50">
|
||||||
|
<img src="support/colors-16x8.png" class="op_y75">
|
||||||
|
<img src="support/colors-16x8.png" class="op_y88">
|
||||||
|
<img src="support/colors-16x8.png" class="op_y111">
|
||||||
|
</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 Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</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-position-png-002-ref.html">
|
||||||
|
<style type="text/css">
|
||||||
|
img {
|
||||||
|
background: lightgray;
|
||||||
|
margin-right: 2px;
|
||||||
|
object-fit: contain;
|
||||||
|
float: left;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.op_x-7 { object-position: -7% 50% }
|
||||||
|
.op_x13 { object-position: 13% 50% }
|
||||||
|
.op_x23 { object-position: 23% 50% }
|
||||||
|
.op_x50 { object-position: 50% 50% }
|
||||||
|
.op_x75 { object-position: 75% 50% }
|
||||||
|
.op_x88 { object-position: 88% 50% }
|
||||||
|
.op_x111 { object-position: 111% 50% }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<img src="support/colors-8x16.png" class="op_x-7">
|
||||||
|
<img src="support/colors-8x16.png" class="op_x13">
|
||||||
|
<img src="support/colors-8x16.png" class="op_x23">
|
||||||
|
<img src="support/colors-8x16.png" class="op_x50">
|
||||||
|
<img src="support/colors-8x16.png" class="op_x75">
|
||||||
|
<img src="support/colors-8x16.png" class="op_x88">
|
||||||
|
<img src="support/colors-8x16.png" class="op_x111">
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 93 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
Before Width: | Height: | Size: 534 KiB After Width: | Height: | Size: 590 KiB |
Loading…
Add table
Reference in a new issue