[css-highlight-api][css-pseudo] add style attribute to pseudo-elements

frivoal · frivoal · commit a40b2bd4e9ff · 2019-12-20T13:27:40.000+09:00
Use it in css-highlight-api as a replacement for the style attribute on Highlight. Closes #4588 Closes #4602
diff --git a/css-highlight-api-1/Overview.bs b/css-highlight-api-1/Overview.bs
@@ -44,6 +44,7 @@ Complain About: accidental-2119 yes
 <pre class=link-defaults>
 spec:css-color-4; type:property; text:color
 spec:css-pseudo-4; type:dfn; text:highlight overlay
+spec:html; type:element; text:style
 </pre>
 
 <style>
@@ -166,14 +167,12 @@ Creating Custom Highlights</h3>
 	interface Highlight {
 		constructor(CSSOMString name, optional sequence<AbstractRange> initialRanges = []);
 		setlike<AbstractRange>;
-		attribute CSSStyleDeclaration style;
 		attribute double priority;
 		readonly attribute CSSOMString name;
 	};
 	</xmp>
 
-	See [[#priorities]] for more information on the {{Highlight/priority}} attribute,
-	and [[#style-attr]] for more information on the {{Highlight/style}} attribute.
+	See [[#priorities]] for more information on the {{Highlight/priority}} attribute.
 
 	<div algorithm="to create a custom highlight">
 		When the <dfn for=Highlight constructor>Highlight(CSSOMString name, optional sequence<AbstractRange> initialRanges = [])</dfn> constructor is invoked,
@@ -190,13 +189,6 @@ Creating Custom Highlights</h3>
 				Set |highlight|'s {{Highlight/name}} to |nameArg|
 			<li>
 				Set |highlight|'s {{Highlight/priority}} to <code>0</code>.
-			<li>
-				Set |highlight|'s {{Highlight/style}}
-				to a [=CSS declaration block=] object
-				whose [=readonly flag=] is unset,
-				whose [=parent CSS rule=] is <code>null</code>,
-				whose [=owner node=] is <code>null</code>,
-				and whose [=declarations=] list is empty.
 			<li>
 				For each |range| of {{initialRanges}},
 				let |rangeArg| be the result of [=converted to an ECMAScript value|converting=] |range| to an ECMAScript value,
@@ -270,24 +262,20 @@ The Custom Highlight Pseudo-element: ''::highlight()''</h3>
 
 
 <h3 id=style-attr>
-Default Styling of a Custom Highlight</h3>
-
-	A [=custom highlight=]'s {{Highlight/style}} attribute
-	is a [=CSS declaration block=] object
-	which authors can use to define
-	the [=custom highlight=]'s <dfn>default style</dfn>.
-	This determines the appearance of the [=custom highlight=]
-	when ''::highlight()'' has not been used to specify other styles.
-	(See also [[#c-and-h]] for more information on
-	how to determine which styles apply
-	when several are specified).
+Styling of a Custom Highlight via scripting</h3>
+
+	The {{CSSPseudoElement/type}} attribute of {{CSSPseudoElement}} (see [[css-pseudo-4]]) is extended
+	to accept <code>"::highlight(<<highlight-name>>)"</code> as one of the possible values.
+	Together with the {{CSSPseudoElement/style}} attribute of {{CSSPseudoElement}},
+	this enables authors to set the appearance of the [=custom highlight=]
+	entirely through scripting.
 
 	<div class=example id=style-attr-ex>
 
 		The following example achieves the same rendering
 		as <a href=#intro-ex>the example in the overview section</a>
-		without using the ''::highlight()'' pseudo-element,
-		by providing a default style via scripting instead.
+		without any declaration in a <{style}> element
+		by providing a style attribute via scripting instead.
 
 		<xmp highlight=html>
 			<body><span>One </span><span>two </span><span>three...</span>
@@ -296,25 +284,15 @@ Default Styling of a Custom Highlight</h3>
 				r.setStart(document.body, 0);
 				r.setEnd(document.body, 2);
 
-				let h = new Highlight("inline-highlight", [r]);
-				h.style.backgroundColor = "yellow";
-				h.style.color = "blue";
+				CSS.highlights.add(new Highlight("inline-highlight", [r]));
 
-				CSS.highlights.add(h);
+				let s = document.documentElement.pseudo("::highlight(inline-highlight)").style;
+				s.backgroundColor = "yellow";
+				s.color = "blue";
 			</script>
 		</xmp>
-
-		This would be overriden if by any use of ''::highlight(inline-highlight)'' in a stylesheet.
 	</div>
 
-	Issue(4588): Do we really need this?
-	Would it not make more sense to have a generic mechanism to set the style attribute
-	on any pseudo element?
-	In that case I'd also expect it
-	to behave more like [[css-style-attr]]
-	and to have a higher specificity than any selector,
-	instead of being a default filling in if there's not specified style.
-
 <h3 id=processing-model>
 Processing Model</h3>
 
@@ -325,21 +303,13 @@ Applicable Properties</h4>
 	like the built-in [=highlight pseudo-elements=],
 	can only be styled with a limited set of properties.
 	See [[css-pseudo-4#highlight-styling]] for the full list.
-	The same limitation applies to the {{Highlight/style}} attribute of [=custom highlights=].
 
 <h4 id=c-and-h>
 Cascading and Inheritance</h4>
 
 	The [=cascading=] and [=inheritance=] of [=custom highlight pseudo-elements=] is handled
 	identically to that of the built-in [=highlight pseudo-elements=],
-	as defined in [[css-pseudo-4#highlight-cascade]],
-	with one addition:
-	similarly to how 
-	the User Agent is expected to use the OS-default highlight colors for ''::selection''
-	when neither 'color' nor 'background-color' have been specified,
-	the User Agent must use the styles provided in 
-	the {{Highlight/style}} attribute of the corresponding [=custom highlight=]
-	when no applicable property has been specified via ''::highlight()''.
+	as defined in [[css-pseudo-4#highlight-cascade]].
 
 <h4 id=painting>
 Painting</h4>
@@ -499,7 +469,6 @@ Repaints</h3>
 	The User Agent must also repaint highlights as needed
 	in response to changes by the author
 	to the {{Highlight/priority}},
-	to the {{Highlight/style}},
 	or to the [=boundary points=] of {{Range}}s
 	of a [=registered=] [=custom highlight=].
 
diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs
@@ -22,6 +22,7 @@ Indent: 2
 spec:css-color-3; type:value; text:currentcolor
 spec:css-color-3; type:property; text:color
 spec:fill-stroke-3; type:property; text:stroke-width
+spec:css-style-attr; type:dfn; text:style attribute
 </pre>
 
 <h2 id="intro">Introduction</h2>
@@ -864,6 +865,7 @@ Additions to the CSS Object Model</h2>
     interface CSSPseudoElement : EventTarget {
         readonly attribute CSSOMString type;
         readonly attribute Element element;
+        attribute CSSStyleDeclaration style;
     };
   </pre>
 
@@ -883,12 +885,17 @@ Additions to the CSS Object Model</h2>
   The <dfn attribute for=CSSPseudoElement>element</dfn> attribute is the
   [=originating element=] of the pseudo-element.
 
+  The <dfn attribute for=CSSPseudoElement>style</dfn> attribute
+  is [=CSS declaration block=] whose associated properties
+  are as follows:
+  * the [=readonly flag=] is unset,
+  * the [=parent CSS rule=] is <code>null</code>,
+  * the [=owner node=] is the pseudo-element
+  * the initially empty [=declarations=] list represents a [=style attribute=] for this pseudo-element
+          in the sence of [[!css-style-attr]] and as used in [[!css-cascade-4]].
+
   Note: This interface may be extended in the future
-  to other pseudo-element types
-  and/or to allow setting style information
-  through a {{CSSStyleDeclaration}} <code>style</code> attribute.
-  The current functionality is limited
-  to that which is needed to support [[web-animations-1]].
+  to other pseudo-element types.
 
 <h3 id="window-interface">
 {{pseudo()}} method of the {{Element}} interface</h3>
