unpoly-rails 0.26.2 → 0.27.0

data/spec_app/spec/javascripts/up/history_spec.js.coffee

@@ -37,7 +37,7 @@ describe 'up.history', ->
           $element = up.hello(affix('a[href="/three"][up-back]').text('text'))
           expect($element.attr('up-href')).toBeUndefined()
 
-    describe 'scroll restauration', ->
+    describe 'scroll restoration', ->
 
       describeCapability 'canPushState', ->
 
@@ -96,3 +96,102 @@ describe 'up.history', ->
                   respond() # we need to respond since we've never requested /three with the popTarget
                   expect($('.viewport').scrollTop()).toBe(250)
                   done()
+
+    describe 'events', ->
+
+      describeCapability 'canPushState', ->
+
+        it 'emits up:history:* events as the user goes forwards and backwards through history', (done) ->
+          up.proxy.config.cacheSize = 0
+          up.history.config.popTargets = ['.viewport']
+
+          affix('.viewport .content')
+          respond = =>
+            @respondWith """
+              <div class="viewport">
+                <div class="content">content</div>
+              </div>
+              """
+
+          events = []
+          u.each ['up:history:pushed', 'up:history:restored'], (eventName) ->
+            up.on eventName, (event) ->
+              events.push [eventName, event.url]
+
+          normalize = up.history.normalizeUrl
+
+          up.replace('.content', '/one')
+          respond()
+
+          expect(events).toEqual [
+            ['up:history:pushed', normalize('/one')]
+          ]
+
+          up.replace('.content', '/two')
+          respond()
+
+          expect(events).toEqual [
+            ['up:history:pushed', normalize('/one')]
+            ['up:history:pushed', normalize('/two')]
+          ]
+
+          up.replace('.content', '/three')
+          respond()
+
+          expect(events).toEqual [
+            ['up:history:pushed', normalize('/one')]
+            ['up:history:pushed', normalize('/two')]
+            ['up:history:pushed', normalize('/three')]
+          ]
+
+          history.back()
+          u.setTimer 50, ->
+            respond()
+
+            expect(events).toEqual [
+              ['up:history:pushed', normalize('/one')]
+              ['up:history:pushed', normalize('/two')]
+              ['up:history:pushed', normalize('/three')]
+              ['up:history:restored', normalize('/two')]
+            ]
+
+            history.back()
+            u.setTimer 50, ->
+              respond()
+
+              expect(events).toEqual [
+                ['up:history:pushed', normalize('/one')]
+                ['up:history:pushed', normalize('/two')]
+                ['up:history:pushed', normalize('/three')]
+                ['up:history:restored', normalize('/two')]
+                ['up:history:restored', normalize('/one')]
+              ]
+
+              history.forward()
+              u.setTimer 50, ->
+                respond()
+
+                expect(events).toEqual [
+                  ['up:history:pushed', normalize('/one')]
+                  ['up:history:pushed', normalize('/two')]
+                  ['up:history:pushed', normalize('/three')]
+                  ['up:history:restored', normalize('/two')]
+                  ['up:history:restored', normalize('/one')]
+                  ['up:history:restored', normalize('/two')]
+                ]
+
+                history.forward()
+                u.setTimer 50, ->
+                  respond() # we need to respond since we've never requested /three with the popTarget
+
+                  expect(events).toEqual [
+                    ['up:history:pushed', normalize('/one')]
+                    ['up:history:pushed', normalize('/two')]
+                    ['up:history:pushed', normalize('/three')]
+                    ['up:history:restored', normalize('/two')]
+                    ['up:history:restored', normalize('/one')]
+                    ['up:history:restored', normalize('/two')]
+                    ['up:history:restored', normalize('/three')]
+                  ]
+
+                  done()

data/spec_app/spec/javascripts/up/link_spec.js.coffee

@@ -367,22 +367,24 @@ describe 'up.link', ->
 
         describe 'with [up-transition] modifier', ->
 
