[css-pseudo] Add ::spelling-error and ::grammar-error. Specify that highlighted text decorations are colored. Add example of nested element styling. Add more headings. Fix links.

Author: fantasai

css-pseudo/Overview.bs

@@ -12,7 +12,8 @@ Editor: Daniel Glazman, Disruptive Innovations
 Editor: fantasai, Invited Expert, http://fantasai.inkedblade.net/contact
 Editor: Alan Stearns, Adobe Systems Inc., stearns@adobe.com
 Abstract: This CSS module defines pseudo-elements, abstract elements that represent portions of the CSS render tree that can be selected and styled.
-Ignored Terms: typographic letter unit, Unicode general category, initial-letter
+Ignored Terms: initial-letter
+Link Defaults: css-color-3 (property) color
 </pre>
 
 <h2 id="intro">Introduction</h2>
@@ -318,7 +319,7 @@ Finding the First Letter</h4>
 Styling the ''::first-letter'' Pseudo-element</h4>
 
   In CSS a ::first-letter pseudo-element is similar to an inline-level element
-  if its 'float' property is ''none'';
+  if its 'float' property is ''float/none'';
   otherwise, it is similar to a floated element.
   The following properties that apply to ''::first-letter'' pseudo-elements:
 
@@ -416,64 +417,38 @@ Styling the ''::first-letter'' Pseudo-element</h4>
   </div>
 
 <h2 id="highlight-pseudos">
-Highlight Range Pseudo-element: ''::selection''</h2>
+Styling Highlights: the ''::selection'', ''::spelling-error'', and ''::grammar-error'' pseudo-elements</h2>
 
-  The <dfn>::selection</dfn> pseudo-element represents
-  the portion of a document that has been highlighted by the user.
-  This also applies, for example, to selected text within an editable text field.
+  The <dfn>highlight pseudo-elements</dfn>
+  represent portions of a document that have been highlighted in some way.
 
-  Issue: We want to add other types of selections, such as spelling-error highlights.
-
-  Issue: Active vs. inactive selections are often styled differently. Currently no way to distinguish.
-
-  <p>The <dfn>root highlight</dfn> is a multi-piece overlay
-  over the entire tree,
-  portions of which are selected and correspond to the ''::selection'' pseudo-element.
-  Each box owns the piece of of the overlay corresponding to any text or replaced content
-  directly contained by the box.
-  For text, the corresponding overlay must cover at least the entire em box
-  and may extend further above/below the em box to the line box edges.
-  Spacing between two characters may also be part of the overlay,
-  in which case it belongs to the innermost element that contains both characters
-  and is selected when both characters are selected
-  For replaced content, the associated overlay must cover at least the entire replaced object,
-  and may extend outward to include the element's entire content box.
-  The overlay may also include other other areas within the border-box of an element;
-  in this case, those areas belong to the innermost such element that contains the area.
-
-  Issue: See
-  <a href="http://lists.w3.org/Archives/Public/www-style/2008Nov/0022.html">F2F minutes</a>,
-  <a href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">dbaron's message</a>,
-  <a href="http://lists.w3.org/Archives/Public/www-style/2010May/0247.html">Daniel's thread</a>,
-  <a href="http://lists.w3.org/Archives/Public/www-style/2010May/0261.html">Gecko notes</a>,
-  <a href="http://lists.w3.org/Archives/Public/www-style/2010May/0366.html">Opera notes</a>,
-  <a href="http://lists.w3.org/Archives/Public/www-style/2010May/0280.html">Webkit notes</a>
-
-  Each element draws its own portion of the highlighted overlay,
-  which receives the styles specified by the ''::selection'' pseudo-element styles
-  for which it or one of its ancestors is the <i>originating element</i>.
-  When multiple styles conflict,
-  the winning style is the one belonging to the innermost element
-  after cascading.
+  <dl export>
+    <dt><dfn>::selection</dfn>
+    <dd>
+      The <a>::selection</a> pseudo-element represents
+      the portion of a document that has been highlighted by the user.
+      This also applies, for example, to selected text within an editable text field.
+  
+      Issue: Active vs. inactive selections are often styled differently. Currently no way to distinguish.
 
-  Issue: This could alternately be described in terms of inheritance.
-  So, how do we want ''inherit'' to behave here?
-  Should it inherit from the parent ''::selection''
-  or the <i>originating element</i>?
-  Opera does the former, Gecko/Blink the latter.
+    <dt><dfn>::spelling-error</dfn>
+    <dd>
+      The <a>::spelling-error</a> pseudo-element represents
+      a portion of text that has been flagged by the user agent as misspelled.
+    
+    <dt><dfn>::grammar-error</dfn>
+    <dd>
+      The <a>::grammar-error</a> pseudo-element represents
+      a portion of text that has been flagged by the user agent as grammatically incorrect.
+  </dl>
 
-  <p class="advisement">
-  Authors wanting multiple selections styles should use
-  <strong>'':root::selection''</strong>
-  for their document-wide selection style,
-  since this will allow clean overriding in descendants.
-  (''::selection'' alone would apply to every element in the tree,
-  overriding the more specific styles of any ancestors.)
+  Note: A future level of CSS may introduce ways to create
+  custom highlight pseudo-elements.
 
 <h3 id="highlight-styling">
-Styling Highlighted Ranges</h3>
+Styling Highlighted Content</h3>
 
-  The following properties apply to ''::selection'' pseudo-elements:
+  The following properties apply to the <a>highlight pseudo-elements</a>:
 
   <ul>
     <li>'color'
@@ -494,10 +469,9 @@ Styling Highlighted Ranges</h3>
   If 'color' is not specified, the text (and text decoration)'s
   unselected color must be used for the highlight.
   (As usual, the initial 'background-color' is ''transparent''.)
