From ddaec451fbef0415c414dd03f62a52cee0d47ade Mon Sep 17 00:00:00 2001
From: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com>
Date: Thu, 22 Jun 2023 15:29:38 -0400
Subject: [PATCH 1/2] Use keyframes to specify plus-lighter blending for
cross-fades
---
css-view-transitions-1/Overview.bs | 55 +++++++++++++++++++++++++-----
1 file changed, 46 insertions(+), 9 deletions(-)
diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index e25da5e6855..5c46fe39bd3 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -837,11 +837,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
@keyframes -ua-view-transition-fade-in {
from { opacity: 0; }
}
- :root::view-transition-old(*) {
- animation-name: -ua-view-transition-fade-out;
- }
- :root::view-transition-new(*) {
- animation-name: -ua-view-transition-fade-in;
+
+ /* Keyframes for blending when there are 2 images */
+ @keyframes -ua-mix-blend-mode-plus-lighter {
+ from { mix-blend-mode: plus-lighter }
+ to { mix-blend-mode: plus-lighter }
}
```
@@ -1143,7 +1143,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
: image pair isolation rule
:: A {{CSSStyleRule}} or null. Initially null.
- : view blend mode rule
+ : image animation name rule
:: A {{CSSStyleRule}} or null. Initially null.
@@ -1420,6 +1420,36 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
are not painted (as if they had ''visibility: hidden'')
and do not respond to hit-testing (as if they had pointer-events: none) until |new| exists.
+ 1. If |capturedElement|'s [=captured element/old image=] is null, then:
+ 1. [=Assert=]: |capturedElement|'s [=captured element/new element=] is not null.
+
+ 1. Set |capturedElement|'s [=captured element/image animation name rule=] to a new {{CSSStyleRule}} representing the following CSS,
+ and append it to |document|'s [=document/dynamic view transition style sheet=]:
+
+
+
+ :root::view-transition-new(transitionName) {
+ animation-name: -ua-view-transition-fade-in;
+ }
+
+
+ Note: The above code example contains variables to be replaced.
+
+ 1. If |capturedElement|'s [=captured element/new element=] is null, then:
+ 1. [=Assert=]: |capturedElement|'s [=captured element/old image=] is not null.
+
+ 1. Set |capturedElement|'s [=captured element/image animation name rule=] to a new {{CSSStyleRule}} representing the following CSS,
+ and append it to |document|'s [=document/dynamic view transition style sheet=]:
+
+
+
+ :root::view-transition-old(transitionName) {
+ animation-name: -ua-view-transition-fade-out;
+ }
+
+
+ Note: The above code example contains variables to be replaced.
+
1. If both of |capturedElement|'s [=captured element/old image=] and [=captured element/new element=]
are not null, then:
@@ -1469,14 +1499,16 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Note: The above code example contains variables to be replaced.
- 1. Set |capturedElement|'s [=captured element/view blend mode rule=] to a new {{CSSStyleRule}} representing the following CSS,
+ 1. Set |capturedElement|'s [=captured element/image animation name rule=] to a new {{CSSStyleRule}} representing the following CSS,
and append it to |document|'s [=document/dynamic view transition style sheet=]:
- :root::view-transition-old(transitionName),
+ :root::view-transition-old(transitionName) {
+ animation-name: -ua-view-transition-fade-out, -ua-mix-blend-mode-plus-lighter;
+ }
:root::view-transition-new(transitionName) {
- mix-blend-mode: plus-lighter;
+ animation-name: -ua-view-transition-fade-in, -ua-mix-blend-mode-plus-lighter;
}
@@ -1789,6 +1821,11 @@ This should be feasible since access to this data should already be prevented in
This appendix is informative.
+
+* Use a keyframe to add plus-lighter blending during cross-fade. See issue 8924.
+
From 6853d1c6836433caadd9cc1167045a64ef9119b6 Mon Sep 17 00:00:00 2001
From: Khushal Sagar <63884798+khushalsagar@users.noreply.github.com>
Date: Thu, 22 Jun 2023 16:10:16 -0400
Subject: [PATCH 2/2] Fix indentation
---
css-view-transitions-1/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index 5c46fe39bd3..f480c1d5c3c 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -1435,7 +1435,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Note: The above code example contains variables to be replaced.
- 1. If |capturedElement|'s [=captured element/new element=] is null, then:
+ 1. If |capturedElement|'s [=captured element/new element=] is null, then:
1. [=Assert=]: |capturedElement|'s [=captured element/old image=] is not null.
1. Set |capturedElement|'s [=captured element/image animation name rule=] to a new {{CSSStyleRule}} representing the following CSS,