Merge pull request w3c#994 from mounirlamouri/colorpixeldepth

[cssom-view] Return real values for colorDepth and pixelDepth (closes w3c#993)

Author: dbaron

cssom-view/Overview.bs

@@ -81,6 +81,7 @@ urlPrefix: http://heycam.github.io/webidl/
         text: long
     type: dfn; text: converted to an IDL value; url: dfn-convert-ecmascript-to-idl-value
 url: https://www.w3.org/TR/DOM-Level-3-Events/#interface-MouseEvent; type: interface; text: MouseEvent
+url: https://drafts.csswg.org/mediaqueries-4/#mf-colors; type: dfn; text: color media query
 </pre>
 
 <pre class='link-defaults'>
@@ -896,13 +897,38 @@ screen area</a>. <!--fingerprint-->
 The <dfn attribute for=Screen>height</dfn> attribute must return the height of the <a>Web-exposed
 screen area</a>. <!--fingerprint-->
 
-The <dfn attribute for=Screen>colorDepth</dfn> attribute must return 24.
-
-The <dfn attribute for=Screen>pixelDepth</dfn> attribute must return 24.
-
-Note: The {{colorDepth}} and {{pixelDepth}} attributes are useless but are
-included for compatibility.
+The <dfn attribute for=Screen>colorDepth</dfn> and <dfn attribute
+for=Screen>pixelDepth</dfn> attributes should return the number of bits
+allocated to colors for a pixel in the output device, excluding the alpha
+channel. If the user agent is not able to return the number of bits used by the
+output device, it should return the closest estimation such as, for example, the
+number of bits used by the frame buffer sent to the display or any internal
+representation that would be the closest to the value the output device would
+use. The user agent must return a value for these attributes at least equal to
+the value of <a>color media query</a> multiplied by three. If the different
+color components are not represented with the same number of bits, the returned
+value may be greater than three times <a>color media query</a>. If the user
+agent does not know the color depth or does not want to return it for privacy
+considerations, it should return 24.
+
+Note: The {{colorDepth}} and {{pixelDepth}} attributes return the same value for
+compatibility reasons.
+
+Note: Some non-conforming implementations are known to return 32 instead of 24.
 
+<div class='example'>
+  <code>colorDepth</code> can be used in the context of selecting SDR/HDR in
+  addition with other information. For example, combined with color gamut.
+
+  <pre class='lang-javascript'>
+  if (screen.colorDepth >= 48   && window.matchMedia('(color-gamut: p3)').matches &&
+      /* other checks */) {
+    // Use HDR content.
+  } else {
+    // Use SDR content.
+  }
+  </pre>
+</div>
 
 Extensions to the {{Document}} Interface {#extensions-to-the-document-interface}
 ================================================================================