-
   Issue: Can we reuse ''currentColor'' for this, now that it computes to itself?
 
-  The UA should use the OS-default selection color
+  The UA should use the OS-default highlight colors
   when neither 'color' nor 'background-color' has been specified by the author.
 
   Note: This paired-cascading behavior
@@ -506,6 +480,96 @@ Styling Highlighted Ranges</h3>
   However it has been interoperably implemented in browsers
   and is thus probably a Web-compatibility requirement.
 
+  The 'color' property specifies the color of both the text
+  and all line decorations (underline, overline, line-through)
+  applied to the text.
+  Note: Because 'text-emphasis-color' defaults to ''currrentColor'',
+  it will by default also set the color of the the emphasis marks.
+
+<h3 id=highlight-bounds>
+Area of the Highlight</h3>
+
+  <p>For each instance of highlighting
+  there exists a <dfn>root highlight overlay</dfn>
+  which is a tesselated overlay
+  over the entire tree,
+  the actively-highlighted portions of which are represented
+  by the corresponding <a>highlight pseudo-element</a>.
+  The ''::selection'' overlay is drawn
+  over the ''::spelling-error'' overlay
+  which is drawn over the ''::grammar-error'' overlay.
+
+
+  Each box owns a piece of the overlay corresponding to any text or replaced content
+  directly contained by the box.
+
+  <ul>
+    <li>
+      For text, the corresponding overlay must cover at least the entire em box
+      and may extend further above/below the em box to the line box edges.
+      Spacing between two characters may also be part of the overlay,
+      in which case it belongs to the innermost element that contains both characters
+      and is selected when both characters are selected.
+    <li>
+      For replaced content, the associated overlay must cover at least the entire replaced object,
+      and may extend outward to include the element's entire content box.
+    <li>
+      The overlay may also include other other areas within the border-box of an element;
+      in this case, those areas belong to the innermost such element that contains the area.
+  </ul>
+
+  Issue: See
+  <a href="http://lists.w3.org/Archives/Public/www-style/2008Nov/0022.html">F2F minutes</a>,
+  <a href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">dbaron's message</a>,
+  <a href="http://lists.w3.org/Archives/Public/www-style/2010May/0247.html">Daniel's thread</a>,
+  <a href="http://lists.w3.org/Archives/Public/www-style/2010May/0261.html">Gecko notes</a>,
+  <a href="http://lists.w3.org/Archives/Public/www-style/2010May/0366.html">Opera notes</a>,
+  <a href="http://lists.w3.org/Archives/Public/www-style/2010May/0280.html">Webkit notes</a>
+
+  Issue: Not sure if this is the correct way of describing the way things work.
+
+<h3 id=highlight-cascade>
+Cascading and Per-Element Highlight Styles</h3>
+
+  Each element draws its own portion of the <a>root highlight overlay</a>,
+  which receives the styles specified by the <a>highlight pseudo-element</a> styles
+  for which it or one of its ancestors is the <i>originating element</i>.
+  When multiple styles conflict,
+  the winning style is the one belonging to the innermost element
+  after cascading.
+
+  <div class="example">
+    For example, if the following rules were applied:
+    <pre>
+      p::selection { background: red; color: yellow; }
+      em::selection { background: green; }
+    </pre>
+    to the following markup:
+    <pre>
+      &lt;p>Highlight this <em>and this</em>.&lt;/p>
+    </pre>
+    The highlighted would be yellow throughout,
+    with a red background outside the <code>&lt;em></code> element
+    and a green background inside it.
+  </div>
+
+  Issue: This could alternately be described in terms of inheritance.
+  The observable differences would be in how ''inherit'' and ''unset'' behave.
+  Should it inherit from the parent ''::selection''
+  or the <i>originating element</i>?
+  Opera does the former, Gecko/Blink the latter.
+
+  <p class="advisement">
+  Authors wanting multiple selections styles should use
+  <strong>'':root::selection''</strong>
+  for their document-wide selection style,
+  since this will allow clean overriding in descendants.
+  (''::selection'' alone would apply to every element in the tree,
+  overriding the more specific styles of any ancestors.)
+
+<h3 id="highlight-painting">
+Painting the Highlight</h3>
+
   The ''::selection'' pseudo element draws its background
   over the selected portion of the element,
   immediately below any positioned descendants
@@ -533,10 +597,20 @@ Styling Highlighted Ranges</h3>
 
   Issue: This whole section needs vocabulary cleanup.
 
+<h3 id="highlight-security">
+Security Considerations</h3>
+
+  Because the styling of spelling and grammar errors
+  can leak information about the contents of a user's dictionary
+  (which can include the user's name and even includes the contents of his/her address book!)
+  UAs that implement ''::spelling-error'' and ''::grammar-error''
+  must prevent pages from being able to read
+  the styling of such highlighted segments. 
+
 <h2 id="generated-content">
 Generated Content Pseudo-elements: ''::before'' and ''::after''</h2>
 
-  When their computed 'content' value is not ''none'',
+  When their computed 'content' value is not ''content/none'',
   these pseudo-elements generate boxes
   as if they were immediate children of their <i>originating element</i>,
   and can be styled exactly like any normal document-sourced element in the document tree.
@@ -561,7 +635,7 @@ Generated Content Pseudo-elements: ''::before'' and ''::after''</h2>
 
     <pre>p.note::before { content: "Note: " }</pre>
 
-    Since the initial value of 'display' is ''inline'',
+    Since the initial value of 'display' is ''display/inline'',
     this will generate an inline box.
     Like other inline children of <code>&lt;p></code>,
     it will participate in <code>&lt;p></code>’s inline formatting context,