Merge pull request #4629 from edx/anton/disable-css-animations-in-bok-choy

Disable css3 animations in bok-choy tests.

common/test/acceptance/pages/studio/utils.py

@@ -2,6 +2,7 @@
 Utility methods useful for Studio page tests.
 """
 from bok_choy.promise import EmptyPromise
+from ...tests.helpers import disable_animations
 
 
 def click_css(page, css, source_index=0, require_notification=True):
@@ -18,9 +19,8 @@ def click_css(page, css, source_index=0, require_notification=True):
         # because otherwise you will trigger a extra query on a remote element.
         return el.is_displayed() and all(size > 0 for size in el.size.itervalues())
 
-    # Disable jQuery animations for faster testing with more reliable synchronization
-    page.browser.execute_script("jQuery.fx.off = true;")
-
+    # Disable all animations for faster testing with more reliable synchronization
+    disable_animations(page)
     # Click on the element in the browser
     page.q(css=css).filter(lambda el: _is_visible(el)).nth(source_index).click()
 

common/test/acceptance/tests/helpers.py

@@ -71,6 +71,99 @@ def load_data_str(rel_path):
         return data_file.read()
 
 
+def disable_animations(page):
+    """
+    Disable jQuery and CSS3 animations.
+    """
+    disable_jquery_animations(page)
+    disable_css_animations(page)
+
+
+def enable_animations(page):
+    """
+    Enable jQuery and CSS3 animations.
+    """
+    enable_jquery_animations(page)
+    enable_css_animations(page)
+
+
+def disable_jquery_animations(page):
+    """
+    Disable jQuery animations.
+    """
+    page.browser.execute_script("jQuery.fx.off = true;")
+
+
+def enable_jquery_animations(page):
+    """
+    Enable jQuery animations.
+    """
+    page.browser.execute_script("jQuery.fx.off = false;")
+
+
+def disable_css_animations(page):
+    """
+    Disable CSS3 animations, transitions, transforms.
+    """
+    page.browser.execute_script("""
+        var id = 'no-transitions';
+
+        // if styles were already added, just do nothing.
+        if (document.getElementById(id)) {
+            return;
+        }
+
+        var css = [
+                '* {',
+                    '-webkit-transition: none !important;',
+                    '-moz-transition: none !important;',
+                    '-o-transition: none !important;',
+                    '-ms-transition: none !important;',
+                    'transition: none !important;',
+                    '-webkit-transition-property: none !important;',
+                    '-moz-transition-property: none !important;',
+                    '-o-transition-property: none !important;',
+                    '-ms-transition-property: none !important;',
+                    'transition-property: none !important;',
+                    '-webkit-transform: none !important;',
+                    '-moz-transform: none !important;',
+                    '-o-transform: none !important;',
+                    '-ms-transform: none !important;',
+                    'transform: none !important;',
+                    '-webkit-animation: none !important;',
+                    '-moz-animation: none !important;',
+                    '-o-animation: none !important;',
+                    '-ms-animation: none !important;',
+                    'animation: none !important;',
+                '}'
+            ].join(''),
+            head = document.head || document.getElementsByTagName('head')[0],
+            styles = document.createElement('style');
+
+        styles.id = id;
+        styles.type = 'text/css';
+        if (styles.styleSheet){
+          styles.styleSheet.cssText = css;
+        } else {
+          styles.appendChild(document.createTextNode(css));
+        }
+
+        head.appendChild(styles);
+    """)
+
+
+def enable_css_animations(page):
+    """
+    Enable CSS3 animations, transitions, transforms.
+    """
+    page.browser.execute_script("""
+        var styles = document.getElementById('no-transitions'),
+            head = document.head || document.getElementsByTagName('head')[0];
+
+        head.removeChild(styles)
+    """)
+
+
 class UniqueCourseTest(WebAppTest):
     """
     Test that provides a unique course ID.