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

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

Author: lilles

css-transitions-2/Overview.bs

@@ -167,6 +167,125 @@ 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.  The style rules inside it are 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 grouped style 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>
+
+	The 'background-color' of an <code>h1</code> element can be transitioned
+	from transparent to green when it is initially rendered:
+
+	<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>
+	The 'opacity' of an element can be transitioned when the element changes
+	to or from ''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 ''display:block'' to ''display:none''.
+
+	Specifying ''opacity: 0'' in the ''@starting-style'' rule 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'' to ''display/block'' as the target element does not
+	already have a [=before-change style=] in those cases.
+
+	Specifying ''opacity: 0'' in the <code>#target.hidden</code> rule makes
+	'opacity' transition 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}