-          it 'morphs between the old and new target element', (done) ->
-            affix('.target.old')
-            $link = affix('a[href="/path"][up-target=".target"][up-transition="cross-fade"][up-duration="300"][up-easing="linear"]')
-            $link.click()
-            @respondWith '<div class="target new">new text</div>'
-
-            $oldGhost = $('.target.old.up-ghost')
-            $newGhost = $('.target.new.up-ghost')
-            expect($oldGhost).toExist()
-            expect($newGhost).toExist()
-            expect(u.opacity($oldGhost)).toBeAround(1, 0.15)
-            expect(u.opacity($newGhost)).toBeAround(0, 0.15)
-            u.setTimer 150, ->
-              expect(u.opacity($oldGhost)).toBeAround(0.5, 0.15)
-              expect(u.opacity($newGhost)).toBeAround(0.5, 0.15)
-              done()
+          describeCapability 'canCssTransition', ->
+
+            it 'morphs between the old and new target element', (done) ->
+              affix('.target.old')
+              $link = affix('a[href="/path"][up-target=".target"][up-transition="cross-fade"][up-duration="300"][up-easing="linear"]')
+              $link.click()
+              @respondWith '<div class="target new">new text</div>'
+
+              $oldGhost = $('.target.old.up-ghost')
+              $newGhost = $('.target.new.up-ghost')
+              expect($oldGhost).toExist()
+              expect($newGhost).toExist()
+              expect(u.opacity($oldGhost)).toBeAround(1, 0.15)
+              expect(u.opacity($newGhost)).toBeAround(0, 0.15)
+              u.setTimer 150, ->
+                expect(u.opacity($oldGhost)).toBeAround(0.5, 0.15)
+                expect(u.opacity($newGhost)).toBeAround(0.5, 0.15)
+                done()
 
       it 'does not add a history entry when an up-history attribute is set to "false"', ->
         oldPathname = location.pathname

data/spec_app/spec/javascripts/up/modal_spec.js.coffee

@@ -68,20 +68,21 @@ describe 'up.modal', ->
               expect(parseInt($body.css('padding-right'))).toBe(0)
               done()
 
-        it "gives the scrollbar to .up-modal instead of .up-modal-viewport while animating, so we don't see scaled scrollbars in a zoom-in animation", (done) ->
-          openPromise = up.modal.extract('.container', '<div class="container">text</div>', animation: 'fade-in', duration: 100)
-          $modal = $('.up-modal')
-          $viewport = $modal.find('.up-modal-viewport')
-          expect($modal.css('overflow-y')).toEqual('scroll')
-          expect($viewport.css('overflow-y')).toEqual('hidden')
-          openPromise.then ->
-            expect($modal.css('overflow-y')).toEqual('auto')
-            expect($viewport.css('overflow-y')).toEqual('scroll')
-            closePromise = up.modal.close(animation: 'fade-out', duration: 100)
+        describeCapability 'canCssTransition', ->
+
+          it "gives the scrollbar to .up-modal instead of .up-modal-viewport while animating, so we don't see scaled scrollbars in a zoom-in animation", (done) ->
+            openPromise = up.modal.extract('.container', '<div class="container">text</div>', animation: 'fade-in', duration: 100)
+            $modal = $('.up-modal')
+            $viewport = $modal.find('.up-modal-viewport')
             expect($modal.css('overflow-y')).toEqual('scroll')
             expect($viewport.css('overflow-y')).toEqual('hidden')
-            done()
-
+            openPromise.then ->
+              expect($modal.css('overflow-y')).not.toEqual('scroll')
+              expect($viewport.css('overflow-y')).toEqual('scroll')
+              closePromise = up.modal.close(animation: 'fade-out', duration: 100)
+              expect($modal.css('overflow-y')).toEqual('scroll')
+              expect($viewport.css('overflow-y')).toEqual('hidden')
+              done()
 
         it 'does not add right padding to the body if the body has overflow-y: hidden', (done) ->
           restoreBody = u.temporaryCss($('body'), 'overflow-y': 'hidden')
@@ -133,99 +134,95 @@ describe 'up.modal', ->
 
         it 'does not open multiple modals or pad the body twice if the user starts loading a second modal before the first was done loading', (done) ->
           up.modal.config.closeDuration = 10
