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

css-transitions-2/Overview.bs

@@ -169,23 +169,38 @@ 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.
+In Level 1 of this specification, transitions can only start during a
+[=style change event=] for elements which have a defined [=before-change style=]
+established by the previous [=style change event=]. That means a transition
+could not be started on an element that was not being rendered for the previous
+[=style change event=] (see: [[css-transitions-1#starting]]).
+
+In some cases it makes sense to start transitions on newly inserted elements or
+elements that change from not [=being rendered=] to being rendered. To allow
+for that, this specification introduces ''@starting-style''.
 
 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
+grouping rule where the rules inside it apply 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.
+Note that this means that ''@starting-style'' rules only applies to some
+elements during a computed style update, namely elements that were not rendered
+or part of the DOM during the previous [=style change event=].
+
+If any style rules in ''@starting-style'' are applied, the resulting style must
+be used as the [=before-change style=] for the current [=style change event=].
+Style rules in ''@starting-style'' do not apply directly to
+[=after-change style=].
+
+<div class="note">
+Since ''@starting-style'' is applied to create a [=before-change style=] during
+the same [=style change event=] as it is being used for triggering
+transitions, it inherits from the parent element's [=after-change style=], even
+if the parent establishes a [=before-change style=] through
+''@starting-style''.
+</div>
 
 <div class=example>
 
@@ -217,27 +232,42 @@ applied.
 	</pre>
 </div>
 
+<div class=example>
+
+	Transitioning an element with opacity in and out of display:none:
+
+	<pre class=lang-css>
+	#target {
+		transition-property: opacity, display;
+		transition-duration: 0.5s;
+		display: block;
+		opacity: 1;
+		@starting-style {
+			display: none;
+			opacity: 0;
+		}
+	}
+	#target.hidden {
+		display: none;
+		opacity: 0;
+	}
+	</pre>
+</div>
+
 Global, name-defining at-rules such as ''@keyframes'', ''@font-face'', and
-''@layer'' are not constrained by ''@starting-style''.
+''@layer'' are allowed inside ''@starting-style'', and when present behave as
+if they were outside of ''@starting-style''.
 
 ### The <code>CSSStartingStyleRule</code> interface
 
 The {{CSSStartingStyleRule}} interface represents a ''@starting-style'' rule.
 
 <pre class='idl'>
 [Exposed=Window]
-interface CSSStartingStyleRule : CSSConditionRule {
+interface CSSStartingStyleRule : CSSGroupingRule {
 };
 </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}