[css-transitions-2] Add spec for @starting-style w3c#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}