[css-transitions-2] Add spec for @starting-style #8174

css-transitions-2/Overview.bs

@@ -167,6 +167,78 @@ Each time a new transition is generated, the current value of the (already
 incremented) <a>current transition generation</a> is stored as the
 transition's <dfn>transition generation</dfn>.
 
+## Defining [=before-change style=]: the ''@starting-style'' rule
+
+Transitions can only start during a [=style change event=] for elements which
+has a defined [=before-change style=] established by the previous
+[=style change event=], which means that newly inserted elements or elements
+that change from not [=being rendered=] to being rendered do not start
+transitions. Still, doing transitions starting from the initial rendering is a
+valid use case.
+
+The <dfn at-rule id="at-ruledef-starting-style">@starting-style</dfn> rule is a
+conditional group rule with the implicit condition that it matches if the
+previous [=style change event=] did not establish a [=before-change style=] for
+the element whose styles are being computed. This is used to establish a
+[=before-change style=] for the current [=style change event=].
+
+If any rules in ''@starting-style'' are applied, the resulting style must be
+used as the [=before-change style=] for the current [=style change event=] and
+the computed styles must be re-computed without ''@starting-style'' rules
+applied.
+
+<div class=example>
+
+  Transitioning background-color of an h1 element from transparent to green
+	from initial rendering:
+
+	<pre class=lang-css>
+	h1 {
+		transition: background-color 1.5s;
+		background-color: green;
+	}
+	@starting-style {
+		h1 {
+			background-color: transparent;
+		}
+	}
+	</pre>
+
+	Conditional rules can be used with CSS Nesting:
+
+	<pre class=lang-css>
+	h1 {
+		transition: background-color 1.5s;
+		background-color: green;
+		@starting-style {
+			background-color: transparent;
+		}
+	}
+	</pre>
+</div>
+
+Global, name-defining at-rules such as ''@keyframes'', ''@font-face'', and
+''@layer'' are not constrained by ''@starting-style''.
+
+### The <code>CSSStartingStyleRule</code> interface
+
+The {{CSSStartingStyleRule}} interface represents a ''@starting-style'' rule.
+
+<pre class='idl'>
+[Exposed=Window]
+interface CSSStartingStyleRule : CSSConditionRule {
+};
+</pre>
+
+<dl class='idl-attributes'>
+	<dt><code>conditionText</code> of type <code>CSSOMString</code>
+		(CSSStartingStyle-specific definition for attribute on CSSConditionRule)
+	<dd>The <code>conditionText</code> attribute (defined on the
+	  <code>CSSConditionRule</code> parent rule), on getting, must return the
+	  empty string.
+</dl>
+
+
 # Application of transitions # {#application}
 
 ## Animation composite order ## {#animation-composite-order}