Skip to content

GitLab

T
tangled
Commit dcec81e1 authored by Stephen Chenney's avatar Stephen Chenney Committed by Commit Bot
Browse files
Options

Make background-size: cover and contain really cover 

With background-repeat: no-repeat and background-size: cover, the
computations for dest rect for the no-repeat case use the tile size
to set the dest rect. This prevents tiled drawing from painting more
than one tile. But the background-size computations for cover and
contain use an unsnapped position area to set the tile size, which
produces an unsnapped tile size. This unsnapped tile size, when set as
the dest rect for painting, results in a tile that doesn't fill the
background as one would expect for cover or contain.

This patch switches to always computing the cover and contain tile
sizes using a snapped position area to give a snapped dest rect.

R: fs@opera.com, fmalita@chromium.org
Bug: 785171
Change-Id: I38343ac09d689e9d1360e7043b2ef49adeadb983
Reviewed-on: https://chromium-review.googlesource.com/c/1394014
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Reviewed-by: default avatarFlorin Malita <fmalita@chromium.org>
Cr-Commit-Position: refs/heads/master@{#619962}
parent fbafdddd
Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 6 deletions
third_party/blink/renderer/core/paint/background_image_geometry.cc
View file @ dcec81e1
......@@ -796,14 +796,17 @@ void BackgroundImageGeometry::CalculateFillTileSize(
}
case EFillSizeType::kContain:
case EFillSizeType::kCover: {
// Always use the snapped positioning area size for this computation,
// so that we resize the image to completely fill the actual painted
// area.
float horizontal_scale_factor =
image_intrinsic_size.Width()
? positioning_area_size.Width().ToFloat() /
? snapped_positioning_area_size.Width().ToFloat() /
image_intrinsic_size.Width()
: 1.0f;
float vertical_scale_factor =
image_intrinsic_size.Height()
? positioning_area_size.Height().ToFloat() /
? snapped_positioning_area_size.Height().ToFloat() /
image_intrinsic_size.Height()
: 1.0f;
// Force the dimension that determines the size to exactly match the
......@@ -815,27 +818,27 @@ void BackgroundImageGeometry::CalculateFillTileSize(
// at the edge of the image when we paint it.
if (horizontal_scale_factor < vertical_scale_factor) {
tile_size_ = LayoutSize(
positioning_area_size.Width(),
snapped_positioning_area_size.Width(),
LayoutUnit(std::max(1.0f, roundf(image_intrinsic_size.Height() *
horizontal_scale_factor))));
} else {
tile_size_ = LayoutSize(
LayoutUnit(std::max(1.0f, roundf(image_intrinsic_size.Width() *
vertical_scale_factor))),
positioning_area_size.Height());
snapped_positioning_area_size.Height());
}
return;
}
if (horizontal_scale_factor > vertical_scale_factor) {
tile_size_ =
LayoutSize(positioning_area_size.Width(),
LayoutSize(snapped_positioning_area_size.Width(),
LayoutUnit(std::max(1.0f, image_intrinsic_size.Height() *
horizontal_scale_factor)));
} else {
tile_size_ =
LayoutSize(LayoutUnit(std::max(1.0f, image_intrinsic_size.Width() *
vertical_scale_factor)),
positioning_area_size.Height());
snapped_positioning_area_size.Height());
}
return;
}
......
third_party/blink/web_tests/external/wpt/css/css-backgrounds/background-image-cover-zoomed-1.html 0 → 100644
View file @ dcec81e1
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Test: background-size:cover should cover at zoom</title>
<link rel="author" title="schenney" href="mailto:schenney@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css3-background">
<link rel="match" href="reference/background-image-cover-zoomed-1-ref.html">
<style>
body {
zoom: 80%;
}
body > div {
background: #f00;
width: 504px;
height: 252px;
}
div > div {
width: 504px;
height: 252px;
background-image: url(support/40px-wide-20px-tall-green-rect.png);
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<div>
</div>
</div>
</body>
</html>
third_party/blink/web_tests/external/wpt/css/css-backgrounds/reference/background-image-cover-zoomed-1-ref.html 0 → 100644
View file @ dcec81e1
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Test Reference</title>
<link rel="author" title="schenney" href="mailto:schenney@chromium.org">
<style>
body {
zoom: 80%;
}
body > div {
width: 504px;
height: 252px;
background-image: url(../support/40px-wide-20px-tall-green-rect.png);
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment