upjs-rails 0.10.5 → 0.11.0

data/lib/assets/javascripts/up/motion.js.coffee

@@ -155,21 +155,49 @@ up.motion = (->
     
   GHOSTING_PROMISE_KEY = 'up-ghosting-promise'
 
-  withGhosts = ($old, $new, block) ->
-    oldCopy = null
-    newCopy = null
+  withGhosts = ($old, $new, options, block) ->
+
+    oldCopy = undefined
+    newCopy = undefined
+    oldScrollTop = undefined
+    newScrollTop = undefined
+
+    $viewport = up.layout.viewportOf($old)
 
     u.temporaryCss $new, display: 'none', ->
-      oldCopy = prependGhost($old)
+      # Within this block, $new is hidden but $old is visible
+      oldCopy = prependCopy($old, $viewport)
       oldCopy.$ghost.addClass('up-destroying')
       oldCopy.$bounds.addClass('up-destroying')
+      # Remember the previous scroll position in case we will reveal $new below.
+      oldScrollTop = $viewport.scrollTop()
+      # $viewport.scrollTop(oldScrollTop + 1)
+
     u.temporaryCss $old, display: 'none', ->
-      newCopy = prependGhost($new)
-    # $old should take up space in the page flow until the transition ends
-    $old.css(visibility: 'hidden')
-    
-    showNew = u.temporaryCss($new, display: 'none')
+      # Within this block, $old is hidden but $new is visible
+      up.reveal($new, viewport: $viewport) if options.reveal
+      newCopy = prependCopy($new, $viewport)
+      newScrollTop = $viewport.scrollTop()
+
+    # Since we have scrolled the viewport (containing both $old and $new),
+    # we must shift the old copy so it looks like it it is still sitting
+    # in the same position.
+    oldCopy.moveTop(newScrollTop - oldScrollTop)
+
+    # Hide $old since we no longer need it.
+    $old.hide()
+
+    # We will let $new take up space in the element flow, but hide it.
+    # The user will only see the two animated ghosts until the transition
+    # is over.
+    showNew = u.temporaryCss($new, visibility: 'hidden')
+
     promise = block(oldCopy.$ghost, newCopy.$ghost)
+
+    # Make a way to look at $old and $new and see if an animation is
+    # already in progress. If someone attempted a new animation on the
+    # same elements, the stored promises would be resolved by the second
+    # animation call, making the transition jump to the last frame instantly.
     $old.data(GHOSTING_PROMISE_KEY, promise)
     $new.data(GHOSTING_PROMISE_KEY, promise)
     
@@ -179,9 +207,6 @@ up.motion = (->
       oldCopy.$bounds.remove()
       newCopy.$bounds.remove()
       # Now that the transition is over we show $new again.
-      # Since we expect $old to be removed in a heartbeat,
-      # $new should take up space
-      $old.css(display: 'none')
       showNew()
 
     promise
@@ -207,11 +232,11 @@ up.motion = (->
       u.debug('Canceling existing ghosting on %o', $element)
       existingGhosting.resolve?()
       
-  assertIsDeferred = (object, origin) ->
+  assertIsDeferred = (object, source) ->
     if u.isDeferred(object)
       object
     else
-      u.error("Did not return a promise with .then and .resolve methods: %o", origin)
+      u.error("Did not return a promise with .then and .resolve methods: %o", source)
 
   ###*
   Performs an animated transition between two elements.
@@ -252,25 +277,31 @@ up.motion = (->
     The timing function that controls the transition's acceleration.
     See [W3C documentation](http://www.w3.org/TR/css3-transitions/#transition-timing-function)
     for a list of pre-defined timing functions.
+  @param {Boolean} [options.reveal=false]
+    Whether to reveal the new element by scrolling its parent viewport.
   @return {Promise}
     A promise for the transition's end.
   ###  
   morph = (source, target, transitionOrName, options) ->
     if up.browser.canCssAnimation()
-      options = animateOptions(options)
+      parsedOptions = u.only(options, 'reveal')
+      parsedOptions = u.extend(parsedOptions, animateOptions(options))
       $old = $(source)
       $new = $(target)
+
       finish($old)
       finish($new)
-      if transitionOrName == 'none' or transitionOrName == false
-        # don't create ghosts if we aren't really transitioning
-        none()
-      else if transition = u.presence(transitionOrName, u.isFunction) || transitions[transitionOrName]
-        withGhosts $old, $new, ($oldGhost, $newGhost) ->
-          assertIsDeferred(transition($oldGhost, $newGhost, options), transitionOrName)
-      else if animation = animations[transitionOrName]
+
+      if transitionOrName == 'none' || transitionOrName == false || animation = animations[transitionOrName]
         $old.hide()
-        animate($new, animation, options)
+        # Since we can not longer rely on withGhosts to process options.reveal
+        # in this branch, we need to do it ourselves.
+        up.reveal($new) if options.reveal
+        animate($new, animation || 'none', options)
+      else if transition = u.presence(transitionOrName, u.isFunction) || transitions[transitionOrName]
+        withGhosts $old, $new, parsedOptions, ($oldGhost, $newGhost) ->
+          transitionPromise = transition($oldGhost, $newGhost, parsedOptions)
+          assertIsDeferred(transitionPromise, transitionOrName)
       else if u.isString(transitionOrName) && transitionOrName.indexOf('/') >= 0
         parts = transitionOrName.split('/')
         transition = ($old, $new, options) ->
@@ -278,7 +309,7 @@ up.motion = (->
             animate($old, parts[0], options),
             animate($new, parts[1], options)
           )
-        morph($old, $new, transition, options)
+        morph($old, $new, transition, parsedOptions)
       else
         u.error("Unknown transition %o", transitionOrName)
     else
@@ -289,7 +320,7 @@ up.motion = (->
   ###*
   @private
   ###
-  prependGhost = ($element) ->
+  prependCopy = ($element, $viewport) ->
     elementDims = u.measure($element, relative: true, inner: true)
 
     $ghost = $element.clone()
@@ -313,16 +344,29 @@ up.motion = (->
     $bounds.css(position: 'absolute')
     $bounds.css(elementDims)
 
+    top = elementDims.top
+
+    moveTop = (diff) ->
+      if diff != 0
+        top += diff
+        $bounds.css(top: top)
+
     $ghost.appendTo($bounds)
     $bounds.insertBefore($element)
 
-    # Make sure that we don't shift a child element with margins
-    # that can no longer collapse against a previous sibling
-    diff = $ghost.offset().top - $element.offset().top
-    $bounds.css(top: elementDims.top - diff) if diff != 0
+    # In theory, $ghost should now sit over $element perfectly.
+    # However, $element might collapse its margin against a previous sibling
+    # element, and $ghost does not have the same sibling.
+    # So we manually correct $ghost's top position so it aligns with $element.
+    moveTop($element.offset().top - $ghost.offset().top)
+
+    $fixedElements = up.layout.fixedChildren($ghost)
+    for fixedElement in $fixedElements
+      u.fixedToAbsolute(fixedElement, $viewport)
 
     $ghost: $ghost
     $bounds: $bounds
+    moveTop: moveTop
 
   ###*
   Defines a named transition.
@@ -543,7 +587,7 @@ up.motion = (->
   defaults: config.update
   none: none
   when: resolvableWhen
-  prependGhost: prependGhost
+  prependCopy: prependCopy
 
 )()
 

data/lib/assets/javascripts/up/popup.js.coffee

@@ -254,8 +254,12 @@ up.popup = (->
   @ujs
   ###
   up.on('click', '[up-close]', (event, $element) ->
-    if $element.closest('.up-popup')
+    if $element.closest('.up-popup').length
       close()
+      # Only prevent the default when we actually closed a popup.
+      # This way we can have buttons that close a popup when within a popup,
+      # but link to a destination if not.
+      event.preventDefault()
   )
 
   # The framework is reset between tests

data/lib/assets/javascripts/up/proxy.js.coffee

@@ -189,6 +189,8 @@ up.proxy = (->
     else
       promise = load(request)
       set(request, promise)
+      # Don't cache failed requests
+      promise.fail -> remove(request)
 
     if pending && !options.preload
       # This will actually make `pendingCount` higher than the actual

data/lib/assets/javascripts/up/util.js.coffee

@@ -529,24 +529,38 @@ up.util = (->
       if existingAnimation = $(this).data(ANIMATION_PROMISE_KEY)
         existingAnimation.resolve()
 
-  measure = ($element, options) ->
-    coordinates = if options?.relative
-      $element.position()
+  measure = ($element, opts) ->
+    opts = options(opts, relative: false, inner: false, full: false)
+
+    if opts.relative
+      if opts.relative == true
+        coordinates = $element.position()
+      else
+        $context = $(opts.relative)
+        elementCoords = $element.offset()
+        if $context.is(document)
+          # The document is always at the origin
+          coordinates = elementCoords
+        else
+          contextCoords = $context.offset()
+          coordinates =
+            left: elementCoords.left - contextCoords.left
+            top: elementCoords.top - contextCoords.top
     else
-      $element.offset()
+      coordinates = $element.offset()
     
     box = 
       left: coordinates.left
       top: coordinates.top
 
-    if options?.inner
+    if opts.inner
       box.width = $element.width()
       box.height = $element.height()
     else
       box.width = $element.outerWidth()
       box.height = $element.outerHeight()
       
-    if options?.full
+    if opts.full
       viewport = clientSize()
       box.right = viewport.width - (box.left + box.width)
       box.bottom = viewport.height - (box.top + box.height)
@@ -838,6 +852,33 @@ up.util = (->
       parent.insertBefore(wrappedNode, wrapper)
     parent.removeChild(wrapper)
 
+  offsetParent = ($element) ->
+    $match = undefined
+    while ($element = $element.parent()) && $element.length
+      position = $element.css('position')
+      console.log("Iteration element is %o with position %o", $element, position)
+      if position == 'absolute' || position == 'relative' || $element.is('body')
+        $match = $element
+        break
+    $match
+
+  fixedToAbsolute = (element, $viewport) ->
+    $element = $(element)
+    $futureOffsetParent = offsetParent($element)
+    # To get a fixed elements distance from the edge of the screen,
+    # use position(), not offset(). offset() would include the current
+    # scrollTop of the viewport.
+    elementCoords = $element.position()
+    futureParentCoords = $futureOffsetParent.offset()
+    $element.css
+      position: 'absolute'
+      left: elementCoords.left - futureParentCoords.left
+      top: elementCoords.top - futureParentCoords.top + $viewport.scrollTop()
+      right: ''
+      bottom: ''
+
+  offsetParent: offsetParent
+  fixedToAbsolute: fixedToAbsolute
   presentAttr: presentAttr
   createElement: createElement
   normalizeUrl: normalizeUrl

data/lib/assets/javascripts/up-bootstrap/layout-ext.js.coffee

@@ -3,3 +3,4 @@ defaults = up.layout.defaults()
 up.layout.defaults
   fixedTop: defaults.fixedTop.concat(['.navbar-fixed-top'])
   fixedBottom: defaults.fixedBottom.concat(['.navbar-fixed-bottom'])
+  anchoredRight: defaults.anchoredRight.concat(['.navbar-fixed-top', '.navbar-fixed-bottom', '.footer'])

data/lib/upjs/rails/{current_location.rb → request_echo_headers.rb}

@@ -1,19 +1,19 @@
 module Upjs
   module Rails
-    module CurrentLocation
+    module RequestEchoHeaders
 
       def self.included(base)
-        base.before_filter :set_header_for_current_location
+        base.before_filter :set_up_request_echo_headers
       end
 
       private
       
-      def set_header_for_current_location
+      def set_up_request_echo_headers
         headers['X-Up-Location'] = request.original_url
         headers['X-Up-Method'] = request.method
       end
 
-      ActionController::Base.include(self)
+      ActionController::Base.send(:include, self)
 
     end
   end

data/lib/upjs/rails/{request.rb → request_ext.rb}

@@ -6,7 +6,7 @@ module Upjs
         headers['X-Up-Selector'].present?
       end
 
-      ActionDispatch::Request.include(self)
+      ActionDispatch::Request.send(:include, self)
 
     end
   end

data/lib/upjs/rails/request_method_cookie.rb

@@ -0,0 +1,28 @@
+# See
+# https://github.com/rails/turbolinks/search?q=request_method&ref=cmdform
+# https://github.com/rails/turbolinks/blob/83d4b3d2c52a681f07900c28adb28bc8da604733/README.md#initialization
+module Upjs
+  module Rails
+    module RequestMethod
+
+      COOKIE_NAME = '_up_request_method'
+
+      def self.included(base)
+        base.before_filter :set_up_request_method_cookie
+      end
+
+      private
+
+      def set_up_request_method_cookie
+        if request.get?
+          cookies.delete(COOKIE_NAME)
+        else
+          cookies[COOKIE_NAME] = request.request_method
+        end
+      end
+
+      ActionController::Base.send(:include, self)
+
+    end
+  end
+end

data/lib/upjs/rails/version.rb

@@ -1,5 +1,5 @@
 module Upjs
   module Rails
-    VERSION = '0.10.5'
+    VERSION = '0.11.0'
   end
 end

data/lib/upjs-rails.rb

@@ -1,4 +1,5 @@
 require "upjs/rails/version"
 require "upjs/rails/engine"
-require "upjs/rails/current_location"
-require "upjs/rails/request"
+require "upjs/rails/request_echo_headers"
+require "upjs/rails/request_method_cookie"
+require "upjs/rails/request_ext"

data/spec_app/spec/javascripts/helpers/remove_body_margin.js.coffee

@@ -0,0 +1,5 @@
+# We have a lot of specs that measure the distance of elements
+# from the screen edge, so we can't have the Jasmine runner to have
+# any margins on the body.
+beforeEach ->
+  $('body').css('margin-top': 0)

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

@@ -124,11 +124,12 @@ describe 'up.flow', ->
               @revealedHTML = $revealedElement.get(0).outerHTML
               u.resolvedPromise()
 
-          it 'reveals an old element before it is being replaced', (done) ->
+          it 'reveals a new element before it is being replaced', (done) ->
             @request = up.replace('.middle', '/path', reveal: true)
             @respond()
             @request.then =>
-              expect(up.reveal).toHaveBeenCalledWith(@oldMiddle)
+              expect(up.reveal).not.toHaveBeenCalledWith(@oldMiddle)
+              expect(@revealedHTML).toContain('new-middle')
               done()
 
           it 'reveals a new element that is being appended', (done) ->

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

@@ -16,11 +16,8 @@ describe 'up.history', ->
 
       it 'sets an [up-href] attribute to the previous URL and sets the up-restore-scroll attribute to "true"', ->
         up.history.push('/one')
-        console.log("url is now %o, previous was %o", up.history.url(), up.history.previousUrl())
         up.history.push('/two')
-        console.log("url is now %o, previous was %o", up.history.url(), up.history.previousUrl())
         $element = up.ready(affix('a[href="/three"][up-back]').text('text'))
-        console.log("url is now %o, previous was %o", up.history.url(), up.history.previousUrl())
         expect($element.attr('href')).toEndWith('/three')
         expect($element.attr('up-href')).toEndWith('/one')
         expect($element.attr('up-restore-scroll')).toBe('')

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

@@ -17,8 +17,6 @@ describe 'up.layout', ->
         beforeEach ->
           $body = $('body')
 
-          @restoreMargin = u.temporaryCss($body, 'margin-top': 0)
-
           @$elements = []
           @$container = $('<div class="container">').prependTo($body)
 
@@ -31,7 +29,6 @@ describe 'up.layout', ->
 
         afterEach ->
           @$container.remove()
-          @restoreMargin()
 
         it 'reveals the given element', ->
           up.reveal(@$elements[0])

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

@@ -8,6 +8,8 @@ describe 'up.modal', ->
         
     describe 'up.modal.open', ->
 
+      assumedScrollbarWidth = 15
+
       it "loads the given link's destination in a dialog window", (done) ->
         $link = affix('a[href="/path/to"][up-modal=".middle"]').text('link')
         promise = up.modal.open($link)
@@ -49,7 +51,7 @@ describe 'up.modal', ->
           expect($modal).toExist()
           expect($modal.css('overflow-y')).toEqual('scroll')
           expect($body.css('overflow-y')).toEqual('hidden')
-          expect(parseInt($body.css('padding-right'))).toBeAround(15, 10)
+          expect(parseInt($body.css('padding-right'))).toBeAround(assumedScrollbarWidth, 10)
 
           up.modal.close().then ->
             expect($body.css('overflow-y')).toEqual('scroll')
@@ -57,6 +59,30 @@ describe 'up.modal', ->
 
             done()
 
+      it 'pushes right-anchored elements away from the edge of the screen in order to prevent jumping', (done) ->
+
+        $anchoredElement = affix('div[up-anchored=right]').css
+          position: 'absolute'
+          top: '0'
+          right: '30px'
+
+        promise = up.modal.open(url: '/foo', target: '.container')
+
+        @lastRequest().respondWith
+          status: 200
+          contentType: 'text/html'
+          responseText:
+            """
+            <div class="container">text</div>
+            """
+
+        promise.then ->
+          expect(parseInt($anchoredElement.css('right'))).toBeAround(30 + assumedScrollbarWidth, 10)
+
+          up.modal.close().then ->
+            expect(parseInt($anchoredElement.css('right'))).toBeAround(30 , 10)
+            done()
+
     describe 'up.modal.close', ->
 
       it 'should have tests'

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

@@ -37,7 +37,7 @@ describe 'up.motion', ->
 
       if up.browser.canCssAnimation()
 
-        it 'transitions between two element using ghosts', (done) ->
+        it 'transitions between two element by animating two copies while keeping the originals in the background', (done) ->
 
           $old = affix('.old').text('old content').css(
             position: 'absolute'
@@ -53,7 +53,7 @@ describe 'up.motion', ->
             width:    '22px',
             height:   '23px'
           )
-          up.morph($old, $new, 'cross-fade', duration: 100, easing: 'linear')
+          up.morph($old, $new, 'cross-fade', duration: 200, easing: 'linear')
 
           # The actual animation will be performed on Ghosts since
           # two element usually cannot exist in the DOM at the same time
@@ -76,14 +76,12 @@ describe 'up.motion', ->
 
           # The actual elements are hidden, but $old will take up its original
           # space until the animation completes.
-          expect($old.css(['display', 'visibility'])).toEqual(
+          expect($old.css('display')).toEqual('none')
+
+          expect($new.css(['display', 'visibility'])).toEqual(
             display: 'block',
             visibility: 'hidden'
           )
-          expect($new.css(['display', 'visibility'])).toEqual(
-            display: 'none',
-            visibility: 'visible'
-          )
 
           # Ghosts will hover over $old and $new using absolute positioning,
           # matching the coordinates of the original elements.
@@ -108,15 +106,15 @@ describe 'up.motion', ->
             expect(opacity($newGhost)).toBeAround(0.0, 0.25)
             expect(opacity($oldGhost)).toBeAround(1.0, 0.25)
 
-          @setTimer 40, ->
+          @setTimer 80, ->
             expect(opacity($newGhost)).toBeAround(0.4, 0.25)
             expect(opacity($oldGhost)).toBeAround(0.6, 0.25)
 
-          @setTimer 70, ->
+          @setTimer 140, ->
             expect(opacity($newGhost)).toBeAround(0.7, 0.25)
             expect(opacity($oldGhost)).toBeAround(0.3, 0.25)
 
-          @setTimer 125, ->
+          @setTimer 250, ->
             # Once our two ghosts have rendered their visual effect,
             # we remove them from the DOM.
             expect($newGhost).not.toBeInDOM()
@@ -124,10 +122,7 @@ describe 'up.motion', ->
 
             # The old element is still in the DOM, but hidden.
             # Morphing does *not* remove the target element.
-            expect($old.css(['display', 'visibility'])).toEqual(
-              display: 'none',
-              visibility: 'hidden'
-            )
+            expect($old.css('display')).toEqual('none')
             expect($new.css(['display', 'visibility'])).toEqual(
               display: 'block',
               visibility: 'visible'
@@ -150,6 +145,39 @@ describe 'up.motion', ->
           # Check that it's a different ghosts
           expect($ghost2).not.toEqual($ghost1)
 
+        describe 'with { reveal: true } option', ->
+
+          it 'reveals the new element while making the old element within the same viewport appear as if it would keep its scroll position', ->
+            $container = affix('.container[up-viewport]').css
+              'width': '200px'
+              'height': '200px'
+              'overflow-y': 'scroll'
+              'position': 'fixed'
+              'left': 0,
+              'top': 0
+            $old = affix('.old').appendTo($container).css(height: '600px')
+            $container.scrollTop(300)
+
+            $new = affix('.new').insertBefore($old).css(height: '600px')
+
+            up.morph($old, $new, 'cross-fade', duration: 50, reveal: true)
+
+            $oldGhost = $('.old.up-ghost')
+            $newGhost = $('.new.up-ghost')
+
+            # Container is scrolled up due to { reveal: true } option.
+            # Since $old and $new are sitting in the same viewport with a
+            # single shares scrollbar This will make the ghost for $old jump.
+            expect($container.scrollTop()).toEqual(0)
+
+            # See that the ghost for $new is aligned with the top edge
+            # of the viewport.
+            expect($newGhost.offset().top).toEqual(0)
+
+            # The ghost for $old is shifted upwards to make it looks like it
+            # was at the scroll position before we revealed $new.
+            expect($oldGhost.offset().top).toEqual(-300)
+
       else
 
         it "doesn't animate and hides the first element instead", ->
@@ -171,14 +199,14 @@ describe 'up.motion', ->
 
       it 'should have tests'
 
-    describe 'up.motion.prependGhost', ->
+    describe 'up.motion.prependCopy', ->
 
       afterEach ->
         $('.up-bounds, .up-ghost, .fixture').remove()
 
       it 'clones the given element into a .up-ghost-bounds container and inserts it as a sibling before the element', ->
         $element = affix('.element').text('element text')
-        up.motion.prependGhost($element)
+        up.motion.prependCopy($element)
         $bounds = $element.prev()
         expect($bounds).toExist()
         expect($bounds).toHaveClass('up-bounds')
@@ -190,13 +218,13 @@ describe 'up.motion', ->
       it 'removes <script> tags from the cloned element', ->
         $element = affix('.element')
         $('<script></script>').appendTo($element)
-        up.motion.prependGhost($element)
+        up.motion.prependCopy($element)
         $ghost = $('.up-ghost')
         expect($ghost.find('script')).not.toExist()
 
       it 'absolutely positions the ghost over the given element', ->
         $element = affix('.element')
-        up.motion.prependGhost($element)
+        up.motion.prependCopy($element)
         $ghost = $('.up-ghost')
         expect($ghost.offset()).toEqual($element.offset())
         expect($ghost.width()).toEqual($element.width())
@@ -204,25 +232,43 @@ describe 'up.motion', ->
 
       it 'accurately positions the ghost over an element with margins', ->
         $element = affix('.element').css(margin: '40px')
-        up.motion.prependGhost($element)
+        up.motion.prependCopy($element)
         $ghost = $('.up-ghost')
         expect($ghost.offset()).toEqual($element.offset())
 
       it "doesn't change the position of a child whose margins no longer collapse", ->
         $element = affix('.element')
         $child = $('<div class="child"></div>').css(margin: '40px').appendTo($element)
-        up.motion.prependGhost($element)
+        up.motion.prependCopy($element)
         $clonedChild = $('.up-ghost .child')
         expect($clonedChild.offset()).toEqual($child.offset())
 
       it 'correctly positions the ghost over an element within a scrolled body', ->
-        $body = $('body').css(margin: 0)
+        $body = $('body')
         $element1 = $('<div class="fixture"></div>').css(height: '75px').prependTo($body)
         $element2 = $('<div class="fixture"></div>').css(height: '100px').insertAfter($element1)
         $body.scrollTop(17)
-        { $bounds, $ghost } = up.motion.prependGhost($element2)
+        { $bounds, $ghost } = up.motion.prependCopy($element2)
         expect($bounds.css('position')).toBe('absolute')
         expect($bounds.css('top')).toEqual('75px')
         expect($ghost.css('position')).toBe('static')
 
       it 'correctly positions the ghost over an element within a viewport with overflow-y: scroll'
+
+      it 'converts fixed elements within the copies to absolutely positioning', ->
+        $element = affix('.element').css
+          position: 'absolute'
+          top: '50px'
+          left: '50px'
+        $fixedChild = $('<div class="fixed-child" up-fixed></div>').css
+          position: 'fixed'
+          left: '77px'
+          top: '77px'
+        $fixedChild.appendTo($element)
+        up.motion.prependCopy($element, $('body'))
+        $fixedChildGhost = $('.up-ghost .fixed-child')
+        expect($fixedChildGhost.css(['position', 'left', 'top'])).toEqual
+          position: 'absolute',
+          left: '27px',
+          top: '27px'
+