[css-view-transitions-2][editorial] Updates for FPWD; diagrams copied…

… from level 1
w3c · May 6, 2024 · 090b614 · 090b614
1 parent f0de230
commit 090b614
Show file tree

Hide file tree

Showing 20 changed files with 395 additions and 3 deletions.
diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs
@@ -1,12 +1,13 @@
 <pre class='metadata'>
 Title: CSS View Transitions Module Level 2
-Shortname: css-view-transitions-2
+Shortname: css-view-transitions
 Level: 2
-Status: ED
+Status: FPWD
 Group: csswg
-Date: 2023-05-30
+Date: 2024-05-09
 Prepare for TR: yes
 ED: https://drafts.csswg.org/css-view-transitions-2/
+TR: https://www.w3.org/TR/css-view-transitions-2/
 Work Status: exploring
 Editor: Noam Rosenthal, Google, w3cid 121539
 Editor: Khushal Sagar, Google, w3cid 122787

diff --git a/css-view-transitions-2/diagrams/desktop-browser-snapshot-root.svg b/css-view-transitions-2/diagrams/desktop-browser-snapshot-root.svg
diff --git a/css-view-transitions-2/diagrams/desktop-browser.svg b/css-view-transitions-2/diagrams/desktop-browser.svg
diff --git a/css-view-transitions-2/diagrams/phases/phases.html b/css-view-transitions-2/diagrams/phases/phases.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<style>
+ html {
+ font-family: sans-serif;
+ }
+ body {
+ margin: 0;
+ }
+ .stage {
+ width: 1920px;
+ height: 1080px;
+ background: #fff;
+ position: relative;
+ }
+ code {
+ font-family: Courier, monospace;
+ }
+ spec-slide {
+ position: absolute;
+ inset: 0;
+ }
+ .vt-demo {
+ position: absolute;
+ inset: 25px 0;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 95px;
+ gap: 80px 60px;
+ color: #000;
+ font: normal 68px sans-serif;
+ text-align: center;
+ }
+
+ .step {
+ grid-column-end: span 3;
+ contain: layout;
+ }
+
+ .example {
+ display: grid;
+ grid-template-rows: max-content 1fr;
+ gap: 37px;
+ }
+
+ .page {
+ position: relative;
+ border: 7px solid #000;
+ }
+
+ .states {
+ display: grid;
+ isolation: isolate;
+ position: absolute;
+ top: 30px;
+ left: 30px;
+ }
+
+ .states .state-2 {
+ opacity: 0;
+ transform: none;
+ }
+
+ .state-1,
+ .state-2 {
+ background: green;
+ color: white;
+ padding: 20px 50px;
+ border-radius: 50px;
+ position: absolute;
+ top: 30px;
+ left: 30px;
+ width: 200px;
+ contain: layout;
+ font-size: 56px;
+ }
+
+ .state-2 {
+ background: orange;
+ color: black;
+ transform: translate(219px, 469px);
+ }
+
+ .states > * {
+ grid-area: 1 / 1;
+ mix-blend-mode: plus-lighter;
+ position: relative;
+ top: 0;
+ left: 0;
+ }
+
+ .what-user-sees {
+ position: absolute;
+ inset: auto 0 35px;
+ font-size: 53px;
+ }
+</style>
+<script type="module" src="script.js"></script>
+<div class="stage"></div>
diff --git a/css-view-transitions-2/diagrams/phases/script.js b/css-view-transitions-2/diagrams/phases/script.js
@@ -0,0 +1,129 @@
+import { Slide, transition, transitionFrom } from "../resources/slides.js";
+
+const slide = new Slide(async function* () {
+ slide.innerHTML = `
+ <div class="vt-demo">
+ <div class="example" aria-hidden="true">
+ <div class="title">Main DOM</div>
+ <div class="page">
+ <div class="state-1">State 1</div>
+ </div>
+ </div>
+ <div class="example" aria-hidden="true">
+ <div class="title">Transition root</div>
+ <div class="page transition-page"></div>
+ </div>
+ <div class="example" aria-hidden="true">
+ <div class="title">User sees</div>
+ <div class="page combined-page">
+ <div class="states">
+ <div class="state-1">State 1</div>
+ <div class="state-2">State 2</div>
+ </div>
+ <div class="what-user-sees">(Main DOM)</div>
+ </div>
+ </div>
+ <div class="step" aria-live="polite">Developer calls <code>document.startViewTransition()</code></div>
+ </div>
+ `;
+
+ /** @type {HTMLElement[]} */
+ const [domPage, transitionPage, combinedPage] =
+ slide.querySelectorAll(".page");
+
+ /** @type {HTMLElement} */
+ const whatUserSees = slide.querySelector(".what-user-sees");
+
+ // This pauses the slide until 'next' is clicked.
+ yield;
+
+ /** @type {HTMLElement} */
+ const step = slide.querySelector(".step");
+ step.textContent = `Current state captured as the "old" state`;
+
+ yield;
+
+ step.textContent = "Rendering paused";
+ whatUserSees.textContent = "(Paused render)";
+
+ yield;
+
+ step.textContent = "Developer updates document state";
+ domPage.innerHTML = `<div class="state-2">State 2</div>`;
+
+ yield;
+
+ step.textContent = `Current state captured as the "new" state`;
+
+ yield;
+
+ step.textContent = "Transition pseudo-elements created";
+ transitionPage.innerHTML = `
+ <div class="states">
+ <div class="state-1">State 1</div>
+ <div class="state-2">State 2</div>
+ </div>
+ `;
+
+ yield;
+
+ step.textContent =
+ "Rendering unpaused, revealing the transition pseudo-elements";
+ whatUserSees.textContent = "(Transition root)";
+
+ yield;
+
+ step.textContent = "Pseudo-elements animate";
+
+ // Wow, this would be way easier with view transitions…
+ const states = [transitionPage, combinedPage].map((el) =>
+ el.querySelector(".states")
+ );
+ const state1s = [transitionPage, combinedPage].map((el) =>
+ el.querySelector(".state-1")
+ );
+ const state2s = [transitionPage, combinedPage].map((el) =>
+ el.querySelector(".state-2")
+ );
+
+ for (const state of states) {
+ transition(
+ state,
+ { transform: "translate(219px, 469px)" },
+ {
+ duration: 1000,
+ easing: "ease-in-out",
+ }
+ );
+ }
+
+ for (const state1 of state1s) {
+ transition(
+ state1,
+ { opacity: "0" },
+ {
+ duration: 1000,
+ easing: "ease-in-out",
+ }
+ );
+ }
+
+ for (const state2 of state2s) {
+ transition(
+ state2,
+ { opacity: "1" },
+ {
+ duration: 1000,
+ easing: "ease-in-out",
+ }
+ );
+ }
+
+ yield;
+
+ step.textContent = "Transition pseudo-elements removed";
+ transitionPage.innerHTML = "";
+ whatUserSees.textContent = "(Main DOM)";
+});
+
+document.querySelector(".stage").append(slide);
diff --git a/css-view-transitions-2/diagrams/phone-browser-scrolled-to-top-with-url.svg b/css-view-transitions-2/diagrams/phone-browser-scrolled-to-top-with-url.svg
diff --git a/css-view-transitions-2/diagrams/phone-browser-scrolled-to-top-without-url.svg b/css-view-transitions-2/diagrams/phone-browser-scrolled-to-top-without-url.svg
diff --git a/css-view-transitions-2/diagrams/phone-browser-snapshot-root.svg b/css-view-transitions-2/diagrams/phone-browser-snapshot-root.svg
diff --git a/css-view-transitions-2/diagrams/phone-browser-with-url.svg b/css-view-transitions-2/diagrams/phone-browser-with-url.svg