-          promise1 = up.modal.visit('/path1', target: '.container', animation: 'fade-in', duration: 100)
-          promise2 = up.modal.visit('/path2', target: '.container', animation: 'fade-in', duration: 100)
-          expect(jasmine.Ajax.requests.count()).toBe(2)
-          request1 = jasmine.Ajax.requests.at(0)
-          request2 = jasmine.Ajax.requests.at(1)
-
-          u.setTimer 10, =>
-            @respondWith('<div class="container">response1</div>', request: request1)
-            u.setTimer 10, =>
-              @respondWith('<div class="container">response2</div>', request: request2)
-              u.setTimer 110, =>
-                expect($('.up-modal').length).toBe(1)
-                expect($('.up-modal-dialog').length).toBe(1)
-                expect($('.container')).toHaveText('response2')
-                bodyPadding = parseInt($('body').css('padding-right'))
-                expect(bodyPadding).toBeAround(assumedScrollbarWidth, 10)
-                expect(bodyPadding).not.toBeAround(2 * assumedScrollbarWidth, 2 * 5)
-                done()
-
-        it 'closes the current modal and wait for its close animation to finish before starting the open animation of a second modal', (done) ->
-          up.modal.config.openAnimation = 'fade-in'
-          up.modal.config.openDuration = 5
-          up.modal.config.closeAnimation = 'fade-out'
-          up.modal.config.closeDuration = 50
+          promise1 = up.modal.visit('/path1', target: '.container', animation: 'fade-in', duration: 50)
+          promise2 = up.modal.visit('/path2', target: '.container', animation: 'fade-in', duration: 50)
+          @respondWith('<div class="container">response1</div>')
+
+          u.setTimer 80, =>
+            @respondWith('<div class="container">response2</div>')
+            $.when(promise1, promise2).then ->
+              expect($('.up-modal').length).toBe(1)
+              expect($('.up-modal-dialog').length).toBe(1)
+              expect($('.container')).toHaveText('response2')
+              bodyPadding = parseInt($('body').css('padding-right'))
+              expect(bodyPadding).toBeAround(assumedScrollbarWidth, 10)
+              expect(bodyPadding).not.toBeAround(2 * assumedScrollbarWidth, 2 * 5)
+              done()
 
-          events = []
-          u.each ['up:modal:open', 'up:modal:opened', 'up:modal:close', 'up:modal:closed'], (event) ->
-            up.on event, ->
-              events.push(event)
+        describeCapability 'canCssTransition', ->
 
-          up.modal.extract('.target', '<div class="target">response1</div>')
+          it 'closes the current modal and wait for its close animation to finish before starting the open animation of a second modal', (done) ->
+            up.modal.config.openAnimation = 'fade-in'
+            up.modal.config.openDuration = 5
+            up.modal.config.closeAnimation = 'fade-out'
+            up.modal.config.closeDuration = 50
 
-          # First modal is starting opening animation
-          expect(events).toEqual ['up:modal:open']
-          expect($('.target')).toHaveText('response1')
+            events = []
+            u.each ['up:modal:open', 'up:modal:opened', 'up:modal:close', 'up:modal:closed'], (event) ->
+              up.on event, ->
+                events.push(event)
 
-          u.setTimer 40, ->
-            # First modal has completed opening animation
-            expect(events).toEqual ['up:modal:open', 'up:modal:opened']
-            expect($('.target')).toHaveText('response1')
+            up.modal.extract('.target', '<div class="target">response1</div>')
 
-            up.modal.extract('.target', '<div class="target">response2</div>')
-
-            # First modal is starting close animation. Second modal waits for that.
-            expect(events).toEqual ['up:modal:open', 'up:modal:opened', 'up:modal:open', 'up:modal:close']
+            # First modal is starting opening animation
+            expect(events).toEqual ['up:modal:open']
             expect($('.target')).toHaveText('response1')
 
             u.setTimer 40, ->
-
-              # Second modal is still waiting for first modal's closing animaton to finish.
-              expect(events).toEqual ['up:modal:open', 'up:modal:opened', 'up:modal:open', 'up:modal:close']
+              # First modal has completed opening animation
+              expect(events).toEqual ['up:modal:open', 'up:modal:opened']
               expect($('.target')).toHaveText('response1')
 
-              u.setTimer 100, ->
+              up.modal.extract('.target', '<div class="target">response2</div>')
 
-                # First modal has finished closing, second modal has finished opening.
-                expect(events).toEqual ['up:modal:open', 'up:modal:opened', 'up:modal:open', 'up:modal:close', 'up:modal:closed', 'up:modal:opened']
-                expect($('.target')).toHaveText('response2')
+              expect($('.target')).toHaveText('response1')
 
-                done()
+              u.setTimer 40, ->
 
-        it 'closes an opening modal if a second modal starts opening before the first modal has finished its open animation', (done) ->
-          up.modal.config.openAnimation = 'fade-in'
-          up.modal.config.openDuration = 50
-          up.modal.config.closeAnimation = 'fade-out'
-          up.modal.config.closeDuration = 50
+                # Second modal is still waiting for first modal's closing animaton to finish.
+                expect(events).toEqual ['up:modal:open', 'up:modal:opened', 'up:modal:close']
+                expect($('.target')).toHaveText('response1')
 
-          up.modal.extract('.target', '<div class="target">response1</div>')
+                u.setTimer 100, ->
 
-          u.setTimer 10, ->
-            # First modal is still in its opening animation
-            expect($('.target')).toHaveText('response1')
+                  # First modal has finished closing, second modal has finished opening.
+                  expect(events).toEqual ['up:modal:open', 'up:modal:opened', 'up:modal:close', 'up:modal:closed', 'up:modal:open', 'up:modal:opened']
+                  expect($('.target')).toHaveText('response2')
 
-            up.modal.extract('.target', '<div class="target">response2</div>')
+                  done()
 
-            # First modal is starting close animation. Second modal waits for that.
-            expect($('.target')).toHaveText('response1')
+          it 'closes an opening modal if a second modal starts opening before the first modal has finished its open animation', (done) ->
+            up.modal.config.openAnimation = 'fade-in'
+            up.modal.config.openDuration = 50
+            up.modal.config.closeAnimation = 'fade-out'
+            up.modal.config.closeDuration = 50
+
+            up.modal.extract('.target', '<div class="target">response1</div>')
 
             u.setTimer 10, ->
-              # Second modal is still waiting for first modal's closing animaton to finish.
+              # First modal is still in its opening animation
               expect($('.target')).toHaveText('response1')
 
-              u.setTimer 90, ->
-                # First modal has finished closing, second modal has finished opening.
-                expect($('.target')).toHaveText('response2')
+              up.modal.extract('.target', '<div class="target">response2</div>')
+
+              # First modal is starting close animation. Second modal waits for that.
+              expect($('.target')).toHaveText('response1')
 
-                done()
+              u.setTimer 10, ->
+                # Second modal is still waiting for first modal's closing animaton to finish.
+                expect($('.target')).toHaveText('response1')
+
+                u.setTimer 90, ->
+                  # First modal has finished closing, second modal has finished opening.
+                  expect($('.target')).toHaveText('response2')
+
+                  done()
 
         it 'uses the correct flavor config for the first and second modal', (done) ->
           up.modal.config.openAnimation = 'fade-in'
-          up.modal.config.openDuration = 10
+          up.modal.config.openDuration = 20
           up.modal.config.closeAnimation = 'fade-out'
-          up.modal.config.closeDuration = 10
+          up.modal.config.closeDuration = 20
           up.modal.flavor 'drawer',
             openAnimation: 'move-from-right'
             closeAnimation: 'move-to-right'
@@ -245,24 +242,31 @@ describe 'up.modal', ->
             { animation: 'fade-in', text: 'response1' }
           ]
 
-          up.modal.extract('.target', '<div class="target">response2</div>', flavor: 'drawer')
+          u.setTimer 30, ->
 
-          expect(animations).toEqual [
-            { animation: 'fade-in', text: 'response1' },
-            { animation: 'fade-out', text: 'response1' }
-          ]
+            # first modal is now done animating
+            expect(animations).toEqual [
+              { animation: 'fade-in', text: 'response1' }
+            ]
 
-          u.setTimer 20, ->
 
+            up.modal.extract('.target', '<div class="target">response2</div>', flavor: 'drawer')
             expect(animations).toEqual [
               { animation: 'fade-in', text: 'response1' },
               { animation: 'fade-out', text: 'response1' },
-              { animation: 'move-from-right', text: 'response2' }
             ]
 
-            expect($('.up-modal').attr('up-flavor')).toEqual('drawer')
+            u.setTimer 30, ->
 
-            done()
+              expect(animations).toEqual [
+                { animation: 'fade-in', text: 'response1' },
+                { animation: 'fade-out', text: 'response1' },
+                { animation: 'move-from-right', text: 'response2' }
+              ]
+
+              expect($('.up-modal').attr('up-flavor')).toEqual('drawer')
+
+              done()
 
 
         it 'does not explode if up.modal.close() was called before the response was received', ->
@@ -278,13 +282,13 @@ describe 'up.modal', ->
 
         it 'returns the URL behind the modal overlay', (done) ->
           up.history.replace('/foo')
-          expect(up.modal.coveredUrl()).toBeUndefined()
+          expect(up.modal.coveredUrl()).toBeMissing()
           visitPromise = up.modal.visit('/bar', target: '.container')
           @respondWith('<div class="container">text</div>')
           visitPromise.then ->
             expect(up.modal.coveredUrl()).toEndWith('/foo')
             up.modal.close().then ->
-              expect(up.modal.coveredUrl()).toBeUndefined()
+              expect(up.modal.coveredUrl()).toBeMissing()
               done()
 
     describe 'up.modal.flavor', ->
@@ -327,7 +331,7 @@ describe 'up.modal', ->
       beforeEach ->
         @stubFollow = =>
           @$link = affix('a[href="/path"][up-modal=".target"]')
-          @followSpy = up.modal.knife.mock('follow').and.returnValue(u.resolvedPromise())
+          @followSpy = up.modal.knife.mock('followAsap').and.returnValue(u.resolvedPromise())
           @defaultSpy = up.link.knife.mock('allowDefault').and.callFake((event) -> event.preventDefault())
 
       it 'opens the clicked link in a modal', ->
@@ -405,10 +409,9 @@ describe 'up.modal', ->
 
       describe 'when clicked inside a modal', ->
       
-        it 'closes the open modal and prevents the default action', ->
-          $modal = affix('.up-modal')
-          $link = $modal.affix('a[up-close]') # link is within the modal
-          up.hello($link)
+        it 'closes the open modal and prevents the default action', (done) ->
+          up.modal.extract('.target', '<div class="target"><a up-close>text</a></div>', animation: false)
+          $link = $('.up-modal a[up-close]') # link is within the modal
           wasDefaultPrevented = false
           wasClosed = false
           up.on 'click', 'a[up-close]', (event) ->
@@ -417,8 +420,10 @@ describe 'up.modal', ->
           up.on 'up:modal:close', ->
             wasClosed = true
           $link.click()
-          expect(wasClosed).toBe(true)
-          expect(wasDefaultPrevented).toBe(true)
+          u.nextFrame ->
+            expect(wasClosed).toBe(true)
+            expect(wasDefaultPrevented).toBe(true)
+            done()
 
       describe 'when no modal is open', ->
 

data/spec_app/spec/javascripts/up/motion_spec.js.coffee

@@ -60,101 +60,115 @@ describe 'up.motion', ->
 
       describe 'when called with an element or selector', ->
 
-        it 'cancels an existing animation on the given element by instantly jumping to the last frame', ->
-          $element = affix('.element').text('content')
-          up.animate($element, { 'font-size': '40px', 'opacity': '0.33' }, duration: 10000)
-          up.motion.finish($element)
-          expect($element.css('font-size')).toEqual('40px')
-          expect($element.css('opacity')).toEqual('0.33')
-
-        it 'cancels animations on children of the given element', ->
-          $parent = affix('.element')
-          $child = $parent.affix('.child')
-          up.animate($child, { 'font-size': '40px' }, duration: 10000)
-          up.motion.finish($parent)
-          expect($child.css('font-size')).toEqual('40px')
-
-        it 'does not cancel animations on other elements', ->
-          $element1 = affix('.element1').text('content1')
-          $element2 = affix('.element2').text('content2')
-          up.animate($element1, 'fade-in', duration: 10000)
-          up.animate($element2, 'fade-in', duration: 10000)
-          up.motion.finish($element1)
-          expect(Number($element1.css('opacity'))).toEqual(1)
-          expect(Number($element2.css('opacity'))).toEqual(0, 0.1)
-
-        it 'restores existing transitions on the element', ->
-          $element = affix('.element').text('content')
-          $element.css('transition': 'font-size 3s ease')
-          oldTransitionProperty = $element.css('transition-property')
-          expect(oldTransitionProperty).toContain('font-size') # be paranoid
-          up.animate($element, 'fade-in', duration: 10000)
-          up.motion.finish($element)
-          expect(u.opacity($element)).toEqual(1)
-          currentTransitionProperty = $element.css('transition-property')
-          expect(currentTransitionProperty).toEqual(oldTransitionProperty)
-          expect(currentTransitionProperty).toContain('font-size')
-          expect(currentTransitionProperty).not.toContain('opacity')
+        describeCapability 'canCssTransition', ->
 
-        it 'cancels an existing transition on the element by instantly jumping to the last frame', ->
-          $old = affix('.old').text('old content')
-          $new = affix('.new').text('new content')
+          it 'cancels an existing animation on the given element by instantly jumping to the last frame', ->
+            $element = affix('.element').text('content')
+            up.animate($element, { 'font-size': '40px', 'opacity': '0.33' }, duration: 10000)
+            up.motion.finish($element)
+            expect($element.css('font-size')).toEqual('40px')
+            expect($element.css('opacity')).toEqual('0.33')
+
+          it 'cancels animations on children of the given element', ->
+            $parent = affix('.element')
+            $child = $parent.affix('.child')
+            up.animate($child, { 'font-size': '40px' }, duration: 10000)
+            up.motion.finish($parent)
+            expect($child.css('font-size')).toEqual('40px')
+
+          it 'does not cancel animations on other elements', ->
+            $element1 = affix('.element1').text('content1')
+            $element2 = affix('.element2').text('content2')
+            up.animate($element1, 'fade-in', duration: 10000)
+            up.animate($element2, 'fade-in', duration: 10000)
+            up.motion.finish($element1)
+            expect(Number($element1.css('opacity'))).toEqual(1)
+            expect(Number($element2.css('opacity'))).toEqual(0, 0.1)
+
+          it 'restores existing transitions on the element', ->
+            $element = affix('.element').text('content')
+            $element.css('transition': 'font-size 3s ease')
+            oldTransitionProperty = $element.css('transition-property')
+            expect(oldTransitionProperty).toBeDefined()
+            expect(oldTransitionProperty).toContain('font-size') # be paranoid
+            up.animate($element, 'fade-in', duration: 10000)
+            up.motion.finish($element)
+            expect(u.opacity($element)).toEqual(1)
+            currentTransitionProperty = $element.css('transition-property')
+            expect(currentTransitionProperty).toEqual(oldTransitionProperty)
+            expect(currentTransitionProperty).toContain('font-size')
+            expect(currentTransitionProperty).not.toContain('opacity')
+
+          it 'cancels an existing transition on the element by instantly jumping to the last frame', ->
+            $old = affix('.old').text('old content')
+            $new = affix('.new').text('new content')
 
-          up.morph($old, $new, 'cross-fade', duration: 2000)
-          expect($('.up-ghost').length).toBe(2)
+            up.morph($old, $new, 'cross-fade', duration: 2000)
+            expect($('.up-ghost').length).toBe(2)
 
