[mediaqueries] Add the 'inverted-colors' media feature

Author: frivoal

mediaqueries/Overview.bs

@@ -5,7 +5,6 @@ Group: csswg
 Shortname: mediaqueries
 Level: 4
 Status: ED
-Date: 2014-09-12
 ED: http://dev.w3.org/csswg/mediaqueries4/
 TR: http://www.w3.org/TR/mediaqueries-4/
 Editor: Florian Rivoal, Invited Expert, florian@rivoal.net
@@ -1375,6 +1374,49 @@ monochrome</h3>
 		</pre>
 	</div>
 
+<h3 id="inverted">
+inverted-colors</h3>
+
+	<pre class='descdef mq'>
+	Name: inverted-colors
+	Value: none | inverted
+	For: @media
+	Type: discrete
+	</pre>
+
+	The 'inverted-colors' media feature indicates whether the content is displayed normally, or whether colors have been inverted.
+
+	<p class="note">This is an indication that the user agent or underlying
+	operating system has forcibly inverted all colors, not a request to do so. This
+	is sometimes provided as a simple accessibility feature, allowing users to
+	switch between light-on-dark and dark-on-light text. However, this has
+	unpleasant side effects, such as inverting pictures, or turning shadows into
+	highlights, which reduce the readability of the content.
+
+	<dl dfn-type=value dfn-for="@media/inverted-colors">
+		<dt><dfn>none</dfn>
+		<dd>
+			Colors are displayed normally.
+
+		<dt><dfn>inverted</dfn>
+		<dd>
+			All pixels within the displayed area have been inverted.
+
+	</dl>
+
+	<div class="example">
+		For example, a user frequently using his operating system's
+		ability to invert the screens color may want to add the following to his user
+		style sheet, to limit the undesirable side effects of the inversion.
+
+		<pre>@media (inverted-colors) {
+			img { filter: invert(100%); }
+			* { text-shadow: none; background-shadow: none; }
+		}
+		</pre>
+	</div>
+
+
 <!--
 ████ ██    ██ ████████ ████████ ████████     ███     ██████  ████████ ████  ███████  ██    ██
  ██  ███   ██    ██    ██       ██     ██   ██ ██   ██    ██    ██     ██  ██     ██ ███   ██
@@ -1643,8 +1685,6 @@ light-level</h3>
 		Using this media feature for accessibility purposes overlaps a lot with <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx">the high-contrast media feature proposed by Microsoft</a>.
 		Can we adjust this so that it covers all use cases for both,
 		or somehow modify them to work in an orthogonal, rather than overlapping, fashion?
-		Also, the high-contrast media feature could be extended to also cover inverted colors,
-		as discussed in http://lists.w3.org/Archives/Public/www-style/2013Oct/0672.html
 
 	<div class="example">
 		<pre>