.markbot.yml

repo: 'javascript-less-carousel'
canvasCourse: 'web-dev-4'

inherit:
  - naming-restrict-live
  - git-2
  - html
  - css
  - typografier
  - modulifier
  - screenshots-all
  - css-order-modules-type-main

html:
  - path: 'index.html'
    outline: false
    has:
      - 'section.max-length > div.carousel > input[type="radio"][checked]:first-child ~ div.carousel-inner > div.carousel-items > div.carousel-item.embed.embed-golden > img.embed-item'
      - 'section.max-length > div.carousel > div.carousel-inner > ul.carousel-controls > li > label.carousel-btn.icon.i-18[for]'
      - 'img[src*="arsinoitherium"]'
      - 'img[src*="elasmotherium"]'
      - 'img[src*="glyptodon"]'
      - 'img[src*="megatherium"]'

css:
  - path: 'css/main.css'
    has:
      - ['.carousel-items > div', 'display', 'none']
      - ['.carousel-btn', 'border', '4px solid #fff']
      - ['.carousel-btn', 'border-radius', '50%']
    search:
      - '\#arsinoitherium-control\:checked \~ \.carousel-inner \#arsinoitherium'
      - '\#glyptodon-control\:checked \~ \.carousel-inner \[for\="glyptodon-control"\]'

screenshots:
  - path: 'index.html'
    label: 'Clicked'
    sizes: [960]
    before: |
      $('.carousel-controls > li:nth-child(3) > label').dispatchEvent(ev('click'));
      done();