This is a PoC about testing CSS with RSpec

css_spec.rb

ElementBox = Struct.new(:x, :y, :width, :height)

def get_css(page, selector)
  page.driver.evaluate_script <<-END
    function() {
      var ele  = document.querySelectorAll('#{selector}')[0];
      if (ele == undefined) {
        return null;
      }
      return window.getComputedStyle(ele);
    }();
  END
end

def box(page, selector)
  box = page.driver.evaluate_script <<-END
    function() {
      var ele  = document.querySelectorAll('#{selector}')[0];
      if (ele == undefined) {
        return null;
      }
      var rect = ele.getBoundingClientRect();
      return [rect.left, rect.top, rect.width, rect.height];
    }();
  END
  unless box
    fail "Element not found: #{selector}"
  end

  ElementBox.new(*box)
end

def overlap?(page, sel1, sel2)
  box1 = box(page, sel1)
  box2 = box(page, sel2)

  hoverlap = (box1.x < box2.x + box2.width) && (box2.x < box1.x + box1.width)
  voverlap = (box1.y < box2.y + box2.height) && (box2.y < box1.y + box1.height)

  hoverlap && voverlap
end

describe 'CSS Yeah', js: true do
  shared_examples 'not overlaping' do
    it 'does not overlap' do
      page.driver.resize_window(*window_size)
      visit '/'
      expect(overlap?(page, '.left', '.right')).to be false
    end
  end

  context 'on Desktop' do
    let(:window_size) { [1440, 600] }
    it_behaves_like 'not overlaping'
  end

  context 'on Mobile' do
    let(:window_size) { [600, 600] }
    it_behaves_like 'not overlaping'
  end

  it 'sets .left to green on hover' do
    visit '/'

    left = find('.left')
    left.hover
    css = get_css(page, '.left')

    expect(css).to include 'backgroundColor' => 'rgb(0, 255, 0)'
  end
end

Gemfile

source 'https://rubygems.org'

gem 'rails', '4.2.1'
gem 'pg'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'

gem 'rspec-rails'
gem 'capybara'
gem 'poltergeist'

index.html

<style>
  body {
    margin: 0;
    padding: 0;
  }

  .left {
    background: red;
    height: 100px;
    width: 600px;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }

  .left:hover {
    background: lime;
  }

  .right {
    background: blue;
    height: 100px;
    width: 600px;
    margin: 0;
    position: absolute;
    top: 5px;
    right: 0;
  }

  @media (max-width: 1200px) {
    .left {
      position: static;
    }

    .right {
      position: static;
    }
  }
</style>

<p class="left">test</p><p class="right">test</p>

spec_helper.rb

require "#{__dir__}/../config/environment"
require 'rspec/rails'
require 'capybara/poltergeist'

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, window_size: [1440, 600], inspector: true)
end

Capybara.javascript_driver = :poltergeist

RSpec.configure do |config|
  config.include Capybara::DSL

  config.expect_with :rspec do |expectations|
    expectations.include_chain_clauses_in_custom_matcher_descriptions = true
  end

  config.mock_with :rspec do |mocks|
    mocks.verify_partial_doubles = true
  end
end