Bug 160166 – color-gamut media query returns incorrect results

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Craig Hockenberry]

On an iMac (Retina 5K, 27-inch, Late 2014) with the default profile of "iMac" selected in System Preferences > Display > Color, the following media query matches even though the color-gamut is not Display P3:

@media (-webkit-min-device-pixel-ratio: 2) and (color-gamut: p3), (min-resolution: 2dppx) and (color-gamut: p3) {
	section.background {
		background-image: url([e-mail]);
	}
}

Likewise, the first <source> in this <picture> container is selected:

<picture>
	<source media="(-webkit-min-device-pixel-ratio: 2) and (min-width: 600px), (min-resolution: 2dppx) and (min-width: 600px)" srcset="[e-mail]">
	<source media="(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)" srcset="[e-mail]">
	<source media="(min-width: 600px)" srcset="photo-p3.jpg">
	<img src="photo.jpg" srcset="[e-mail] 2x" alt="A photo that uses a media query to select a wider gamut image">
</picture>

Finally, the following JavaScript shows the "Your screen color-gamut is Display P3":

function testColorGamut(event) {
	if (window.matchMedia('(color-gamut: rec2020)').matches) {
		alert('Your screen color-gamut is Rec. 2020');
	}
	else if (window.matchMedia('(color-gamut: p3)').matches) {
		alert('Your screen color-gamut is Display P3');
	}
	else if (window.matchMedia('(color-gamut: srgb)').matches) {
		alert('Your screen color-gamut is sRGB');
	}
	else {
		alert('The color gamut could not be determined');
	}
}

The following page demonstrates this issue:

	http://furbo.org/color/ResponsiveColor/

[Craig Hockenberry]

Build is Release 9 (Safari 9.1.2, WebKit 11602.1.41)

[Craig Hockenberry]

The media query appears to be working correctly on iOS 10. My iPad mini matches the color-gamut: srgb, while the iPad Pro 9.7 matches p3.

I haven't done extensive testing, but perhaps this problem is limited to the desktop browser.

[Dean Jackson]

It should work on macOS, so this is a bug.

[Radar WebKit Bug Importer]

<rdar://problem/27537577>

[Dean Jackson]

Created attachment 284840 [details]
Patch

[Darin Adler]

Comment on attachment 284840 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=284840&action=review

> Source/WebCore/ChangeLog:11
> +        to a customized color space collaboration on an external

calibration, you mean?

[Dean Jackson]

Comment on attachment 284840 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=284840&action=review

>> Source/WebCore/ChangeLog:11
>> +        to a customized color space collaboration on an external
> 
> calibration, you mean?

Yes! Thanks.

[Dean Jackson]

Committed r203903: <http://trac.webkit.org/changeset/203903>