-          up.motion.finish($old)
+            up.motion.finish($old)
 
-          expect($('.up-ghost').length).toBe(0)
-          expect($old.css('display')).toEqual('none')
-          expect($new.css('display')).toEqual('block')
+            expect($('.up-ghost').length).toBe(0)
+            expect($old.css('display')).toEqual('none')
+            expect($new.css('display')).toEqual('block')
 
-        it 'can be called on either element involved in a transition', ->
-          $old = affix('.old').text('old content')
-          $new = affix('.new').text('new content')
+          it 'can be called on either element involved in a transition', ->
+            $old = affix('.old').text('old content')
+            $new = affix('.new').text('new content')
 
-          up.morph($old, $new, 'cross-fade', duration: 2000)
-          expect($('.up-ghost').length).toBe(2)
+            up.morph($old, $new, 'cross-fade', duration: 2000)
+            expect($('.up-ghost').length).toBe(2)
 
-          up.motion.finish($new)
+            up.motion.finish($new)
 
-          expect($('.up-ghost').length).toBe(0)
-          expect($old.css('display')).toEqual('none')
-          expect($new.css('display')).toEqual('block')
+            expect($('.up-ghost').length).toBe(0)
+            expect($old.css('display')).toEqual('none')
+            expect($new.css('display')).toEqual('block')
 
 
-        it 'cancels transitions on children of the given element', ->
-          $parent = affix('.parent')
-          $old = $parent.affix('.old').text('old content')
-          $new = $parent.affix('.new').text('new content')
+          it 'cancels transitions on children of the given element', ->
+            $parent = affix('.parent')
+            $old = $parent.affix('.old').text('old content')
+            $new = $parent.affix('.new').text('new content')
 
-          up.morph($old, $new, 'cross-fade', duration: 2000)
-          expect($('.up-ghost').length).toBe(2)
+            up.morph($old, $new, 'cross-fade', duration: 2000)
+            expect($('.up-ghost').length).toBe(2)
 
-          up.motion.finish($parent)
+            up.motion.finish($parent)
 
-          expect($('.up-ghost').length).toBe(0)
-          expect($old.css('display')).toEqual('none')
-          expect($new.css('display')).toEqual('block')
+            expect($('.up-ghost').length).toBe(0)
+            expect($old.css('display')).toEqual('none')
+            expect($new.css('display')).toEqual('block')
+
+        describeFallback 'canCssTransition', ->
+
+          it 'does nothing'
 
       describe 'when called without arguments', ->
 
-        it 'cancels all animations on the screen', ->
-          $element1 = affix('.element1').text('content1')
-          $element2 = affix('.element2').text('content2')
+        describeCapability 'canCssTransition', ->
+
+          it 'cancels all animations on the screen', ->
+            $element1 = affix('.element1').text('content1')
+            $element2 = affix('.element2').text('content2')
+
+            up.animate($element1, 'fade-in', duration: 3000)
+            up.animate($element2, 'fade-in', duration: 3000)
+
+            expect(u.opacity($element1)).toBeAround(0.0, 0.1)
+            expect(u.opacity($element2)).toBeAround(0.0, 0.1)
+
+            up.motion.finish()
 
-          up.animate($element1, 'fade-in', duration: 3000)
-          up.animate($element2, 'fade-in', duration: 3000)
+            $element1 = $('.element1')
+            $element2 = $('.element2')
+            expect(u.opacity($element1)).toBe(1.0)
+            expect(u.opacity($element2)).toBe(1.0)
 
-          expect(u.opacity($element1)).toBeAround(0.0, 0.1)
-          expect(u.opacity($element2)).toBeAround(0.0, 0.1)
+        describeFallback 'canCssTransition', ->
 
-          up.motion.finish()
+          it 'does nothing'
 
-          $element1 = $('.element1')
-          $element2 = $('.element2')
-          expect(u.opacity($element1)).toBe(1.0)
-          expect(u.opacity($element2)).toBe(1.0)
 
     describe 'up.morph', ->