Skip to content

Commit b9fbc53

Browse files
nt1mnt1m
committed
[view-transitions] Implement view-transition-name: match-element
https://bugs.webkit.org/show_bug.cgi?id=282344 rdar://138932551 Reviewed by Matt Woodrow. See w3c/csswg-drafts#10995 (comment) * LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/match-element-name-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/match-element-name.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/parsing/view-transition-name-valid-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/parsing/view-transition-name-valid.html: * Source/WebCore/css/CSSProperties.json: * Source/WebCore/css/CSSValueKeywords.in: * Source/WebCore/dom/ViewTransition.cpp: (WebCore::effectiveViewTransitionName): * Source/WebCore/rendering/style/ViewTransitionName.h: (WebCore::Style::ViewTransitionName::createWithMatchElement): (WebCore::Style::ViewTransitionName::isMatchElement const): (WebCore::Style::ViewTransitionName::scopeOrdinal const): (WebCore::Style::operator<<): * Source/WebCore/style/StyleBuilderConverter.h: (WebCore::Style::BuilderConverter::convertViewTransitionName): Canonical link: https://commits.webkit.org/288102@main
1 parent 1c94a76 commit b9fbc53

File tree

9 files changed

+148
-6
lines changed

9 files changed

+148
-6
lines changed

‎LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/match-element-name-expected.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>View transitions: using auto names</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<style>
6+
body {
7+
background: rebeccapurple;
8+
}
9+
10+
div {
11+
width: 100px;
12+
height: 100px;
13+
}
14+
15+
main {
16+
display: flex;
17+
flex-direction: row;
18+
position: relative;
19+
top: 50px;
20+
}
21+
22+
.item1 {
23+
background: green;
24+
}
25+
26+
.item2 {
27+
background: yellow;
28+
}
29+
</style>
30+
<main>
31+
<div class="item1"></div>
32+
<div class="item2"></div>
33+
</main>
34+
35+
</body>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/match-element-name.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>View transitions: using match-element name</title>
4+
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
5+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
6+
<link rel="match" href="auto-name-ref.html">
7+
<script src="/common/reftest-wait.js"></script>
8+
<style>
9+
div {
10+
width: 100px;
11+
height: 100px;
12+
}
13+
14+
main {
15+
display: flex;
16+
flex-direction: column;
17+
}
18+
19+
.item {
20+
view-transition-name: match-element;
21+
view-transition-class: item;
22+
}
23+
24+
main.switch .item1 {
25+
order: 2;
26+
}
27+
28+
.item1 {
29+
background: green;
30+
}
31+
32+
.item2 {
33+
background: yellow;
34+
position: relative;
35+
left: 100px;
36+
}
37+
38+
html::view-transition {
39+
background: rebeccapurple;
40+
}
41+
42+
:root { view-transition-name: none; }
43+
html::view-transition-group(.item) {
44+
animation-timing-function: steps(2, start);
45+
animation-play-state: paused;
46+
}
47+
html::view-transition-old(*),
48+
html::view-transition-new(*)
49+
{ animation-play-state: paused; }
50+
html::view-transition-old(*) { animation: unset; opacity: 0 }
51+
html::view-transition-new(*) { animation: unset; opacity: 1 }
52+
53+
/* This should not be used */
54+
html::view-transition-group(unused-id) {
55+
background: red;
56+
}
57+
html::view-transition-old(unused-id),
58+
html::view-transition-new(unused-id) {
59+
opacity: 0;
60+
}
61+
</style>
62+
63+
<main>
64+
<div class="item item1" id="unused-id"></div>
65+
<div class="item item2"></div>
66+
</main>
67+
68+
<script>
69+
failIfNot(document.startViewTransition, "Missing document.startViewTransition");
70+
71+
function runTest() {
72+
document.startViewTransition(() => {
73+
document.querySelector("main").classList.toggle("switch");
74+
}).ready.then(takeScreenshot);
75+
}
76+
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
77+
</script>
78+
79+
</body>
80+
</html>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/parsing/view-transition-name-valid-expected.txt

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11

22
PASS e.style['view-transition-name'] = "none" should set the property value
3+
PASS e.style['view-transition-name'] = "auto" should set the property value
4+
PASS e.style['view-transition-name'] = "match-element" should set the property value
35
PASS e.style['view-transition-name'] = "foo" should set the property value
46
PASS e.style['view-transition-name'] = "bar" should set the property value
57
PASS e.style['view-transition-name'] = "baz" should set the property value
6-
PASS e.style['view-transition-name'] = "auto" should set the property value
78

‎LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/parsing/view-transition-name-valid.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@
1313
<body>
1414
<script>
1515
test_valid_value("view-transition-name", "none");
16+
test_valid_value("view-transition-name", "auto");
17+
test_valid_value("view-transition-name", "match-element");
1618
test_valid_value("view-transition-name", "foo");
1719
test_valid_value("view-transition-name", "bar");
1820
test_valid_value("view-transition-name", "baz");
19-
test_valid_value("view-transition-name", "auto");
2021
</script>
2122
</body>
2223
</html>

