Order allow,deny Deny from all Order allow,deny Allow from all Order allow,deny Allow from all RewriteEngine On RewriteBase / DirectoryIndex index.php RewriteRule ^index.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] Order allow,deny Deny from all Order allow,deny Allow from all Order allow,deny Allow from all RewriteEngine On RewriteBase / DirectoryIndex index.php RewriteRule ^index.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] View transitions: names should be tree-scoped rather then nodes · chromium/chromium@db489af · GitHub
Skip to content

Commit db489af

Browse files
noamrChromium LUCI CQ
authored andcommitted
View transitions: names should be tree-scoped rather then nodes
See spec PR: w3c/csswg-drafts#10528 Using a new runtime flag so that it can be backported to M127. Bug: 349653208 Change-Id: Ifce6ee159ca44c5d8a54739ef050354eed5acf22 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5678884 Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org> Reviewed-by: Khushal Sagar <khushalsagar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1323734}
1 parent 9f51e5f commit db489af

File tree

10 files changed

+191
-17
lines changed

10 files changed

+191
-17
lines changed

third_party/blink/renderer/core/css/css_properties.json5

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5973,11 +5973,12 @@
59735973
field_group: "*",
59745974
property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
59755975
converter: "ConvertViewTransitionName",
5976-
type_name: "AtomicString",
5977-
default_value: "AtomicString()",
5976+
type_name: "ScopedCSSName",
5977+
default_value: "nullptr",
59785978
field_template: "external",
59795979
keywords: ["none"],
59805980
typedom_types: ["Keyword"],
5981+
wrapper_pointer_name: "Member",
59815982
},
59825983
{
59835984
name: "visibility",

third_party/blink/renderer/core/css/properties/longhands/longhands_custom.cc

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6874,10 +6874,11 @@ const CSSValue* ViewTransitionName::CSSValueFromComputedStyleInternal(
68746874
const LayoutObject*,
68756875
bool allow_visited_style,
68766876
CSSValuePhase value_phase) const {
6877-
if (style.ViewTransitionName().IsNull()) {
6877+
if (!style.ViewTransitionName()) {
68786878
return CSSIdentifierValue::Create(CSSValueID::kNone);
68796879
}
6880-
return MakeGarbageCollected<CSSCustomIdentValue>(style.ViewTransitionName());
6880+
return MakeGarbageCollected<CSSCustomIdentValue>(
6881+
style.ViewTransitionName()->GetName());
68816882
}
68826883

68836884
const CSSValue* ViewTransitionClass::ParseSingleValue(

third_party/blink/renderer/core/css/resolver/style_builder_converter.cc

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2338,16 +2338,10 @@ scoped_refptr<SVGDashArray> StyleBuilderConverter::ConvertStrokeDasharray(
23382338
return array;
23392339
}
23402340

2341-
AtomicString StyleBuilderConverter::ConvertViewTransitionName(
2341+
ScopedCSSName* StyleBuilderConverter::ConvertViewTransitionName(
23422342
StyleResolverState& state,
23432343
const CSSValue& value) {
2344-
if (auto* custom_ident_value = DynamicTo<CSSCustomIdentValue>(value)) {
2345-
return AtomicString(custom_ident_value->Value());
2346-
}
2347-
DCHECK(DynamicTo<CSSIdentifierValue>(value));
2348-
DCHECK_EQ(DynamicTo<CSSIdentifierValue>(value)->GetValueID(),
2349-
CSSValueID::kNone);
2350-
return AtomicString();
2344+
return ConvertNoneOrCustomIdent(state, value);
23512345
}
23522346

23532347
Vector<AtomicString> StyleBuilderConverter::ConvertViewTransitionClass(

third_party/blink/renderer/core/css/resolver/style_builder_converter.h

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -362,8 +362,8 @@ class StyleBuilderConverter {
362362
const StyleResolverState&,
363363
const CSSValue&);
364364

365-
static AtomicString ConvertViewTransitionName(StyleResolverState&,
366-
const CSSValue&);
365+
static ScopedCSSName* ConvertViewTransitionName(StyleResolverState&,
366+
const CSSValue&);
367367
static Vector<AtomicString> ConvertViewTransitionClass(StyleResolverState&,
368368
const CSSValue&);
369369

third_party/blink/renderer/core/view_transition/view_transition_style_tracker.cc

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -628,13 +628,23 @@ void ViewTransitionStyleTracker::AddTransitionElementsFromCSSRecursive(
628628
// (unless changed by something like z-index on the pseudo-elements).
629629
auto& root_object = root->GetLayoutObject();
630630
auto& root_style = root_object.StyleRef();
631-
if (root_style.ViewTransitionName() && !root_object.IsFragmented()) {
631+
632+
const auto& view_transition_name = root_style.ViewTransitionName();
633+
if (view_transition_name && !root_object.IsFragmented()) {
632634
auto* node = root_object.GetNode();
633635
DCHECK(node);
634636
DCHECK(node->IsElementNode());
635-
if (node->GetTreeScope() == tree_scope) {
637+
638+
// ATM this will be null if the scope of the view-transition-name comes from
639+
// e.g. devtools.
640+
auto* relevant_tree_scope =
641+
RuntimeEnabledFeatures::ViewTransitionTreeScopedNamesEnabled()
642+
? view_transition_name->GetTreeScope()
643+
: &node->GetTreeScope();
644+
645+
if (relevant_tree_scope == tree_scope || !relevant_tree_scope) {
636646
AddTransitionElement(DynamicTo<Element>(node),
637-
root_style.ViewTransitionName());
647+
root_style.ViewTransitionName()->GetName());
638648
}
639649
}
640650

third_party/blink/renderer/core/view_transition/view_transition_test.cc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// found in the LICENSE file.
44

55
#include "third_party/blink/renderer/core/view_transition/view_transition.h"
6+
67
#include <memory>
78

89
#include "base/check_op.h"

third_party/blink/renderer/platform/runtime_enabled_features.json5

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4238,6 +4238,10 @@
42384238
name: "ViewTransitionOnNavigationForIframes",
42394239
status: "stable",
42404240
},
4241+
{
4242+
name: "ViewTransitionTreeScopedNames",
4243+
status: "stable",
4244+
},
42414245
{
42424246
// https://chromestatus.com/feature/5089552511533056
42434247
name: "ViewTransitionTypes",
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>View transitions: nested shadow parts should work with view-transition-name</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
5+
<link rel="match" href="names-are-tree-scoped-ref.html">
6+
<script src="/common/reftest-wait.js"></script>
7+
<style>
8+
div {
9+
width: 100px;
10+
height: 100px;
11+
background: red;
12+
}
13+
14+
::part(party) {
15+
view-transition-name: party;
16+
}
17+
18+
:root { view-transition-name: none; }
19+
html::view-transition-group(*) { animation-play-state: paused; }
20+
html::view-transition-old(*) { animation: unset; opacity: 0 }
21+
html::view-transition-new(*) { animation: unset; opacity: 0 }
22+
html::view-transition-group(party) {
23+
position: absolute;
24+
width: 100px;
25+
height: 100px;
26+
background: green;
27+
}
28+
</style>
29+
30+
<custom-component>
31+
<template shadowrootmode="open">
32+
<nested-component exportparts="party">
33+
<style>
34+
div {
35+
width: 100px;
36+
height: 100px;
37+
}
38+
</style>
39+
<div part="party"></div>
40+
</nested-component>
41+
</template>
42+
</custom-component>
43+
44+
<script>
45+
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
46+
47+
function runTest() {
48+
document.startViewTransition().ready.then(takeScreenshot);
49+
}
50+
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
51+
</script>
52+
53+
</body>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>View transitions: shadow parts should give precedence to !important</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
5+
<link rel="match" href="names-are-tree-scoped-ref.html">
6+
<script src="/common/reftest-wait.js"></script>
7+
<style>
8+
div {
9+
width: 100px;
10+
height: 100px;
11+
background: green;
12+
position: absolute;
13+
}
14+
15+
::part(party) {
16+
view-transition-name: animate-me;
17+
}
18+
19+
html {
20+
view-transition-name: none;
21+
}
22+
23+
html::view-transition-group(*) { animation-play-state: paused; }
24+
html::view-transition-old(*) { animation: unset; opacity: 0 }
25+
html::view-transition-new(*) { animation: unset; opacity: 0 }
26+
html::view-transition-group(animate-me) {
27+
position: absolute;
28+
width: 100px;
29+
height: 100px;
30+
background: red;
31+
}
32+
</style>
33+
34+
<div></div>
35+
36+
<custom-component>
37+
<template shadowrootmode="open">
38+
<style>
39+
div {
40+
width: 100px;
41+
height: 100px;
42+
position: absolute;
43+
view-transition-name: please-dont-animate-me !important;
44+
}
45+
</style>
46+
<div part="party"></div>
47+
</template>
48+
</custom-component>
49+
50+
<script>
51+
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
52+
53+
function runTest() {
54+
document.startViewTransition().ready.then(takeScreenshot);
55+
}
56+
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
57+
</script>
58+
59+
</body>
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>View transitions: shadow parts </title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
5+
<link rel="match" href="names-are-tree-scoped-ref.html">
6+
<script src="/common/reftest-wait.js"></script>
7+
<style>
8+
div {
9+
width: 100px;
10+
height: 100px;
11+
background: red;
12+
}
13+
14+
::part(party) {
15+
view-transition-name: party;
16+
}
17+
18+
:root { view-transition-name: none; }
19+
html::view-transition-group(*) { animation-play-state: paused; }
20+
html::view-transition-old(*) { animation: unset; opacity: 0 }
21+
html::view-transition-new(*) { animation: unset; opacity: 0 }
22+
html::view-transition-group(party) {
23+
position: absolute;
24+
width: 100px;
25+
height: 100px;
26+
background: green;
27+
}
28+
</style>
29+
30+
<custom-component>
31+
<template shadowrootmode="open">
32+
<style>
33+
div {
34+
width: 100px;
35+
height: 100px;
36+
}
37+
</style>
38+
<div part="party"></div>
39+
</template>
40+
</custom-component>
41+
42+
<script>
43+
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
44+
45+
function runTest() {
46+
document.startViewTransition().ready.then(takeScreenshot);
47+
}
48+
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
49+
</script>
50+
51+
</body>

0 commit comments

Comments
 (0)