Skip to content
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

Jump to bottom

Revert "Revert "Reland #2 "Implement CSSTransitionDiscrete which enables transitions on discrete properties.""" #38936

Merged
merged 1 commit into from
Mar 10, 2023
Merged

Revert "Revert "Reland #2 "Implement CSSTransitionDiscrete which enables transitions on discrete properties.""" #38936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
51 changes: 51 additions & 0 deletions css/css-transitions/all-with-discrete.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<link rel=author href="mailto:[email protected]">
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div id=target1 class=target>hello</div>
<div id=target2 class=target>hello</div>

<style>
.target {
float: left;
width: 100px;
height: 100px;
}
.target.animated {
float: right;
}

#target1 {
transition: all 1s, float 1s;
}

#target2 {
transition: all 1s;
}
</style>

<script>
promise_test(async () => {
let transitionstartFired = false;
target1.addEventListener('transitionstart', () => {
transitionstartFired = true;
});
await new Promise(resolve => requestAnimationFrame(resolve));
target1.classList.add('animated');
await new Promise(resolve => requestAnimationFrame(resolve));
assert_true(transitionstartFired);
}, 'all with an explicit discrete property should animate.');

promise_test(async () => {
let transitionstartFired = false;
target2.addEventListener('transitionstart', () => {
transitionstartFired = true;
});
await new Promise(resolve => requestAnimationFrame(resolve));
target2.classList.add('animated');
await new Promise(resolve => requestAnimationFrame(resolve));
assert_false(transitionstartFired);
}, 'all without an explicit discrete property should not animate.');
</script>
28 changes: 28 additions & 0 deletions css/css-transitions/display-none-no-animations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<link rel=help href="mailto:[email protected]">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div id=target>target</div>
<style>
#target {
display: none;
transition: 1s;
color: red;
}
#target.animated {
transition: 1s;
color: green;
}
</style>

<script>
test(() => {
target.addEventListener('transitionstart', () => {
assert_unreached('transitionstart should not be fired.');
});
target.classList.add('animated');
assert_equals(target.getAnimations().length, 0,
'There should not be any animations running.');
}, 'Transitions and animations should not occur on display:none elements.');
</script>
12 changes: 6 additions & 6 deletions css/motion/animation/offset-interpolation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
to: 'path("M0 300H 700 Z") 600px 900deg',
method: 'CSS Transitions',
}, [
{at: -0.3, expect: 'path("M0 300H 700 Z") 470px 770deg'},
{at: 0, expect: 'path("M0 300H 700 Z") 500px 800deg'},
{at: 0.3, expect: 'path("M0 300H 700 Z") 530px 830deg'},
{at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'},
{at: 0, expect: 'path("M0 200H 700") 500px 800deg'},
{at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'},
{at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'},
{at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'},
{at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'},
Expand All @@ -29,9 +29,9 @@
to: 'path("M0 0H 300") 600px 0deg',
method: 'CSS Transitions',
}, [
{at: -0.3, expect: 'path("M0 0H 170") 470px 0deg'},
{at: 0, expect: 'path("M0 0H 200") 500px 0deg'},
{at: 0.3, expect: 'path("M0 0H 230") 530px 0deg'},
{at: -0.3, expect: 'path("M0 0H 170") 470px auto 0deg'},
{at: 0, expect: 'path("M0 0H 200") 500px auto 0deg'},
{at: 0.3, expect: 'path("M0 0H 230") 530px auto 0deg'},
{at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'},
{at: 1, expect: 'path("M0 0H 300") 600px 0deg'},
{at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'},
Expand Down
2 changes: 1 addition & 1 deletion css/support/interpolation-testcommon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
target.style.setProperty(property, isNeutralKeyframe(from) ? '' : from);
},
nonInterpolationExpectations: function(from, to) {
return expectFlip(from, to, -Infinity);
return expectFlip(from, to, 0.5);
},
notAnimatableExpectations: function(from, to, underlying) {
return expectFlip(from, to, -Infinity);
Expand Down