OK, here is one simple one

@ou @ou_vle @theme @theme_osep

Feature: Back to top
  In order to go back to the top of the page
  As somebody using a mobile device
  I should have 'back to top' icons that appear and work

  Background:
    Given the following "courses" exist:
      | fullname | shortname | format      | startdate  |
      | Course 1 | C1        | oustudyplan | 1420243200 |
    And I log in as "admin"
    And I am using the OSEP theme
    And the OU study planner thinks the date is "2015-01-03"

    And I am on site homepage
    And I follow "Course 1"
    And I turn editing mode on in the OSEP theme

    # Put 4 weeks into the course.
    And I add a section to the end of the OU study planner
    And I add a section to the end of the OU study planner
    And I add a section to the end of the OU study planner

    # Switch to mobile size.
    And I change window size to "320x480"

  @javascript
  Scenario: Check display and usage on main screen
    # The icon appears when scrolling down.
    When I scroll to the bottom of the OU study planner
    And I wait "1" seconds
    Then "#osep-backtotop" "css_element" should be visible

    # Click on it. It then scrolls to top and disappears.
    When I click on "#osep-backtotop a" "css_element"
    And I wait "1" seconds
    Then "#osep-backtotop" "css_element" should not be visible

    # At desktop size they don't appear
    When I change window size to "1024x768"
    And I scroll to the bottom of the OU study planner
    And I wait "1" seconds
    Then "#osep-backtotop" "css_element" should not be visible

Obviously all the tests are rather specific to the particular functionality of our theme, but I hope that example helps.