Bug 1680387 - Fix interaction with src-set() / image-set(), and enable the feature by default. r=tnikkel

As discussed here: https://github.com/whatwg/html/pull/5574#issuecomment-826347560

This matches other browsers.

Depends on D113265

Differential Revision: https://phabricator.services.mozilla.com/D113267
This commit is contained in:
Emilio Cobos Álvarez 2021-05-05 09:41:24 +00:00
parent 1cdf344860
commit 68a7c365ec
11 changed files with 82 additions and 21 deletions

View File

@ -732,7 +732,7 @@ nsIntSize HTMLImageElement::NaturalSize() {
if (mResponsiveSelector) { if (mResponsiveSelector) {
float density = mResponsiveSelector->GetSelectedImageDensity(); float density = mResponsiveSelector->GetSelectedImageDensity();
MOZ_ASSERT(density >= 0.0); MOZ_ASSERT(density >= 0.0);
resolution = {density, density}; resolution.ScaleBy(density);
} }
resolution.ApplyTo(size.width, size.height); resolution.ApplyTo(size.width, size.height);

View File

@ -30,6 +30,13 @@ struct Resolution {
float mX = 1.0f; float mX = 1.0f;
float mY = 1.0f; float mY = 1.0f;
void ScaleBy(float aScale) {
if (MOZ_LIKELY(aScale != 0.0f)) {
mX *= aScale;
mY *= aScale;
}
}
void ApplyXTo(int32_t& aWidth) const { void ApplyXTo(int32_t& aWidth) const {
if (mX != 1.0f) { if (mX != 1.0f) {
aWidth = std::round(float(aWidth) / mX); aWidth = std::round(float(aWidth) / mX);

View File

@ -479,15 +479,13 @@ static void ScaleIntrinsicSizeForDensity(IntrinsicSize& aSize,
static void ScaleIntrinsicSizeForDensity(imgIContainer* aImage, static void ScaleIntrinsicSizeForDensity(imgIContainer* aImage,
nsIContent& aContent, nsIContent& aContent,
IntrinsicSize& aSize) { IntrinsicSize& aSize) {
ImageResolution resolution = aImage->GetResolution();
if (auto* image = HTMLImageElement::FromNode(aContent)) { if (auto* image = HTMLImageElement::FromNode(aContent)) {
if (auto* selector = image->GetResponsiveImageSelector()) { if (auto* selector = image->GetResponsiveImageSelector()) {
float density = selector->GetSelectedImageDensity(); resolution.ScaleBy(selector->GetSelectedImageDensity());
MOZ_ASSERT(density >= 0.0);
ScaleIntrinsicSizeForDensity(aSize, ImageResolution{density, density});
return;
} }
} }
ScaleIntrinsicSizeForDensity(aSize, aImage->GetResolution()); ScaleIntrinsicSizeForDensity(aSize, resolution);
} }
static IntrinsicSize ComputeIntrinsicSize(imgIContainer* aImage, static IntrinsicSize ComputeIntrinsicSize(imgIContainer* aImage,

View File

@ -1631,20 +1631,20 @@ void StyleImage::ResolveImage(Document& aDoc, const StyleImage* aOld) {
template <> template <>
ImageResolution StyleImage::GetResolution() const { ImageResolution StyleImage::GetResolution() const {
if (IsImageSet()) { ImageResolution resolution;
auto& set = AsImageSet(); if (imgRequestProxy* request = GetImageRequest()) {
float r = set->items.AsSpan()[set->selected_index].resolution._0;
if (MOZ_LIKELY(r != 0.0f)) {
return ImageResolution(r, r);
}
} else if (imgRequestProxy* request = GetImageRequest()) {
RefPtr<imgIContainer> image; RefPtr<imgIContainer> image;
request->GetImage(getter_AddRefs(image)); request->GetImage(getter_AddRefs(image));
if (image) { if (image) {
return image->GetResolution(); resolution = image->GetResolution();
} }
} }
return {}; if (IsImageSet()) {
auto& set = AsImageSet();
float r = set->items.AsSpan()[set->selected_index].resolution._0;
resolution.ScaleBy(r);
}
return resolution;
} }
template <> template <>

View File

@ -5308,14 +5308,9 @@
mirror: always mirror: always
# Whether we use EXIF metadata for image density. # Whether we use EXIF metadata for image density.
#
# NOTE: Before shipping this, make sure that the issue described in the
# following comment is addressed:
#
# https://github.com/whatwg/html/pull/5574#issuecomment-826335244
- name: image.exif-density-correction.enabled - name: image.exif-density-correction.enabled
type: RelaxedAtomicBool type: RelaxedAtomicBool
value: @IS_NIGHTLY_BUILD@ value: true
mirror: always mirror: always
# The threshold for inferring that changes to an <img> element's |src| # The threshold for inferring that changes to an <img> element's |src|

View File

@ -0,0 +1,11 @@
<!doctype html>
<style>
body { margin: 0 }
div {
width: 100vw;
height: 100vh;
background-image: url(resources/exif-resolution-valid-hires.jpg);
background-repeat: no-repeat;
}
</style>
<div></div>

View File

@ -0,0 +1,15 @@
<!doctype html>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="match" href="image-set-001-ref.html">
<style>
body { margin: 0 }
div {
width: 100vw;
height: 100vh;
background-image: -webkit-image-set(url(resources/exif-resolution-valid-hires.jpg) 1x);
background-image: image-set(url(resources/exif-resolution-valid-hires.jpg) 1x);
background-repeat: no-repeat;
}
</style>
<div></div>

View File

@ -0,0 +1,11 @@
<!doctype html>
<style>
body { margin: 0 }
div {
width: 100vw;
height: 100vh;
background-image: url(resources/exif-resolution-none.jpg);
background-repeat: no-repeat;
}
</style>
<div></div>

View File

@ -0,0 +1,15 @@
<!doctype html>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="match" href="image-set-002-ref.html">
<style>
body { margin: 0 }
div {
width: 100vw;
height: 100vh;
background-image: -webkit-image-set(url(resources/exif-resolution-valid-hires.jpg) 0.5x);
background-image: image-set(url(resources/exif-resolution-valid-hires.jpg) 0.5x);
background-repeat: no-repeat;
}
</style>
<div></div>

View File

@ -0,0 +1,3 @@
<!doctype html>
<img src="resources/exif-resolution-valid-hires.jpg">
<img src="resources/exif-resolution-none.jpg">

View File

@ -0,0 +1,6 @@
<!doctype html>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="match" href="srcset-ref.html">
<img srcset="resources/exif-resolution-valid-hires.jpg 1x">
<img srcset="resources/exif-resolution-valid-hires.jpg 0.5x">