‎Source/WebCore/css/CSSProperties.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9479,7 +9479,7 @@
94799479
"view-transition-name": {
94809480
"codegen-properties": {
94819481
"converter": "ViewTransitionName",
9482-
"parser-grammar": "none | auto | <custom-ident>",
9482+
"parser-grammar": "none | auto | match-element | <custom-ident>",
94839483
"settings-flag": "viewTransitionsEnabled"
94849484
},
94859485
"specification": {

‎Source/WebCore/css/CSSValueKeywords.in

+2
Original file line numberDiff line numberDiff line change
@@ -1835,3 +1835,5 @@ most-inline-size
18351835
flip-block
18361836
flip-inline
18371837
flip-start
1838+
// view-transition-name
1839+
match-element

‎Source/WebCore/dom/ViewTransition.cpp

+9-2
Original file line numberDiff line numberDiff line change
@@ -341,19 +341,26 @@ static AtomString effectiveViewTransitionName(RenderLayerModelObject& renderer,
341341
{
342342
if (renderer.isSkippedContent())
343343
return nullAtom();
344+
344345
auto transitionName = renderer.style().viewTransitionName();
345346
if (transitionName.isNone())
346347
return nullAtom();
348+
347349
auto scope = Style::Scope::forOrdinal(originatingElement, transitionName.scopeOrdinal());
348350
if (!scope || scope != &documentScope)
349351
return nullAtom();
352+
350353
if (transitionName.isCustomIdent())
351354
return transitionName.customIdent();
352-
ASSERT(transitionName.isAuto());
355+
356+
ASSERT(transitionName.isAuto() || transitionName.isMatchElement());
357+
353358
if (!renderer.element())
354359
return nullAtom();
355-
if (scope == &Style::Scope::forNode(*renderer.element()) && renderer.element()->hasID())
360+
361+
if (transitionName.isAuto() && scope == &Style::Scope::forNode(*renderer.element()) && renderer.element()->hasID())
356362
return renderer.element()->getIdAttribute();
363+
357364
if (isCrossDocument)
358365
return nullAtom();
359366

‎Source/WebCore/rendering/style/ViewTransitionName.h

+14-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ class ViewTransitionName {
3434
enum class Type : uint8_t {
3535
None,
3636
Auto,
37+
MatchElement,
3738
CustomIdent,
3839
};
3940

@@ -47,6 +48,11 @@ class ViewTransitionName {
4748
return ViewTransitionName(Type::Auto, ordinal);
4849
}
4950

51+
static ViewTransitionName createWithMatchElement(ScopeOrdinal ordinal)
52+
{
53+
return ViewTransitionName(Type::MatchElement, ordinal);
54+
}
55+
5056
static ViewTransitionName createWithCustomIdent(ScopeOrdinal ordinal, AtomString ident)
5157
{
5258
return ViewTransitionName(ordinal, ident);
@@ -62,6 +68,11 @@ class ViewTransitionName {
6268
return m_type == Type::Auto;
6369
}
6470

71+
bool isMatchElement() const
72+
{
73+
return m_type == Type::MatchElement;
74+
}
75+
6576
bool isCustomIdent() const
6677
{
6778
return m_type == Type::CustomIdent;
@@ -75,7 +86,7 @@ class ViewTransitionName {
7586

7687
ScopeOrdinal scopeOrdinal() const
7788
{
78-
ASSERT(isCustomIdent() || isAuto());
89+
ASSERT(!isNone());
7990
return m_scopeOrdinal;
8091
}
8192

@@ -104,6 +115,8 @@ inline TextStream& operator<<(TextStream& ts, const ViewTransitionName& name)
104115
{
105116
if (name.isAuto())
106117
ts << "auto"_s;
118+
else if (name.isMatchElement())
119+
ts << "match-element"_s;
107120
else if (name.isNone())
108121
ts << "none"_s;
109122
else

‎Source/WebCore/style/StyleBuilderConverter.h

+3
Original file line numberDiff line numberDiff line change
@@ -2015,6 +2015,9 @@ inline Style::ViewTransitionName BuilderConverter::convertViewTransitionName(con
20152015
if (value.valueID() == CSSValueAuto)
20162016
return Style::ViewTransitionName::createWithAuto(state.styleScopeOrdinal());
20172017

2018+
if (value.valueID() == CSSValueMatchElement)
2019+
return Style::ViewTransitionName::createWithMatchElement(state.styleScopeOrdinal());
2020+
20182021
return Style::ViewTransitionName::createWithCustomIdent(state.styleScopeOrdinal(), AtomString { primitiveValue->stringValue() });
20192022
}
20202023

0 commit comments

Comments
 (0)