Skip to content

[view-transitions-1] Remove html specifics #8572

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 13, 2023
Merged

[view-transitions-1] Remove html specifics #8572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7b8d581
Remove html specifics
jakearchibald Mar 13, 2023
25c41ec
Copy-paste error
jakearchibald Mar 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 32 additions & 24 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,18 @@ spec:webidl; type:interface; text:Promise
spec:css-images-4; type:function; text:element()
spec:dom; type:dfn; text:document
spec:css-2022; type:dfn; text:style sheet
spec:selectors-4; type:dfn; text:type selector
spec:css-box-4; type:dfn; text:border box
spec:css-display-3; type:dfn;
text:containing block
text:replaced element
spec:css-cascade-5; type:dfn; text:computed value
Comment on lines +29 to +34
Copy link
Contributor Author

@jakearchibald jakearchibald Mar 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bikeshed started complaining about ambiguous references. This cleans it up.

</pre>

<pre class=anchors>
urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
text: NavigateEvent
text: signal; for: NavigateEvent; url: #ref-for-dom-navigateevent-signal①
urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
text: HTML user agent style sheet; url: #the-css-user-agent-style-sheet-and-presentational-hints
</pre>

<script async type="module" src="diagrams/resources/scaler.js"></script>
Expand Down Expand Up @@ -176,7 +180,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

<div id="phases-diagram">
<spec-scaler canvaswidth="1920" canvasheight="1080" style="aspect-ratio: 1920/1080">
<iframe class="spec-slides" src="diagrams/phases/index.html"></iframe>
<iframe class="spec-slides" src="diagrams/phases/phases.html"></iframe>
</spec-scaler>
<p class="spec-slide-controls">
<button disabled>Previous</button>
Expand Down Expand Up @@ -495,7 +499,11 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

# User-agent styles # {#ua-styles}

The following is added to the [=HTML user agent style sheet=]:
The <dfn>global view transition user agent style sheet</dfn> is a style sheet in the [=user-agent origin=], used in all namespaces.

Issue: [CSS needs a central place for an "all namespaces" style sheet](https://github.com/w3c/csswg-drafts/issues/8573).

It contains the following:

```css
@keyframes -ua-view-transition-fade-out {
Expand All @@ -506,13 +514,13 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
from { opacity: 0; }
}

html {
:root {
view-transition-name: root;
}
```

<div class=note>
There are further additions to the [=HTML user agent style sheet=] defined in [[#view-transition-pseudos]] for each pseudo-element,
There are further additions to the [=global view transition user agent style sheet=] defined in [[#view-transition-pseudos]] for each pseudo-element,
and other styles are added at runtime via the [=document=]'s [=document/view transition style sheet=].
</div>

Expand Down Expand Up @@ -595,10 +603,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

Its [=containing block=] is the [=snapshot root=].

The following is added to the [=HTML user agent style sheet=]:
The following is added to the [=global view transition user agent style sheet=]:

```css
html::view-transition {
:root::view-transition {
position: fixed;
inset: 0;
}
Expand Down Expand Up @@ -631,10 +639,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

It is selected from its [=ultimate originating element=], the [=document element=].

The following is added to the [=HTML user agent style sheet=]:
The following is added to the [=global view transition user agent style sheet=]:

```css
html::view-transition-group(*) {
:root::view-transition-group(*) {
position: absolute;
top: 0;
left: 0;
Expand All @@ -659,10 +667,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

It is selected from its [=ultimate originating element=], the [=document element=].

The following is added to the [=HTML user agent style sheet=]:
The following is added to the [=global view transition user agent style sheet=]:

```css
html::view-transition-image-pair(*) {
:root::view-transition-image-pair(*) {
position: absolute;
inset: 0;

Expand Down Expand Up @@ -698,10 +706,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
Note: The image content is captured in [=capture the image=],
then set and updated in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].

The following is added to the [=HTML user agent style sheet=]:
The following is added to the [=global view transition user agent style sheet=]:

```css
html::view-transition-old(*) {
:root::view-transition-old(*) {
position: absolute;
inset-block-start: 0;
inline-size: 100%;
Expand All @@ -721,10 +729,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
### <dfn>::view-transition-new( <<pt-name-selector>> )</dfn>

Identical to ''::view-transition-old()'',
except the following styles added to the [=HTML user agent style sheet=]:
except the following styles added to the [=global view transition user agent style sheet=]:

```css
html::view-transition-old(*) {
:root::view-transition-old(*) {
position: absolute;
inset-block-start: 0;
inline-size: 100%;
Expand Down Expand Up @@ -866,7 +874,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

: <dfn>view transition style sheet</dfn>
:: a [=/style sheet=].
Initially a new [=/style sheet=] in the [=user-agent origin=], ordered after the [=HTML user agent style sheet=].
Initially a new [=/style sheet=] in the [=user-agent origin=], ordered after the [=global view transition user agent style sheet=].

Note: This is used to hold dynamic styles relating to transitions.

Expand Down Expand Up @@ -1338,7 +1346,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
html::view-transition-old(<var>transitionName</var>) {
:root::view-transition-old(<var>transitionName</var>) {
object-view-box: <var>oldViewBox</var>;
}
</pre>
Expand Down Expand Up @@ -1389,7 +1397,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
html::view-transition-group(<var>transitionName</var>) {
:root::view-transition-group(<var>transitionName</var>) {
animation-name: -ua-view-transition-group-anim-<var>transitionName</var>;
}
</pre>
Expand All @@ -1401,7 +1409,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
html::view-transition-image-pair(<var>transitionName</var>) {
:root::view-transition-image-pair(<var>transitionName</var>) {
isolation: isolate;
}
</pre>
Expand All @@ -1413,8 +1421,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
html::view-transition-old(<var>transitionName</var>),
html::view-transition-new(<var>transitionName</var>) {
:root::view-transition-old(<var>transitionName</var>),
:root::view-transition-new(<var>transitionName</var>) {
mix-blend-mode: plus-lighter;
}
</pre>
Expand Down Expand Up @@ -1675,7 +1683,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
html::view-transition-group(<var>transitionName</var>) {
:root::view-transition-group(<var>transitionName</var>) {
width: <var>width</var>;
height: <var>height</var>;
transform: <var>transform</var>;
Expand Down Expand Up @@ -1704,7 +1712,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
html::view-transition-new(<var>transitionName</var>) {
:root::view-transition-new(<var>transitionName</var>) {
object-view-box: <var>newViewBox</var>;
}
</pre>
Expand Down
0 ...-transitions-1/diagrams/phases/index.html → ...transitions-1/diagrams/phases/phases.html
View file
Open in desktop
File renamed without changes.