mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-25 14:05:15 +00:00
Revert "LibWeb: Do not deform bitmaps partially outside the img-box"
This change broken image rendering.
This reverts commit e055927ead.
This commit is contained in:
Aliaksandr Kalenik
Alexander Kalenik
parent
fe26c3145d
commit
16b14273d1
Notes:
github-actions[bot]
2025-03-05 18:45:42 +00:00
Author: https://github.com/kalenikaliaksandr Commit: https://github.com/LadybirdBrowser/ladybird/commit/16b14273d18 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3819
36 changed files with 22 additions and 1752 deletions
|
|
@ -149,8 +149,7 @@ 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>());
|
||||||
auto dest_int_rect = dest_rect.to_type<int>();
|
context.display_list_recorder().draw_scaled_immutable_bitmap(dest_rect.to_type<int>(), *b, b->rect(), scaling_mode);
|
||||||
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,14 +135,11 @@ 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.save();
|
canvas.drawImageRect(command.bitmap->sk_image(), src_rect, dst_rect, to_skia_sampling_options(command.scaling_mode), &paint, SkCanvas::kStrict_SrcRectConstraint);
|
||||||
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::IntRect const& clip_rect, Gfx::ImmutableBitmap const& bitmap, Gfx::ScalingMode scaling_mode)
|
void DisplayListRecorder::draw_scaled_immutable_bitmap(Gfx::IntRect const& dst_rect, Gfx::ImmutableBitmap const& bitmap, Gfx::IntRect const& src_rect, 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::IntRect const& clip_rect, Gfx::ImmutableBitmap const& bitmap, 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_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,6 +79,7 @@ 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();
|
||||||
|
|
@ -108,9 +109,11 @@ 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:
|
||||||
|
|
@ -118,6 +121,7 @@ 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);
|
||||||
|
|
@ -126,22 +130,31 @@ 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(),
|
||||||
|
|
@ -150,7 +163,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, image_int_rect_device_pixels, *bitmap, scaling_mode);
|
context.display_list_recorder().draw_scaled_immutable_bitmap(draw_rect.intersected(image_int_rect_device_pixels), *bitmap, bitmap_rect.intersected(bitmap_intersect), scaling_mode);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -130,8 +130,7 @@ 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>());
|
||||||
auto dst_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);
|
||||||
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 = [&]() {
|
||||||
|
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<!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.
|
Before Width: | Height: | Size: 93 B |
Binary file not shown.
|
Before Width: | Height: | Size: 92 B |
|
|
@ -1,77 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<!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.
|
Before Width: | Height: | Size: 93 B |
Binary file not shown.
|
Before Width: | Height: | Size: 92 B |
Binary file not shown.
|
Before Width: | Height: | Size: 590 KiB After Width: | Height: | Size: 534 KiB |
Loading…
Add table
Reference in a new issue