IE 11 is not supported. For an optimal experience visit our site on another browser.

Story page photo slice test scenarios

Slice header Verify all below (main photo test page)

  • Photos icon and ‘Photos: ‘ appended to the beginning of header text rendered from tease doc’s instance property ‘Headline’.
  • ‘Open in new window’ appears on right and opens a child window to the same slideshow and photo displayed in the slice.

Left nav - previous & next Verify all below (main photo test page)

  • Clicking on ‘previous’ rapidly animates to show the previous slide
    . . . If the current slide is the first slide of the first included slideshow, it should render gray and be disabled.
    . . . If the current slide is the first slide of any slideshow after the first slideshow, it should render blue and clicking it rapidly animates to the last slide of the previous slideshow.
  • Clicking on ‘next’ rapidly animates to show the next slide
    . . . If the current slide is the last slide of the last included slideshow, it should render gray and be disabled.
    . . . If the current slide is the last slide of any slideshow before the last slideshow, it should render blue and clicking it rapidly animates to the first slide of the next slideshow.

Left nav - thumb squares Verify all below (main photo test page)

  • One square renders for each photo in the current slideshow. Squares are sequenced left to right in stacking rows of five columns.
  • A counter reading ‘[slide number] of [total photos in current slideshow]’ renders below the thumb square block. The first number increments with each new slide and the second number changes when subsequent slideshows start to show the total number of photos in the current slideshow.
  • Hovering over a square turns the square red and displays a thumbnail to the right. The top of the thumbnail should be aligned with the top of the hovered square.
  • If the hover thumbnail represents a graphic image, a caution icon is rendered. Verify second image of first slideshow (main photo test page)
  • The square corresponding with the current slide is dark blue.
  • All squares before the current square are medium blue.
  • All squares after the current square are light blue.
  • Clicking on a square rapidly animates the slideshow to the corresponding slide.

Left nav - related slideshows link

  • Link to ‘Related slideshows’ renders if more than one slideshow tease is included in a story doc’s slice field. Verify (main photo test page)
  • Link to ‘Related slideshows’ renders if there is one slideshow tease included in a story doc’s slice field that contains more than one chapter or tab. Verify
  • No ‘Related slideshows’ link renders when there is only one non-chapterized, non-tabbed slideshow tease included in a story doc’s slide field. Verify

Slide content - photo Verify all below (main photo test page)

  • The photo corresponding with the current slide appears in a container with a black background that is the same size as the photo. Users may see this container briefly while the current photo loads.
  • Clicking on a photo rapidly animates to the next photo
    . . . If the current slide is the last slide of the last included slideshow, the click action is disabled.
    . . . If the current slide is the last slide of the first included slideshow, clicking the photo advances to the next included slideshow.
  • If the current slide’s ‘graphic warning’ is checked in its slideshow doc, the photo renders as black with graphic warning text. Verify second image of first slideshow (main photo test page)
    . . . Clicking on a photo with a graphic warning advances to the next slide.
    . . . Clicking the ‘view image’ link in the graphic warning text hides the graphic warning and displays the photo.

Slide content - caption

Slide content - related teases

  • The first related tease associated with each slide in the slideshow doc renders with the current photo’s caption. Verify first image of first slideshow (main photo test page)
    . . . If there is more than one tease associated with a slide in the slideshow doc, all teases after the first tease are ignored. Verify third image of first slideshow (main photo test page)
  • Video, slideshow and interactive teases render with tease label text with ‘Related’ appended, thumb-m sized thumbnail and tease headline from the tease doc associated with the current slide in the slideshow doc. Clicking the image or headline should launch a new window with the specified video or slideshow. Verify (main photo test page)  Video tease image 1; Slideshow tease image 5; Interactive tease image 6
  • Story docs render with ‘Related story’ and the headline from the story doc associated with the current slide in the slideshow doc. Verify fourth image of first slideshow

