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

Capybara.disable_animation also disables view transitions #2790

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+66 −1
Open

Capybara.disable_animation also disables view transitions #2790

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
2 changes: 1 addition & 1 deletion lib/capybara/server/animation_disabler.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ def directive_nonces(headers)
end

DISABLE_CSS_MARKUP_TEMPLATE = <<~CSS
%<selector>s, %<selector>s::before, %<selector>s::after {
%<selector>s, %<selector>s::before, %<selector>s::after, ::view-transition-group(*) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group

My intention is that this would cover the root animation and any named animations.

transition: none !important;
animation-duration: 0s !important;
animation-delay: 0s !important;
Expand Down
43 changes: 43 additions & 0 deletions lib/capybara/spec/views/with_view_transition.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>with_view_transition</title>
<script src="/jquery.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
const input = $("#button");
const message = $("#message");
input.hide();
message.hide();

$("#root").click(function(event){
document.startViewTransition(() => {
input.show();
});
});

input.click(function(event){
message.show();
});
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The sequence of events:

  1. User clicks link
  2. Button slowly fades into view
  3. Clicking button reveals a message

I chose this flow because even with animations, the browser is still rendering the content immediately and can be "seen" by Capybara. Issuing a click, however, will not be possible for elements which are animating.

});
</script>
<style>
::view-transition-group(root) {
animation-duration: 5s;
}

@keyframes slide-in-from-right {
from {
transform: translateX(1000%);
}
}
</style>
</head>

<body id="with_view_transition">
<a id="root" href='#'>click me to show a form input</a>
<button id="button">Click me</button>
<span id="message">Button clicked</span>
</body>
</html>
22 changes: 22 additions & 0 deletions spec/shared_selenium_session.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,17 @@
@animation_session = Capybara::Session.new(session.mode, TestApp.new)
end

it 'should disable view transitions' do
@animation_session.visit('with_view_transition')
sleep 1
@animation_session.click_link('click me to show a form input')

expect do
@animation_session.click_button("button")
end.not_to raise_error
expect(@animation_session).to have_content("Button clicked")
end

it 'should add CSS to the <head> element' do
@animation_session.visit('with_animation')

Expand Down Expand Up @@ -479,6 +490,17 @@
@animation_session_with_matching_css.click_link('animate me away')
expect(@animation_session_with_matching_css).to have_no_link('animate me away', wait: 0.5)
end

it 'should disable view transitions' do
@animation_session_with_matching_css.visit('with_view_transition')
sleep 1
@animation_session_with_matching_css.click_link('click me to show a form input')

expect do
@animation_session_with_matching_css.click_button("button")
end.not_to raise_error
expect(@animation_session_with_matching_css).to have_content("Button clicked")
end
end

context 'if we pass in css that does not match elements' do
Expand Down