| Summary: | color-gamut media query returns incorrect results | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Craig Hockenberry <craig.hockenberry> | ||||
| Component: | CSS | Assignee: | Dean Jackson <dino> | ||||
| Status: | RESOLVED FIXED | ||||||
| Severity: | Major | CC: | dino, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari Technology Preview | ||||||
| Hardware: | Mac | ||||||
| OS: | OS X 10.11 | ||||||
| Attachments: |
|
||||||
Build is Release 9 (Safari 9.1.2, WebKit 11602.1.41) 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. It should work on macOS, so this is a bug. Created attachment 284840 [details]
Patch
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 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. Committed r203903: <http://trac.webkit.org/changeset/203903> |
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/