Slide layout - default rendering for monitors with less than 960px vertical resolution Verify all below with first slideshow (main photo test page)

  • 0.49 or less width-to-height ratio photos render as AIMS .grid-3x2 size. Captions render to the right and are 2 cols wide.
  • 0.50 – 0.64 width-to-height ratio photos render as AIMS .grid-4x2 size. Captions render to the right and are 2 cols wide.
  • 0.65 – 0.79 width-to-height ratio photos render as AIMS .grid-5x2 size. Captions render to the right and are 2 cols wide.
  • 0.80 – 0.98 width-to-height ratio photos render as AIMS .grid-6x2 size. Captions render to the right and are 2 cols wide.
  • 0.99 – 1.19 width-to-height ratio photos render as AIMS .grid-7x2 size. Captions render to the right and are 2 cols wide.
  • 1.20 – 1.49 width-to-height ratio photos render as AIMS .grid-8x2 size. Captions render to the right and are 1.5 cols wide.
    . . . If ad accompanies a 1.20 – 1.49 width-to-height ration photo, the size is AIMS .grid-7x2 with caption below at 4.5 cols wide and ad to the right.
  • 1.50 – 1.99 width-to-height ratio photos render as AIMS .grid-9x2 size. Captions render below and are 4.5 cols wide.
  • 2.00 or greater width-to-height ratio photos render as AIMS .grid-10x2 size. Captions render below and are 4.5 cols wide.

Slide layout - large rendering for monitors with greater than 960px vertical resolution Verify all below with first slideshow (main photo test page)

  • 0.45 or less width-to-height ratio photos render as AIMS .grid-3x2 size. Captions render to the right and are 2 cols wide.
  • 0.46 – 0.55 width-to-height ratio photos render as AIMS .grid-4x2 size. Captions render to the right and are 2 cols wide.
  • 0.56 – 0.65 width-to-height ratio photos render as AIMS .grid-5x2 size. Captions render to the right and are 2 cols wide.
  • 0.66 – 0.75 width-to-height ratio photos render as AIMS .grid-6x2 size. Captions render to the right and are 2 cols wide.
  • 0.76 – 0.99 width-to-height ratio photos render as AIMS .grid-7x2 size. Captions render to the right and are 2 cols wide.
  • 1.00 – 1.09 width-to-height ratio photos render as AIMS .grid-8x2 size. Captions render to the right and are 1.5 cols wide.
  • 1.10 – 1.40 width-to-height ratio photos render as AIMS .grid-9x2 size. Captions render below and are 4.5 cols wide.
    . . . If ad accompanies a 1.10 – 1.40 width-to-height ration photo, the size is AIMS .grid-7x2 with caption below at 4.5 cols wide and ad to the right.
  • 1.41 or greater width-to-height ratio photos render as AIMS .grid-10x2 size. Captions render below and are 4.5 cols wide.

Ads Verify all below (main photo test page)

  • There is at least 1 ad for every 3 photos per included slideshow
  • Ads do not appear on the first slide of the first included slideshow
  • Ads placements are randomized on slideshow when images are mostly the same aspect ratio. To verify, track the order and then reload and track the order again. Do this both for a slideshow that comes first and a slideshow that comes second. Verify first slideshow, Verify second slideshow
  • Ads appear with all photos with a 0.99 or less width-to-height ratio in default mode and photos less than 0.76 in large mode. Verify using first slideshow (main photo test page)

Drawer functionality Verify all below (main photo test page)

  • When more than one slideshow tease doc—or one slideshow tease doc containing a tabbed slideshow—is placed in the same story doc slice field, teases for each tease and/or tabbed slideshow doc appear in a drawer below the photo slice. The drawer is closed by default.
  • Clicking on ‘previous,’ ‘next,’ a thumb square, ‘related slideshows’ link, any photo or the drawer handle animates the photo slice drawer to open.
  • Clicking a tease image or headline in the drawer replaces the slice header and slideshow above and scrolls the users back up to the top of the slice.

Drawer layout Verify all below (main photo test page)

  • When the drawer is open, each tease renders with a ‘slideshow’ label, tease image rendered from the slideshow tease doc's instance property 'Image' field and headline text rendered from the slideshow tease doc's instance property 'Headline' field.
  • Tease thumbnails align with each other horizontally along their bottom edges.
  • 'Above: ' is pre-pended to the tease headline for the slideshow currently displayed above the drawer.
  • If there are fewer than 6 slideshow tease docs and/or tabbed slideshows included in the story doc, the row of teases is centered horizontally in the drawer space. Verify
  • If there are more than 6 slideshow tease docs and/or tabbed slideshows included in the story doc, the second row of teases is aligned left.  Verify
  • If there are more than 12 slideshow tease docs and/or tabbed slideshows included in the story doc, all tease after 12 are ignored. Verify

Javascript disabled

    Automated related photo slideshows

      back to test scenario index page

      Tested on [date] by [person] using [browser/OS]

      5/12 Rachel IE8/XP

      5/17 Scott FF3.6/Win7

      5/18 Josh IE7/XP