[selectors-4] Define :empty to ignore whitespace. Define :blank to apply to empty inputs. #1967 #1283

Author: fantasai

selectors-4/Overview.bs

@@ -397,7 +397,7 @@ Selectors Overview</h2>
 				<td>3
 			<tr>
 				<td><code>E:empty</code>
-				<td>an E element that has no children (not even text nodes)
+				<td>an E element that has no children (neither elements nor text)
 				<td>[[#structural-pseudos]]
 				<td>3
 			<tr>
@@ -2580,6 +2580,26 @@ The Indeterminate-value Pseudo-class: '':indeterminate''</h4>
 <h3 id='ui-validity'>
 Input Value-checking</h3>
 
+<h4 id="blank">
+The Empty-Value Pseudo-class: '':blank''</h4>
+
+	The <dfn id="blank-pseudo">:blank</dfn> pseudo-class
+	applies to user-input elements whose input value is empty
+	(consists of the empty string or otherwise null input).
+
+	<div class="example">
+		Examples of '':blank'' user-input elements would be
+		a <{textarea}> element whose contents are empty,
+		or an <{input}> field whose value is empty.
+		Note that the value under consideration here is the value
+		that would be submitted
+		(see <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#a-form-control's-value">A form control’s value</a> in [[HTML]]),
+		which in HTML does not necessarily correspond to the value
+		of the element’s <{input/value}> attribute.
+	</div>
+
+	Note: This selector is at-risk.
+
 <h4 id="validity-pseudos">
 The Validity Pseudo-classes: '':valid'' and '':invalid''</h4>
 
@@ -2697,7 +2717,9 @@ Tree-Structural pseudo-classes</h2>
 <h3 id="the-empty-pseudo">
 '':empty'' pseudo-class</h3>
 
-	The <dfn id='empty-pseudo'>:empty</dfn> pseudo-class represents an element that has no children at all.
+	The <dfn id='empty-pseudo'>:empty</dfn> pseudo-class represents
+	an element that has no children
+	except, optionally, <a>document white space characters</a>.
 	In terms of the document tree,
 	only element nodes and content nodes
 	(such as [[DOM]] text nodes, and entity references)
@@ -2707,48 +2729,37 @@ Tree-Structural pseudo-classes</h2>
 
 	<div class="example">
 		Examples:
-		''p:empty'' is a valid representation of the following fragment:
-
-		<pre>&lt;p>&lt;/p></pre>
-
-		''foo:empty'' is not a valid representation for the
-		following fragments:
-
-		<pre>&lt;foo>bar&lt;/foo></pre>
-
-		<pre>&lt;foo>&lt;bar>bla&lt;/bar>&lt;/foo></pre>
-
-		<pre>&lt;foo>this is not &lt;bar>:empty&lt;/bar>&lt;/foo></pre>
-	</div>
-
-	Issue: The WG is considering whether to allow elements containing only white space to match this selector.
-	The advantage would be that--
-	as white space is largely collapsible in HTML and is therefore used for source code formatting, and especially because elements with omitted end tags are likely to absorb such white space into their DOM text contents--
-	many elements which authors perceive of as empty would be selected by this selector, as they expect.
-	The disadvantages are a potential conflict with Web-compat if there exist pages that depend on this selector excluding white space;
-	and that one might consider uncollapsed white space to be significant content, but the selector cannot change its behavior based on the 'white-space' property.
-	See <a href="https://github.com/w3c/csswg-drafts/issues/1967">discussion</a>.
-
-
-<h3 id='the-blank-pseudo'>
-'':blank'' pseudo-class</h3>
-
-	The <dfn id='blank-pseudo'>:blank</dfn> pseudo-class is like the '':empty'' pseudo-class,
-	except that it additionally matches elements that only contain
-	<a href="https://www.w3.org/TR/css3-text/#white-space-rules">code points affected by whitespace processing</a>. [[!CSS3TEXT]]
+		''p:empty'' is a valid representation of the <{p}> elements
+		in the following HTML fragment:
+
+		<pre class="html">
+			&lt;p>&lt;/p>
+			&lt;p>
+			&lt;p> &lt;/p>
+			&lt;p><!-- comment -->&lt;/p>
+		</pre>
 
-	<div class='example'>
-		For example, the following element matches '':blank'',
-		but not '':empty'',
-		because it contains at least one linebreak, and possibly other whitespace:
+		''div:empty'' is not a valid representation of the <code>&lt;div></code> elements
+		in the following fragment:
 
-		<pre>&lt;p><br>&lt;/p></pre>
+		<pre class="html">
+			&lt;div>text&lt;/div>
+			&lt;div>&lt;p>&lt;/p>&lt;/div>
+			&lt;div>&amp;nbsp;&lt;/div>
+			&lt;div>&lt;p>bla&lt;/p>&lt;/div>
+			&lt;div>this is not &lt;p>:empty&lt;/p>&lt;/div>
+		</pre>
 	</div>
 
-	Issue: The WG is considering whether to rename this or file its definition under the existing '':empty'' pseudo-class.
-	See <a href="https://github.com/w3c/csswg-drafts/issues/1967">discussion</a>.
-	There's also a <a href="https://github.com/w3c/csswg-drafts/issues/1283">related issue</a> on a selector for empty input fields which might legitimately steal this name.
-
+	Note: In Level 2 and Level 3 of Selectors,
+	'':empty'' did not match elements that contained only white space.
+	This was changed so that that--
+	given white space is largely collapsible in HTML
+	and is therefore used for source code formatting,
+	and especially because elements with omitted end tags
+	are likely to absorb such white space into their DOM text contents--
+	elements which authors perceive of as empty
+	can be selected by this selector, as they expect.
 
 <h3 id='child-index'>
 Child-indexed Pseudo-classes</h3>
@@ -3897,6 +3908,13 @@ Appendix B: Obsolete but Required Parsing Quirks for Web Compat</h2>
 <h2 id="changes">
 Changes</h2>
 
+	Significant changes since the <a href="https://www.w3.org/TR/2018/WD-selectors-4-20180202/">2 February 2018 Working Draft</a>:
+
+	<ul>
+		<li>Removed '':blank'' and defined '':empty'' to ignored white-space&ndash;only nodes.
+		(<a href="https://github.com/w3c/csswg-drafts/issues/1967">Issue 1967</a>)
+	</ul>
+
 	Significant changes since the <a href="https://www.w3.org/TR/2013/WD-selectors4-20130502/">2 May 2013 Working Draft</a> include:
 
 	<ul>
@@ -3906,7 +3924,7 @@ Changes</h2>
 		<li>Replaced the '':nth-match()'' and '':nth-last-match()'' selectors
 		    with '':nth-child(&hellip; of <var>selector</var>)'' and '':nth-last-child(&hellip; of <var>selector</var>)''.
 		<li>Changed the <css>:active-drop-target</css>, <css>:valid-drop-target</css>, <css>:invalid-drop-target</css> with '':drop()''.
-		<li>Sketched out an empty-or-whitespace-only selector for discussion ('':blank'').
+		<li>Sketched out an empty-or-whitespace-only selector for discussion
 			(See <a href="https://github.com/w3c/csswg-drafts/issues/1967">open issue</a>.)
 		<li>Renamed '':user-error'' to '':user-invalid''.
 		    (See <a href="https://www.w3.org/mid/CADhPm3v+WfeGQfBwwx8QBuiOjn2k38V_DcKW17Cm81VgZb1nbQ@mail.gmail.com">Discussion</a>)
@@ -3948,7 +3966,7 @@ Changes</h2>
 	Significant changes since the <a href="https://www.w3.org/TR/2012/WD-selectors4-20120823/">23 August 2012 Working Draft</a> include:
 
 	<ul>
-		<li>Added '':blank'' and '':placeholder-shown'' pseudo-classes.
+		<li>Added '':placeholder-shown'' pseudo-classes.
 		<li>Released some restrictions on '':matches()'' and '':not()''.
 		<li>Defined fast and complete Selectors profiles (now called <a>live</a> and <a>snapshot</a>).
 		<li>Improved definition of <a>specificity</a> to better handle <a>:matches()</a>.