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

css-transitions-2/Overview.bs

@@ -167,6 +167,124 @@ 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
+
+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
+grouping rule where the rules inside it is used to establish styles to
+transition from if the previous [=style change event=] did not establish a
+[=before-change style=] for the element whose styles are being computed.
+
+Note: This means that ''@starting-style'' rules only apply 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=].
+
+Define <dfn>starting style</dfn> for an element as the [=after-change style=]
+with ''@starting-style'' rules applied in addition. If an element does not have
+a [=before-change style=] for a given [=style change event=], the
+[=starting style=] is used instead of the [=before-change style=] to compare
+with the [=after-change style=] to start transitions
+([[css-transitions-1#starting]]).
+
+The rules inside ''@starting-style'' cascade as any other grouping rules without
+introducing any new ordering to the cascade, which means rules inside
+''@starting-style'' do not necessarily win over those outside.
+
+Style rules in ''@starting-style'' do not apply to [=after-change style=].
+Thus, the presence of matching rules in ''@starting-style'' can cause
+transitions to occur on elements that otherwise could not have transitions
+because they lack a [=before-change style=].
+
+''starting style'' inherits from the parent's [=after-change style=] just like
+[=after-change style=] does.
+
+<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>
+
+<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 {
+			opacity: 0;
+		}
+	}
+	#target.hidden {
+		display: none;
+		opacity: 0;
+	}
+	</pre>
+
+	The display is transitioning to allow for an opacity transition before
+	flipping from <code>display:block</code> to <code>display:none</code>.
+
+	Setting ''@starting-style'' opacity to 0 means the element will
+	transition opacity from 0 to 1 when inserted into the tree or when
+	the <code>hidden</code> class flips ''display'' from
+	''display/none''</code> to ''display/block'' as the target element does
+	not already have a [=before-change style=] in those cases.
+
+	The opacity set to 0 in <code>#target.hidden</code> is for transitioning
+	opacity from 1 to 0 when the <code>hidden</code> class is added.
+</div>
+
+Global, name-defining at-rules such as ''@keyframes'', ''@font-face'', and
+''@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 : CSSGroupingRule {
+};
+</pre>
+
+
 # Application of transitions # {#application}
 
 ## Animation composite order ## {#animation-composite-order}