Bug 160166 - color-gamut media query returns incorrect results
Summary: color-gamut media query returns incorrect results
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac OS X 10.11
: P2 Major
Assignee: Dean Jackson
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-07-25 09:37 PDT by Craig Hockenberry
Modified: 2016-07-29 10:41 PDT (History)
2 users (show)

See Also:


Attachments
Patch (2.16 KB, patch)
2016-07-28 17:01 PDT, Dean Jackson
darin: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Craig Hockenberry 2016-07-25 09:37:08 PDT
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(bkgd-p3@2x.png);
	}
}

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="photo-p3@2x.jpg">
	<source media="(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)" srcset="photo@2x.jpg">
	<source media="(min-width: 600px)" srcset="photo-p3.jpg">
	<img src="photo.jpg" srcset="photo@2x.jpg 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/
Comment 1 Craig Hockenberry 2016-07-25 09:44:14 PDT
Build is Release 9 (Safari 9.1.2, WebKit 11602.1.41)
Comment 2 Craig Hockenberry 2016-07-25 15:16:22 PDT
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.
Comment 3 Dean Jackson 2016-07-25 18:15:49 PDT
It should work on macOS, so this is a bug.
Comment 4 Radar WebKit Bug Importer 2016-07-25 18:16:18 PDT
<rdar://problem/27537577>
Comment 5 Dean Jackson 2016-07-28 17:01:28 PDT
Created attachment 284840 [details]
Patch
Comment 6 Darin Adler 2016-07-28 19:24:15 PDT
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?
Comment 7 Dean Jackson 2016-07-29 10:38:51 PDT
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.
Comment 8 Dean Jackson 2016-07-29 10:41:33 PDT
Committed r203903: <http://trac.webkit.org/changeset/203903>