capybara icon indicating copy to clipboard operation
capybara copied to clipboard

Added `Capybara.disable_animation_extra_css` option to insert extra CSS in Capybara::Server::AnimationDisabler::DISABLE_MARKUP_TEMPLATE

Open ndbroadbent opened this issue 4 years ago • 2 comments

This is a follow-up for my previous PR: https://github.com/teamcapybara/capybara/pull/2399

I've added a new Capybara.disable_animation_extra_css option that can be used to add additional CSS rules to the AnimationDisabler middleware, in case there are any custom ways that people need to disable animation.

I personally need to use caret-color: transparent; to hide any cursors in inputs. I have some screenshot tests that ensure that some inputs are visually correct on the page, so these would sporadically fail if the cursor appeared in the reference screenshot, and then disappeared in the test screenshot.

I'm currently doing this:

  Capybara::Server::AnimationDisabler.class_eval do
    # rubocop:disable Lint/ConstantDefinitionInBlock
    DISABLE_MARKUP_TEMPLATE_CARET_TRANSPARENT = <<~HTML
      <script defer>(typeof jQuery !== 'undefined') && (jQuery.fx.off = true);</script>
      <style>
        %<selector>s, %<selector>s::before, %<selector>s::after {
          transition: none !important;
          animation-duration: 0s !important;
          animation-delay: 0s !important;
          scroll-behavior: auto !important;
          caret-color: transparent;
        }
      </style>
    HTML
    # rubocop:enable Lint/ConstantDefinitionInBlock

    def initialize(app)
      @app = app
      @disable_markup = format(
        DISABLE_MARKUP_TEMPLATE_CARET_TRANSPARENT,
        selector: self.class.selector_for(Capybara.disable_animation)
      )
    end
  end

I'd like to get rid of the class_eval and replace it with this line: Capybara.disable_animation_extra_css = 'caret-color: transparent;'

ndbroadbent avatar Oct 30 '20 09:10 ndbroadbent

I don't want to add another setting for this. If you implement it so Capybara.disable_animation optionally accepts multiple arguments I'd accept it

Capybara.disable_animation = true, 'caret-color: transparent;'

for instance

twalpole avatar Oct 31 '20 18:10 twalpole

I would love to have the feature @twalpole mentioned. Did this ever get implemented? The default disable_animations doesn't work for Bootstrap 4.6 modal fades.

ghost avatar Dec 29 '23 17:12 ghost