- array:
    '#plain_text': 'Dummy placeholder for form rendering test.'
  assert:
    count:
      'form.ecl-form': 1
- array:
    '#type': button
    '#value': Preview
  assert:
    contains:
      - 'Preview'
    count:
      'button.ecl-button.ecl-button': 1
- array:
    '#type': textfield
    '#value': Textfield
  assert:
    contains:
      - 'Textfield'
    count:
      'input.form-text.ecl-text-input': 1
- array:
    '#type': password
    '#value': Password
  assert:
    contains:
      - 'password'
    count:
      'input.form-text.ecl-text-input': 1
- array:
    '#type': email
    '#value': Email
  assert:
    contains:
      - 'Email'
    count:
      'input.form-email.ecl-text-input': 1
- array:
    '#type': textarea
    '#title': Textarea
    '#value': Text
  assert:
    contains:
      - 'Textarea'
      - 'Text'
    count:
      'textarea.form-textarea.ecl-text-area': 1
- array:
    '#type': select
    '#title': Select element
    '#options':
      1: One
      2: Two
      3: Three
  assert:
    contains:
      - 'Select element'
      - '<option value="1">One</option>'
      - '<option value="2">Two</option>'
      - '<option value="3">Three</option>'
    count:
      'div.ecl-select__container.ecl-select__container--m': 1
      'select.form-select.ecl-select': 1
- array:
    '#type': radios
    '#title': Radios
    '#title_display': above
    '#default_value': 1
    '#id': test-radios
    '#options':
      0: Closed
      1: Active
  assert:
    contains:
      - 'Radios'
    count:
      'div#test-radios': 1
- array:
    '#type': radios
    '#title': Radios
    '#set_validation_error': true
    '#default_value': 1
    '#id': test-radios
    '#options':
      0: Closed
      1: Active
  assertions:
    contains:
      - 'Radio'
    count:
      'div.ecl-radio__group--invalid': 1
- array:
    '#type': checkbox
    '#title': Checkbox
    '#attributes':
      'foo': bar
  assert:
    contains:
      - 'Checkbox'
      - 'foo="bar"'
    count:
      'label.ecl-checkbox__label': 1
      'input.ecl-checkbox__input': 1
      'span.ecl-checkbox__box': 1
- array:
    '#type': checkbox
    '#title': Checkbox
    '#disabled': true
  assert:
    contains:
      - 'Checkbox'
    count:
      'div.ecl-checkbox.ecl-checkbox--disabled': 1
- array:
    '#type': checkbox
    '#title': Checkbox
    '#set_validation_error': true
  assert:
    contains:
      - 'Checkbox'
    count:
      'div.ecl-checkbox.ecl-checkbox--invalid': 1
- array:
    '#type': radio
    '#title': Radio
    '#attributes':
      'foo': bar
  assert:
    contains:
      - 'Radio'
      - 'foo="bar"'
    count:
      'div.ecl-radio label.ecl-radio__label': 1
      'div.ecl-radio span.ecl-radio__box': 1
- array:
    '#type': radio
    '#title': Radio
    '#disabled': true
  assert:
    contains:
      - 'Radio'
    count:
      'div.ecl-radio--disabled label.ecl-radio__label': 1
      'div.ecl-radio--disabled input[disabled]': 1
- array:
    '#type': pattern
    '#id': banner_hero
    '#fields':
      banner_type: "image"
      image:
        src: "http://via.placeholder.com/150x150"
      title: "Banner title"
      url: "http://example.com"
      label: "Subscribe"
      description: "Banner description"
      centered: true
  assertions:
    count:
      'section.ecl-hero-banner.ecl-hero-banner--image.ecl-hero-banner--centered': 1
      'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 1
      '.ecl-hero-banner--full-width': 0
    equals:
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description span.ecl-hero-banner__description-text': Banner description
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Subscribe
- array:
    '#type': pattern
    '#id': banner_hero
    '#fields':
      banner_type: "primary"
      image:
        src: "http://via.placeholder.com/150x150"
      title: "Banner title"
      url: "http://example.com"
      label: "Subscribe"
      description: "Banner description"
      centered: false
      full_width: true
  assertions:
    count:
      'section.ecl-hero-banner.ecl-hero-banner--primary.ecl-hero-banner--full-width': 1
      'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 0
    equals:
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description span.ecl-hero-banner__description-text': Banner description
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Subscribe
- array:
    '#type': pattern
    '#id': banner_hero
    '#fields':
      banner_type: "default"
      title: "Backwards compatibility test"
      url: "http://example.com"
      label: "Subscribe"
      description: "Banner description"
      centered: false
      alignment: "center"
      full_width: false
  assertions:
    count:
      'section.ecl-hero-banner.ecl-hero-banner--default.ecl-hero-banner--centered': 1
      'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      '.ecl-hero-banner--full-width': 0
    equals:
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': "Backwards compatibility test"
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description span.ecl-hero-banner__description-text': "Banner description"
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Subscribe
- array:
    '#type': pattern
    '#id': banner_hero
    '#variant': ""
    '#fields':
      title: "Banner title"
      description: "Banner description"
      url: "http://example.com"
      label: "Example"
      image:
        src: "http://via.placeholder.com/150x150"
      alignment: "center"
      full_width: false
  assertions:
    count:
      'section.ecl-hero-banner.ecl-hero-banner--primary.ecl-hero-banner--centered': 1
      'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 0
      '.ecl-hero-banner--full-width': 0
    equals:
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description span.ecl-hero-banner__description-text': Banner description
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
- array:
    '#type': pattern
    '#id': banner_hero
    '#variant': "image"
    '#fields':
      title: "Banner title"
      description: "Banner description"
      url: "http://example.com"
      label: "Example"
      image:
        src: "http://via.placeholder.com/150x150"
      alignment: "left"
      full_width: false
  assertions:
    count:
      'section.ecl-hero-banner.ecl-hero-banner--image.ecl-hero-banner--centered': 0
      'section.ecl-hero-banner.ecl-hero-banner--image': 1
      'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 1
      '.ecl-hero-banner--full-width': 0
    equals:
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description span.ecl-hero-banner__description-text': Banner description
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
- array:
    '#type': pattern
    '#id': banner_hero
    '#variant': "image-shade"
    '#fields':
      title: "Banner title"
      description: "Banner description"
      url: "http://example.com"
      label: "Example"
      image:
        src: "http://via.placeholder.com/150x150"
      alignment: "center"
      full_width: true
  assertions:
    count:
      'section.ecl-hero-banner.ecl-hero-banner--image-shade.ecl-hero-banner--centered.ecl-hero-banner--full-width': 1
      'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 1
    equals:
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description span.ecl-hero-banner__description-text': Banner description
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
- array:
    '#type': pattern
    '#id': banner_hero
    '#variant': "primary"
    '#fields':
      title: "Banner title"
      description: "Banner description"
      url: "http://example.com"
      label: "Example"
      image:
        src: "http://via.placeholder.com/150x150"
      alignment: "left"
      full_width: true
  assertions:
    count:
      'section.ecl-hero-banner.ecl-hero-banner--primary.ecl-hero-banner--centered': 0
      'section.ecl-hero-banner.ecl-hero-banner--primary.ecl-hero-banner--full-width': 1
      'div.ecl-hero-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      'div.ecl-hero-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 0
    equals:
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content div.ecl-hero-banner__title': Banner title
      'div.ecl-container div.ecl-hero-banner__container div.ecl-hero-banner__content p.ecl-hero-banner__description span.ecl-hero-banner__description-text': Banner description
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
- array:
    '#type': pattern
    '#id': banner_page
    '#variant': ""
    '#fields':
      title: "Banner title"
      description: "Banner description"
      url: "http://example.com"
      label: "Example"
      image:
        src: "http://via.placeholder.com/150x150"
      alignment: "center"
  assertions:
    count:
      'section.ecl-page-banner.ecl-page-banner--primary.ecl-page-banner--centered': 1
      'div.ecl-page-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      'div.ecl-page-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 0
      '.ecl-page-banner--full-width': 0
    equals:
      'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content div.ecl-page-banner__title': Banner title
      'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content p.ecl-page-banner__description span.ecl-page-banner__description-text': Banner description
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
- array:
    '#type': pattern
    '#id': banner_page
    '#variant': "primary"
    '#fields':
      title: "Banner title"
      description: "Banner description"
      url: "http://example.com"
      label: "Example"
      image:
        src: "http://via.placeholder.com/150x150"
      alignment: "left"
      full_width: true
  assertions:
    count:
      'section.ecl-page-banner.ecl-page-banner--primary.ecl-page-banner--centered': 0
      'section.ecl-page-banner.ecl-page-banner--primary.ecl-page-banner--full-width': 1
      'div.ecl-page-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      'div.ecl-page-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 0
    equals:
      'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content div.ecl-page-banner__title': Banner title
      'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content p.ecl-page-banner__description span.ecl-page-banner__description-text': Banner description
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
- array:
    '#type': pattern
    '#id': banner_page
    '#variant': "image"
    '#fields':
      title: "Banner title"
      description: "Banner description"
      url: "http://example.com"
      label: "Example"
      image:
        src: "http://via.placeholder.com/150x150"
      alignment: "center"
      full_width: false
  assertions:
    count:
      'section.ecl-page-banner.ecl-page-banner--image.ecl-page-banner--centered': 1
      'div.ecl-page-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      'div.ecl-page-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 1
      '.ecl-page-banner--full-width': 0
    equals:
      'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content div.ecl-page-banner__title': Banner title
      'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content p.ecl-page-banner__description span.ecl-page-banner__description-text': Banner description
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
- array:
    '#type': pattern
    '#id': banner_page
    '#variant': "image-shade"
    '#fields':
      title: "Banner title"
      description: "Banner description"
      url: "http://example.com"
      label: "Example"
      image:
        src: "http://via.placeholder.com/150x150"
      alignment: "left"
      full_width: false
  assertions:
    count:
      'section.ecl-page-banner.ecl-page-banner--image-shade.ecl-page-banner--centered': 0
      'section.ecl-page-banner.ecl-page-banner--image-shade': 1
      'div.ecl-page-banner__content a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1
      'div.ecl-page-banner__image[style="background-image:url(http://via.placeholder.com/150x150)"]': 1
      '.ecl-page-banner--full-width': 0
    equals:
      'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content div.ecl-page-banner__title': Banner title
      'div.ecl-container div.ecl-page-banner__container div.ecl-page-banner__content p.ecl-page-banner__description span.ecl-page-banner__description-text': Banner description
      'a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] span.ecl-link__label': Example
- array:
    '#type': pattern
    '#id': banner_video
    '#fields':
      video:
        description: "Video caption"
        image: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
        alt: "Jean Monnet banner."
        sources:
          - src: "https://defiris.ec.streamcloud.be/findmedia/11/101631/LR_I101631INT1W.mp4?latest=0004553892"
            src_type: "video/mp4"
      description: "Banner description"
  assertions:
    count:
      'section.ecl-video-banner': 1
      'video.ecl-media-container__media[poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"]': 1
      'source[src="https://defiris.ec.streamcloud.be/findmedia/11/101631/LR_I101631INT1W.mp4?latest=0004553892"][type="video/mp4"]': 1
    equals:
      'figcaption.ecl-media-container__caption': 'Video caption'
      'p.ecl-u-type-paragraph': "Banner description"
- array:
    '#type': pattern
    '#id': file
    '#fields':
      button_label: "Download"
      file:
        title: "File title example"
        name: "document.pdf"
        url: "http://example.com"
        mime: "application/pdf"
        size: "10000"
        language_code: "en"
  assertions:
    count:
      'svg.ecl-file__icon': 1
      'a.ecl-file__download[href="http://example.com"]': 1
    equals:
      'div.ecl-file__title': "File title example"
      'div.ecl-file__language': "English"
      'div.ecl-file__meta': "(9.77 KB - PDF)"
      'a.ecl-file__download .ecl-link__label': "Download"
- array:
    '#type': pattern
    '#id': file_translation
    '#fields':
      button_label: "Download"
      file:
        variant: "translation"
        title: "File title example"
        name: "document.pdf"
        url: "http://example.com"
        mime: "application/pdf"
        size: "10000"
        language_code: "en"
      translations:
        - mime: "application/vnd.ms-excel"
          url: "http://example.com/document_fr.xls"
          size: "150000"
          name: "document.xls"
          language_code: "fr"
        - mime: "application/vnd.ms-powerpoint"
          url: "http://example.com/document_it.ppt"
          size: "160000"
          name: "document.ppt"
          language_code: "it"
        - mime: "application/pdf"
          url: "http://example.com/document_hu.pdf"
          size: "170000"
          name: "document.pdf"
          language_code: "hu"
      translation_toggle_label: "Other translations"
      more_info: "Custom information snippet."
  assertions:
    count:
      'svg.ecl-file__icon': 1
      'a.ecl-file__download[href="http://example.com"]': 1
      'div.ecl-file__translation-container': 1
      'li.ecl-file__translation-item a.ecl-file__translation-download': 3
      'a.ecl-file__translation-download[href="http://example.com/document_fr.xls"]': 1
      'a.ecl-file__translation-download[href="http://example.com/document_it.ppt"]': 1
      'a.ecl-file__translation-download[href="http://example.com/document_hu.pdf"]': 1
    equals:
      'div.ecl-file__title': "File title example"
      'div.ecl-file__language': "English"
      'div.ecl-file__meta': "(9.77 KB - PDF)"
      'a.ecl-file__download .ecl-link__label': "Download"
      'button.ecl-file__translation-toggle .ecl-button__label': "Other translations (3)"
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-title': "français"
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-meta': "(146.48 KB - XLS)"
      '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-title': "italiano"
      '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-meta': "(156.25 KB - PPT)"
      '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-title': "magyar"
      '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-meta': "(166.02 KB - PDF)"
      '.ecl-file__translation-description': "Custom information snippet."
- array:
    '#type': pattern
    '#id': file_translation
    '#fields':
      button_label: "Download"
      file:
        variant: "translation"
        title: "File title example"
        name: "document.pdf"
        url: "http://example.com"
        mime: "application/pdf"
        size: "10000"
        language_code: "en"
      translations:
        - mime: "application/vnd.ms-excel"
          url: "http://example.com/document_fr.xls"
          size: "150000"
          name: "document.xls"
          language_code: "fr"
      more_info: "Custom information snippet."
  assertions:
    count:
      'svg.ecl-file__icon': 1
      'a.ecl-file__download[href="http://example.com"]': 1
      'div.ecl-file__translation-container': 1
      'li.ecl-file__translation-item a.ecl-file__translation-download': 1
      'a.ecl-file__translation-download[href="http://example.com/document_fr.xls"]': 1
    equals:
      'div.ecl-file__title': "File title example"
      'div.ecl-file__language': "English"
      'div.ecl-file__meta': "(9.77 KB - PDF)"
      'a.ecl-file__download .ecl-link__label': "Download"
      'button.ecl-file__translation-toggle .ecl-button__label': "Available translations (1)"
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-title': "français"
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-meta': "(146.48 KB - XLS)"
      '.ecl-file__translation-description': "Custom information snippet."
- array:
    '#type': pattern
    '#id': file_teaser
    '#fields':
      button_label: "Download"
      teaser: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies."
      file:
        title: "Example document"
        name: "document.pdf"
        url: "http://example.com"
        mime: "application/pdf"
        size: "140000"
        language_code: "en"
      thumbnail:
        src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
        alt: "thumbnail alt"
      resource_type: "RESOURCE TYPE"
      publication_date: "2020-31-08"
      translations:
        - teaser: "Morbi fringilla turpis augue, et interdum ipsum egestas sed. Proin tristique, ante id aliquet malesuada, lorem dolor vulputate magna, a commodo purus ante nec massa."
          file:
            title: "French translation"
            mime: "application/vnd.ms-excel"
            url: "http://example.com/document_fr.xls"
            size: "150000"
            name: "document.xls"
            language_code: "fr"
        - teaser: "Proin sagittis nisi hendrerit purus porta, at suscipit est hendrerit. Duis facilisis augue imperdiet, pharetra nisl sed, molestie nulla."
          file:
            title: "Italian translation"
            mime: "application/vnd.ms-powerpoint"
            url: "http://example.com/document_it.ppt"
            size: "160000"
            name: "document.ppt"
            language_code: "it"
        - teaser: "Duis eget lacinia arcu. Nullam mattis ornare nibh. Proin tristique, ante id aliquet malesuada. Pellentesque porttitor commodo libero sed fringilla. Curabitur varius sodales elit, id tincidunt erat. Aenean tincidunt luctus molestie."
          file:
            title: "Hungarian translation"
            mime: "application/pdf"
            url: "http://example.com/document_hu.pdf"
            size: "170000"
            name: "document.pdf"
            language_code: "hu"
      translation_toggle_label: "Other translations"
      more_info: "Looking for another language which is not on the list? Find out why."
      badges:
        - label: "Highlighted"
          variant: "highlight"
  assertions:
    count:
      'img.ecl-file__image[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"]': 1
      'img.ecl-file__image[alt="thumbnail alt"]': 1
      'a.ecl-file__download[href="http://example.com"]': 1
      'div.ecl-file.ecl-file--thumbnail': 1
      'div.ecl-file__container div.ecl-file__detail div.ecl-file__detail-info': 1
      'div.ecl-file__container div.ecl-file__info': 1
      'div.ecl-file__translation-container': 1
      'ul.ecl-file__translation-list': 1
      'li.ecl-file__translation-item a.ecl-file__translation-download': 3
      'a.ecl-file__translation-download[href="http://example.com/document_fr.xls"]': 1
      'a.ecl-file__translation-download[href="http://example.com/document_it.ppt"]': 1
      'a.ecl-file__translation-download[href="http://example.com/document_hu.pdf"]': 1
      'div.ecl-file__label span.ecl-label.ecl-label--highlight': 1
    equals:
      'div.ecl-file__detail-info div.ecl-file__title': "Example document"
      'div.ecl-file__detail-info div.ecl-file__description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies.'
      'div.ecl-file__detail-info div.ecl-file__detail-meta span.ecl-file__detail-meta-item:nth-child(1)': 'RESOURCE TYPE'
      'div.ecl-file__detail-info div.ecl-file__detail-meta span.ecl-file__detail-meta-item:nth-child(2)': '2020-31-08'
      'div.ecl-file__info div.ecl-file__language': "English"
      'div.ecl-file__info div.ecl-file__meta': "(136.72 KB - PDF)"
      'a.ecl-file__download .ecl-link__label': "Download"
      'button.ecl-file__translation-toggle .ecl-button__label': "Other translations (3)"
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-title': "French translation"
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-description': "Morbi fringilla turpis augue, et interdum ipsum egestas sed. Proin tristique, ante id aliquet malesuada, lorem dolor vulputate magna, a commodo purus ante nec massa."
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-language': "français"
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-meta': "(146.48 KB - XLS)"
      '.ecl-file__translation-item:nth-child(1) .ecl-link__label': "Download"
      '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-title': "Italian translation"
      '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-description': "Proin sagittis nisi hendrerit purus porta, at suscipit est hendrerit. Duis facilisis augue imperdiet, pharetra nisl sed, molestie nulla."
      '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-language': "italiano"
      '.ecl-file__translation-item:nth-child(2) div.ecl-file__translation-meta': "(156.25 KB - PPT)"
      '.ecl-file__translation-item:nth-child(2) .ecl-link__label': "Download"
      '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-title': "Hungarian translation"
      '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-description': "Duis eget lacinia arcu. Nullam mattis ornare nibh. Proin tristique, ante id aliquet malesuada. Pellentesque porttitor commodo libero sed fringilla. Curabitur varius sodales elit, id tincidunt erat. Aenean tincidunt luctus molestie."
      '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-language': "magyar"
      '.ecl-file__translation-item:nth-child(3) div.ecl-file__translation-meta': "(166.02 KB - PDF)"
      '.ecl-file__translation-item:nth-child(3) .ecl-link__label': "Download"
      'li.ecl-file__translation-item.ecl-file__translation-description': "Looking for another language which is not on the list? Find out why."
      'div.ecl-file__label span.ecl-label.ecl-label--highlight': "Highlighted"
- array:
    '#type': pattern
    '#id': file_teaser
    '#fields':
      button_label: "Download"
      teaser: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies."
      file:
        title: "Example document"
        name: "document.pdf"
        url: "http://example.com"
        mime: "application/pdf"
        size: "140000"
        language_code: "en"
      thumbnail:
        src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
        alt: "thumbnail alt"
      resource_type: "RESOURCE TYPE"
      publication_date: "2020-31-08"
      translations:
        - teaser: "Morbi fringilla turpis augue, et interdum ipsum egestas sed. Proin tristique, ante id aliquet malesuada, lorem dolor vulputate magna, a commodo purus ante nec massa."
          file:
            title: "French translation"
            mime: "application/vnd.ms-excel"
            url: "http://example.com/document_fr.xls"
            size: "150000"
            name: "document.xls"
            language_code: "fr"
      lists:
        - term: "Keywords"
          definition:
            - label: 'Apple'
            - label: 'Orange'
        - term: "Country"
          definition:
            - 'Belgium'
            - 'Hungary'
        - term: "External links"
          definition:
            - label: 'First external link'
              path: 'https://example.com/1'
            - label: 'Second external link'
              path: 'https://example.com/2'
              external_link: TRUE
            - path: 'https://example.com/3'
              external_link: TRUE
      more_info: "Looking for another language which is not on the list? Find out why."
      length: 10
  assertions:
    count:
      'img.ecl-file__image[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"]': 1
      'img.ecl-file__image[alt="thumbnail alt"]': 1
      'a.ecl-file__download[href="http://example.com"]': 1
      'div.ecl-file.ecl-file--thumbnail': 1
      'div.ecl-file__container div.ecl-file__detail div.ecl-file__detail-info': 1
      'div.ecl-file__container div.ecl-file__info': 1
      'div.ecl-file__translation-container': 1
      'ul.ecl-file__translation-list': 1
      'li.ecl-file__translation-item a.ecl-file__translation-download': 1
      'a.ecl-file__translation-download[href="http://example.com/document_fr.xls"]': 1
      'div.ecl-file__taxonomy': 1
      'dl.ecl-description-list': 1
      'dt.ecl-description-list__term': 3
      'dd.ecl-description-list__definition.ecl-description-list__definition--taxonomy': 3
      'span.ecl-description-list__definition-item': 7
      'span.ecl-description-list__definition-item a.ecl-link.ecl-link--standalone': 3
      'span.ecl-description-list__definition-item a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-after': 2
      'div.ecl-file__label span.ecl-label.ecl-label--highlight': 0
    equals:
      'div.ecl-file__detail-info div.ecl-file__title': "Example document"
      'div.ecl-file__detail-info div.ecl-file__description': 'Lorem...'
      'div.ecl-file__detail-info div.ecl-file__detail-meta span.ecl-file__detail-meta-item:nth-child(1)': 'RESOURCE TYPE'
      'div.ecl-file__detail-info div.ecl-file__detail-meta span.ecl-file__detail-meta-item:nth-child(2)': '2020-31-08'
      'div.ecl-file__info div.ecl-file__language': "English"
      'div.ecl-file__info div.ecl-file__meta': "(136.72 KB - PDF)"
      'a.ecl-file__download .ecl-link__label': "Download"
      'button.ecl-file__translation-toggle .ecl-button__label': "Available translations (1)"
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-title': "French translation"
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-description': "Morbi..."
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-language': "français"
      '.ecl-file__translation-item:nth-child(1) div.ecl-file__translation-meta': "(146.48 KB - XLS)"
      '.ecl-file__translation-item:nth-child(1) .ecl-link__label': "Download"
      'li.ecl-file__translation-item.ecl-file__translation-description': "Looking for another language which is not on the list? Find out why."
      'dt.ecl-description-list__term:nth-of-type(1)': 'Keywords'
      'dt.ecl-description-list__term:nth-of-type(2)': 'Country'
      'dt.ecl-description-list__term:nth-of-type(3)': 'External links'
      'dd.ecl-description-list__definition--taxonomy:nth-of-type(1) span.ecl-description-list__definition-item:nth-of-type(1)': 'Apple'
      'dd.ecl-description-list__definition--taxonomy:nth-of-type(1) span.ecl-description-list__definition-item:nth-of-type(2)': 'Orange'
      'dd.ecl-description-list__definition--taxonomy:nth-of-type(2) span.ecl-description-list__definition-item:nth-of-type(1)': 'Belgium'
      'dd.ecl-description-list__definition--taxonomy:nth-of-type(2) span.ecl-description-list__definition-item:nth-of-type(2)': 'Hungary'
      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) span.ecl-description-list__definition-item:nth-of-type(1) a[href="https://example.com/1"]': 'First external link'
      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) span.ecl-description-list__definition-item:nth-of-type(2) a[href="https://example.com/2"] .ecl-link__label': 'Second external link'
      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) span.ecl-description-list__definition-item:nth-of-type(2) a svg.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) span.ecl-description-list__definition-item:nth-of-type(3) a[href="https://example.com/3"] .ecl-link__label': 'https://example.com/3'
      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) span.ecl-description-list__definition-item:nth-of-type(3) a svg.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
- array:
    '#type': pattern
    '#id': file_image
    '#fields':
      variant: "image"
      src: "https://placehold.it/450x250"
      alt: "placeholder image"
      caption: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
  assertions:
    count:
      'figure.ecl-media-container': 1
      'img.ecl-media-container__media[src="https://placehold.it/450x250"]': 1
    equals:
      'figcaption.ecl-media-container__caption': "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
- array:
    '#type': pattern
    '#id': file_video
    '#fields':
      variant: "video"
      src: "//defiris.ec.streamcloud.be/findmedia/11/101631/LR_I101631INT1W.mp4?latest=0004553892"
      src_type: "video/mp4"
      caption: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
      tracks:
        src': ""
        kind': "captions"
        src_lang': "en"
        label': "English"
  assertions:
    count:
      'figure.ecl-media-container': 1
      'video.ecl-media-container__media': 1
      'video.ecl-media-container__media source[src="//defiris.ec.streamcloud.be/findmedia/11/101631/LR_I101631INT1W.mp4?latest=0004553892"]': 1
      'video.ecl-media-container__media source[type="video/mp4"]': 1
      'video.ecl-media-container__media track[kind="captions"]': 1
      'video.ecl-media-container__media track[label="English"]': 1
      'video.ecl-media-container__media track[srclang="en"]': 1
    equals:
      'figcaption.ecl-media-container__caption': "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
- array:
    '#type': pattern
    '#id': gallery
    '#variant': default
    '#fields':
      items:
        - thumbnail:
            src: 'https://loremflickr.com/320/240/cat'
            alt: 'Example alt text'
          source: 'https://loremflickr.com/800/600/cat'
          caption: 'A picture of a cat'
          meta: 'Copyright © 2021, Author and Licence'
          media_type: 'image'
  assertions:
    count:
      '.ecl-gallery': 1
      '.ecl-gallery .ecl-gallery__list': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__image[src="https://loremflickr.com/320/240/cat"]': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__image[alt="Example alt text"]': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item figcaption.ecl-gallery__description': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__meta': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item figcaption.ecl-gallery__description svg.ecl-icon': 1
      '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-previous': 0
      '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-next': 0
    equals:
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__meta': 'Copyright © 2021, Author and Licence'
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#image"></use>'
    contains:
      - 'A picture of a cat'
- array:
    '#type': pattern
    '#id': gallery
    '#variant': default
    '#fields':
      items:
        - thumbnail:
            src: 'https://loremflickr.com/320/240/cat'
            alt: 'Example alt text cat'
          source: 'https://loremflickr.com/800/600/cat'
          caption: 'A picture of a cat'
          type: 'image'
        - thumbnail:
            src: 'https://loremflickr.com/320/240/dog'
            alt: 'Example alt text dog'
          source: 'https://www.youtube.com/watch?v=1-g73ty9v04'
          caption: "Energy, let's save it!"
          meta: 'Copyright © 2021 EC'
          type: 'video'
  assertions:
    count:
      '.ecl-gallery': 1
      '.ecl-gallery .ecl-gallery__list': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 2
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image[src="https://loremflickr.com/320/240/cat"]': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image[alt="Example alt text cat"]': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) figcaption.ecl-gallery__description': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__meta': 0
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image-container figcaption.ecl-gallery__description svg.ecl-icon': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) a.ecl-gallery__item-link[href="https://www.youtube.com/watch?v=1-g73ty9v04"]': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image[src="https://loremflickr.com/320/240/dog"]': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image[alt="Example alt text dog"]': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) figcaption.ecl-gallery__description': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 1
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container figcaption.ecl-gallery__description svg.ecl-icon': 1
      '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-previous': 1
      '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-next': 1
    equals:
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image-container svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#image"></use>'
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 'Copyright © 2021 EC'
      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container figcaption.ecl-gallery__description svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#video"></use>'
    contains:
      - 'A picture of a cat'
      - 'Energy, let&#039;s save it!'
- array:
    '#type': pattern
    '#id': list_item
    '#fields':
      url: "http://example.com"
      title: "Item title"
      detail: "Item text"
      meta:
        - "Meta 1"
        - "Meta 2"
      badges:
        - label: "Highlighted"
          variant: "highlight"
        - label: "Status: Open"
          variant: "high"
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
      'article.ecl-content-item div.ecl-content-item__image__before': 0
      'article.ecl-content-item div.ecl-content-item__image__after': 0
      'span.ecl-label.ecl-label--highlight.ecl-u-mr-xs': 1
      'span.ecl-label.ecl-label--high.ecl-u-mr-xs.ecl-u-type-color-black': 1
    equals:
      'article.ecl-content-item div.ecl-content-item__meta span.ecl-label.ecl-label--highlight.ecl-u-mr-xs': "Highlighted"
      'article.ecl-content-item div.ecl-content-item__meta span.ecl-label.ecl-label--high.ecl-u-mr-xs.ecl-u-type-color-black': "Status: Open"
      'article.ecl-content-item div.ecl-content-item__meta div.ecl-u-mt-xs': "Meta 1 | Meta 2"
      'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
      'article.ecl-content-item div.ecl-content-item__description': "Item text"
- array:
    '#type': pattern
    '#id': list_item
    '#fields':
      url: "http://example.com"
      title: "Item title"
      detail: "Item text"
      length: 6
      meta:
        - "Meta 1"
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
      'article.ecl-content-item div.ecl-content-item__image__before': 0
      'article.ecl-content-item div.ecl-content-item__image__after': 0
    equals:
      'article.ecl-content-item div.ecl-content-item__meta div.ecl-u-mt-xs': "Meta 1"
      'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
      'article.ecl-content-item div.ecl-content-item__description': "Item..."
- array:
    '#type': pattern
    '#id': list_item
    '#fields':
      url: "http://example.com"
      title: "Item title"
      additional_information:
        - '#type': pattern
          '#id': field_list
          '#variant': horizontal
          '#fields':
            items:
              - label: "When"
                body: "Thursday 15 November, 08:00 AM to Friday 16 November"
              - label: "Where"
                body: "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
      'article.ecl-content-item div.ecl-content-item__image__before': 0
      'article.ecl-content-item div.ecl-content-item__image__after': 0
      'div.ecl-content-item__additional_information .ecl-description-list.ecl-description-list--horizontal': 1
      'div.ecl-content-item__additional_information .ecl-description-list__term': 2
      'div.ecl-content-item__additional_information .ecl-description-list__definition': 2
      'svg.ecl-icon.ecl-icon--s.ecl-link__icon': 0
    equals:
      'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
      'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(1)': "When"
      'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November"
      'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(3)': "Where"
      'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
- array:
    '#type': pattern
    '#id': list_item
    '#fields':
      url: "http://example.com"
      title: "Item title"
      detail:
        '#markup': '<div>This is the detail. It is long.</div>'
      length: 24
      meta:
        - "Meta 1"
        - "Meta 2"
      icon: "check"
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
      'article.ecl-content-item div.ecl-content-item__image__before': 0
      'article.ecl-content-item div.ecl-content-item__image__after': 0
    equals:
      'a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-after svg.ecl-icon.ecl-icon--s.ecl-link__icon' : '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#check"></use>'
      'article.ecl-content-item div.ecl-content-item__title .ecl-link span.ecl-link__label': "Item title"
      'article.ecl-content-item div.ecl-content-item__meta div.ecl-u-mt-xs': "Meta 1 | Meta 2"
      'article.ecl-content-item div.ecl-content-item__description': "<div>This is the detail. It...</div>"
- array:
    '#type': pattern
    '#id': list_item
    '#fields':
      url: "http://example.com"
      title: "Item title"
      detail:
        '#markup': '<div>This <a href="https://example.com">is the detail</a> with a link. It is long. So it should count properly only the words.</div>'
      length: 30
      meta:
        - "Meta 1"
        - "Meta 2"
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
      'article.ecl-content-item div.ecl-content-item__image__before': 0
      'article.ecl-content-item div.ecl-content-item__image__after': 0
    equals:
      'article.ecl-content-item div.ecl-content-item__meta div.ecl-u-mt-xs': "Meta 1 | Meta 2"
      'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
      'article.ecl-content-item div.ecl-content-item__description': '<div>This <a href="https://example.com">is the detail</a> with a link...</div>'
- array:
    '#type': pattern
    '#id': list_item
    '#fields':
      url: "http://example.com"
      title: "Item title"
      detail:
        '#plain_text': '<div>This is the detail. It is long.</div>'
      length: 24
      meta:
        - "Meta 1"
        - "Meta 2"
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
      'article.ecl-content-item div.ecl-content-item__image__before': 0
      'article.ecl-content-item div.ecl-content-item__image__after': 0
    equals:
      'article.ecl-content-item div.ecl-content-item__meta div.ecl-u-mt-xs': "Meta 1 | Meta 2"
      'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
      'article.ecl-content-item div.ecl-content-item__description': '&lt;div&gt;This is the detail...'
- array:
    '#type': pattern
    '#id': list_item
    '#fields':
      url: "http://example.com"
      title: "Item title"
      detail:
        '#type': 'processed_text'
        '#text': '<div>This is the detail. It is long.</div>'
        '#format': 'plain_text'
      length: 24
      meta:
        - "Meta 1"
        - "Meta 2"
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
      'article.ecl-content-item div.ecl-content-item__image__before': 0
      'article.ecl-content-item div.ecl-content-item__image__after': 0
    equals:
      'article.ecl-content-item div.ecl-content-item__meta div.ecl-u-mt-xs': "Meta 1 | Meta 2"
      'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
      'article.ecl-content-item div.ecl-content-item__description': '<p>&lt;div&gt;This is the detail...</p>'
- array:
    '#type': pattern
    '#id': list_item
    '#fields':
      url: "http://example.com"
      title: "Item title"
      detail:
        '#type': 'processed_text'
        '#text': '<div>This is the detail. It is long.</div>'
        '#format': 'plain_text'
      length: 24
      meta:
        - "Meta 1"
        - "Meta 2"
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
      'article.ecl-content-item div.ecl-content-item__image__before': 0
      'article.ecl-content-item div.ecl-content-item__image__after': 0
      'article > div .ecl-description-list': 0
    equals:
      'article.ecl-content-item div.ecl-content-item__meta div.ecl-u-mt-xs': "Meta 1 | Meta 2"
      'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
      'article.ecl-content-item div.ecl-content-item__description': '<p>&lt;div&gt;This is the detail...</p>'
- array:
    '#type': pattern
    '#id': list_item
    '#fields':
      detail: "This is a very long description. Better to trim it off."
      length: 32
  assertions:
    equals:
      'article.ecl-content-item div.ecl-content-item__description': "This is a very long description..."
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "thumbnail_primary"
    '#fields':
      detail: "This is a very long description. Better to trim it off."
      length: 32
  assertions:
    equals:
      'article.ecl-content-item div.ecl-content-item__description': "This is a very long description..."
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "thumbnail_secondary"
    '#fields':
      detail: "This is a very long description. Better to trim it off."
      length: 32
  assertions:
    equals:
      'article.ecl-content-item div.ecl-content-item__description': "This is a very long description..."
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "navigation"
    '#fields':
      detail: "This is a very long description. Better to trim it off."
      length: 32
  assertions:
    equals:
      'article.ecl-content-item div.ecl-content-item__description': "This is a very long description..."
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "thumbnail_primary"
    '#fields':
      title: "Item title"
      url: "http://example.com"
      detail: "Item text"
      image:
        src: "http://via.placeholder.com/150x150"
        alt: "Alternate text for primary image"
      meta:
        - "Meta 1"
        - "Meta 2"
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[aria-label="Alternate text for primary image"].ecl-u-d-l-block': 1
      'article.ecl-content-item div.ecl-content-item__image__before': 1
      'article.ecl-content-item div.ecl-content-item__image__after': 0
    equals:
      'article.ecl-content-item div.ecl-content-item__meta div.ecl-u-mt-xs': "Meta 1 | Meta 2"
      'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
      'article.ecl-content-item div.ecl-content-item__description': "Item text"
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "thumbnail_secondary"
    '#fields':
      title: "Item title"
      url: "http://example.com"
      detail: "Item text"
      image:
        src: "http://via.placeholder.com/120x80"
        alt: "Alternate text for secondary image"
      meta:
        - "Meta 1"
        - "Meta 2"
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[aria-label="Alternate text for secondary image"].ecl-u-d-l-block': 1
      'article.ecl-content-item div.ecl-content-item__image__before': 0
      'article.ecl-content-item div.ecl-content-item__image__after': 1
    equals:
      'article.ecl-content-item div.ecl-content-item__meta div.ecl-u-mt-xs': "Meta 1 | Meta 2"
      'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
      'article.ecl-content-item div.ecl-content-item__description': "Item text"
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "highlight"
    '#fields':
      title: "Item title"
      url: "http://example.com"
      image:
        src: "http://via.placeholder.com/300x300"
        alt: "Alternate text for secondary image"
      badges:
        - label: "Highlighted"
          variant: "highlight"
        - label: "Status: Open"
          variant: "high"
  assertions:
    count:
      article.ecl-card div.ecl-card__body div.ecl-content-block.ecl-card__content-block: 1
      article.ecl-card div.ecl-card__body h1.ecl-content-block__title a.ecl-link--standalone[href="http://example.com"]: 1
      article.ecl-card div.ecl-card__image[aria-label="Alternate text for secondary image"]: 1
      article.ecl-card div.ecl-card__image[style="background-image:url('http://via.placeholder.com/300x300')"]: 1
      article.ecl-card div.ecl-card__body ul.ecl-content-block__primary-meta-container: 0
      article.ecl-card div.ecl-card__body div.ecl-content-block__description: 0
      article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container: 1
      ul.ecl-content-block__label-container li.ecl-content-block__label-item: 2
    equals:
      article.ecl-card div.ecl-card__body h1.ecl-content-block__title .ecl-link: "Item title"
      ul.ecl-content-block__label-container li.ecl-content-block__label-item:nth-child(1) span.ecl-label.ecl-label--highlight: "Highlighted"
      ul.ecl-content-block__label-container li.ecl-content-block__label-item:nth-child(2) span.ecl-label.ecl-label--high: "Status: Open"
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "highlight"
    '#fields':
      title: "Item title"
      url: "http://example.com"
      image:
        src: "http://via.placeholder.com/300x300"
        alt: "Alternate text for secondary image"
      detail: "This is a very long description. Better to trim it off."
      length: 32
  assertions:
    count:
      article.ecl-card div.ecl-card__body h1.ecl-content-block__title a.ecl-link--standalone[href="http://example.com"]: 1
      article.ecl-card div.ecl-card__image[aria-label="Alternate text for secondary image"]: 1
      article.ecl-card div.ecl-card__image[style="background-image:url('http://via.placeholder.com/300x300')"]: 1
      article.ecl-card div.ecl-card__body ul.ecl-content-block__primary-meta-container: 0
      article.ecl-card div.ecl-card__body div.ecl-content-block__description: 1
      article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container: 0
    equals:
      article.ecl-card div.ecl-card__body h1.ecl-content-block__title .ecl-link: "Item title"
      article.ecl-card div.ecl-card__body div.ecl-content-block__description: "This is a very long description..."
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "block"
    '#fields':
      title: "Item title"
      url: "http://example.com"
      detail: "Item test"
      badges:
        - label: "Highlighted"
          variant: "highlight"
        - label: "Status: Open"
          variant: "high"
  assertions:
    count:
      'article.ecl-card div.ecl-card__body h1.ecl-content-block__title a.ecl-link--standalone[href="http://example.com"]': 1
      'article.ecl-card div.ecl-card__image': 0
      'article.ecl-card div.ecl-card__body ul.ecl-content-block__primary-meta-container': 0
      'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 1
      'ul.ecl-content-block__label-container li.ecl-content-block__label-item': 2
    equals:
      'article.ecl-card div.ecl-card__body h1.ecl-content-block__title .ecl-link': "Item title"
      'article.ecl-card div.ecl-card__body div.ecl-content-block__description': "Item test"
      'ul.ecl-content-block__label-container li.ecl-content-block__label-item:nth-child(1) span.ecl-label.ecl-label--highlight': "Highlighted"
      'ul.ecl-content-block__label-container li.ecl-content-block__label-item:nth-child(2) span.ecl-label.ecl-label--high': "Status: Open"
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "date"
    '#fields':
      title: "Item title"
      url: "http://example.com"
      detail: "Item text"
      date:
        day: '14'
        month_fullname: 'July'
        month_name: 'Jul'
        month: '7'
        year: '2021'
      meta:
        - "News article"
        - "6 July 2015"
      badges:
        - label: "Highlighted"
          variant: "highlight"
        - label: "Status: Open"
          variant: "medium"
  assertions:
    count:
      'article.ecl-content-item-date div.ecl-content-item-date__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item-date div.ecl-content-item-date__date': 1
      'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month[title="July"]': 1
      'span.ecl-label.ecl-label--highlight.ecl-u-mr-xs': 1
      'span.ecl-label.ecl-label--medium.ecl-u-mr-xs.ecl-u-type-color-black': 1
    equals:
      'article.ecl-content-item-date div.ecl-content-item-date__meta span.ecl-label.ecl-label--highlight.ecl-u-mr-xs': "Highlighted"
      'article.ecl-content-item-date div.ecl-content-item-date__meta span.ecl-label.ecl-label--medium.ecl-u-mr-xs.ecl-u-type-color-black': "Status: Open"
      'article.ecl-content-item-date div.ecl-content-item-date__meta div.ecl-u-mt-xs': "News article | 6 July 2015"
      'article.ecl-content-item-date div.ecl-content-item-date__title .ecl-link': "Item title"
      'article.ecl-content-item-date div.ecl-content-item-date__description': "Item text"
      'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__day': '14'
      'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month': 'Jul'
      'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__year': '2021'
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "date"
    '#fields':
      title: "Item title"
      url: "http://example.com"
      detail: "Item text"
      date:
        day: '14'
        month_fullname: 'July'
        month_name: 'Jul'
        month: '7'
        year: '2021'
      meta:
        - "News article"
        - "6 July 2015"
      additional_information:
        - '#type': pattern
          '#id': field_list
          '#variant': horizontal
          '#fields':
            items:
              - label: "When"
                body: "Thursday 15 November, 08:00 AM to Friday 16 November"
              - label: "Where"
                body: "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
  assertions:
    count:
      'article.ecl-content-item-date div.ecl-content-item-date__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item-date div.ecl-content-item-date__date': 1
      'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month[title="July"]': 1
      'div.ecl-content-item__additional_information .ecl-description-list.ecl-description-list--horizontal': 1
      'div.ecl-content-item__additional_information .ecl-description-list__term': 2
      'div.ecl-content-item__additional_information .ecl-description-list__definition': 2
    equals:
      'article.ecl-content-item-date div.ecl-content-item-date__meta div.ecl-u-mt-xs': "News article | 6 July 2015"
      'article.ecl-content-item-date div.ecl-content-item-date__title .ecl-link': "Item title"
      'article.ecl-content-item-date div.ecl-content-item-date__description': "Item text"
      'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__day': '14'
      'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month': 'Jul'
      'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__year': '2021'
      'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(1)': "When"
      'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November"
      'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(3)': "Where"
      'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "date_cancelled"
    '#fields':
      date:
        day: '14'
        month_fullname: 'July'
        month_name: 'Jul'
        month: '7'
        year: '2021'
  assertions:
    count:
      'time.ecl-date-block.ecl-date-block--canceled': 1
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "date_ongoing"
    '#fields':
      date:
        day: '14'
        month_fullname: 'July'
        month_name: 'Jul'
        month: '7'
        year: '2021'
  assertions:
    count:
      'time.ecl-date-block.ecl-date-block--ongoing': 1
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "date_past"
    '#fields':
      date:
        day: '14'
        month_fullname: 'July'
        month_name: 'Jul'
        month: '7'
        year: '2021'
  assertions:
    count:
      'time.ecl-date-block.ecl-date-block--past': 1
- array:
    '#type': pattern
    '#id': list_item
    '#variant': "navigation"
    '#fields':
      title: "Item title"
      url: "http://example.com"
      detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
  assertions:
    count:
      'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1
      'article.ecl-content-item div[role="img"].ecl-u-d-l-block': 0
      'article.ecl-content-item div.ecl-content-item__image__before': 0
      'article.ecl-content-item div.ecl-content-item__image__after': 0
    equals:
      'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title"
      'article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- array:
    '#type': pattern
    '#id': list_item_block_one_column
    '#fields':
      title: "Block title"
      items:
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "Business, Economy, Euro"
            detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
      button_label: "View all"
      button_url: "http://example.com"
      external_link: true
  assertions:
    count:
      'div.ecl-content-item-block__title': 1
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 1
      'div.ecl-content-item-block__item': 1
      'div.ecl-content-item-block__item.ecl-col-12': 1
      'div.ecl-content-item-block__item.ecl-col-m-6': 0
      'div.ecl-content-item-block__item.ecl-col-m-4': 0
      'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
      'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
      'div.ecl-content-item-block__item.ecl-col-m-4 article.ecl-content-item': 0
      'div.ecl-content-item-block__button': 1
      'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 1
      'div.ecl-content-item-block__button a.ecl-link--icon.ecl-link--standalone svg': 1
    equals:
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': "Block title"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
      'a.ecl-link span.ecl-link__label': "View all"
      'svg.ecl-icon.ecl-icon--xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
- array:
    '#type': pattern
    '#id': list_item_block_one_column
    '#fields':
      items:
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "Business, Economy, Euro"
            detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
      button_label: "View all"
      button_url: "http://example.com"
      button_icon_position: 'before'
      button_icon_name: 'list'
      external_link: true
  assertions:
    count:
      'div.ecl-content-item-block__title': 0
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 0
      'div.ecl-content-item-block__item': 1
      'div.ecl-content-item-block__item.ecl-col-12': 1
      'div.ecl-content-item-block__item.ecl-col-m-6': 0
      'div.ecl-content-item-block__item.ecl-col-m-4': 0
      'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
      'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
      'div.ecl-content-item-block__item.ecl-col-m-4 article.ecl-content-item': 0
      'div.ecl-content-item-block__button': 1
      'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 1
      'div.ecl-content-item-block__button a.ecl-link--standalone.ecl-link--icon-after svg': 1
    equals:
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
      'a.ecl-link span.ecl-link__label': "View all"
      'svg.ecl-icon.ecl-icon--xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
- array:
    '#type': pattern
    '#id': list_item_block_one_column
    '#fields':
      title: "Block title"
      items:
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "Business, Economy, Euro"
            detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
      button_label: "View all"
      button_url: "http://example.com"
      external_link: false
      button_icon_name: 'list'
      button_icon_position: 'before'
  assertions:
    count:
      'div.ecl-content-item-block__title': 1
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 1
      'div.ecl-content-item-block__item': 1
      'div.ecl-content-item-block__item.ecl-col-12': 1
      'div.ecl-content-item-block__item.ecl-col-m-6': 0
      'div.ecl-content-item-block__item.ecl-col-m-4': 0
      'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
      'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
      'div.ecl-content-item-block__item.ecl-col-m-4 article.ecl-content-item': 0
      'div.ecl-content-item-block__button': 1
      'div.ecl-content-item-block__button a.ecl-link--standalone.ecl-link--icon-before svg': 1
      'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 1
    equals:
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': "Block title"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
      'a.ecl-link span.ecl-link__label': "View all"
      'svg.ecl-icon.ecl-icon--xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#list"></use>'
- array:
    '#type': pattern
    '#id': list_item_block_one_column
    '#fields':
      items:
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "Business, Economy, Euro"
            detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
  assertions:
    count:
      'div.ecl-content-item-block__title': 0
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 0
      'div.ecl-content-item-block__item': 1
      'div.ecl-content-item-block__item.ecl-col-12': 1
      'div.ecl-content-item-block__item.ecl-col-m-6': 0
      'div.ecl-content-item-block__item.ecl-col-m-4': 0
      'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
      'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
      'div.ecl-content-item-block__item.ecl-col-m-4 article.ecl-content-item': 0
      'div.ecl-content-item-block__button': 0
      'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0
    equals:
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
- array:
    '#type': pattern
    '#id': list_item_block_one_column
    '#fields':
      title: "Block title"
      items:
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "Business, Economy, Euro"
            detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
      button_label: "View all"
      button_url: "http://example.com"
      button_icon_name: "list"
  assertions:
    count:
      'div.ecl-content-item-block__title': 1
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 1
      'div.ecl-content-item-block__item': 1
      'div.ecl-content-item-block__item.ecl-col-12': 1
      'div.ecl-content-item-block__item.ecl-col-m-6': 0
      'div.ecl-content-item-block__item.ecl-col-m-4': 0
      'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
      'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
      'div.ecl-content-item-block__item.ecl-col-m-4 article.ecl-content-item': 0
      'div.ecl-content-item-block__button': 1
      'div.ecl-content-item-block__button a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
    equals:
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': "Block title"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
      'a.ecl-link': '<span class="ecl-link__label">View all</span><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#list"></use></svg>'
- array:
    '#type': pattern
    '#id': list_item_block_one_column
    '#fields':
      title: "Block title"
      items:
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "Business, Economy, Euro"
            detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
      button_label: "View all"
      button_url: "http://example.com"
      button_icon_name: "list"
      button_icon_position: "before"
  assertions:
    count:
      'div.ecl-content-item-block__title': 1
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 1
      'div.ecl-content-item-block__item': 1
      'div.ecl-content-item-block__item.ecl-col-12': 1
      'div.ecl-content-item-block__item.ecl-col-m-6': 0
      'div.ecl-content-item-block__item.ecl-col-m-4': 0
      'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1
      'div.ecl-content-item-block__item.ecl-col-m-6 article.ecl-content-item': 0
      'div.ecl-content-item-block__item.ecl-col-m-4 article.ecl-content-item': 0
      'div.ecl-content-item-block__button': 1
      'div.ecl-content-item-block__button a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-before[href="http://example.com"]': 1
    equals:
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': "Block title"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
      'a.ecl-link': '<svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#list"></use></svg><span class="ecl-link__label">View all</span>'
- array:
    '#type': pattern
    '#id': list_item_block_two_columns
    '#fields':
      items:
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "List item 1"
            detail: "Description for list item 1."
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "List item 2"
            detail: "Description for list item 2."
  assertions:
    count:
      'div.ecl-content-item-block__title': 0
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 0
      'div.ecl-content-item-block__item': 2
      'div.ecl-content-item-block__item.ecl-col-l-6': 2
      'div.ecl-content-item-block__item.ecl-col-l-4': 0
      'div.ecl-content-item-block__item.ecl-col-l-6 article.ecl-content-item': 2
      'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 0
      'div.ecl-content-item-block__button': 0
      'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0
    equals:
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "List item 1"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "Description for list item 1."
      'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__title': "List item 2"
      'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__description': "Description for list item 2."
- array:
    '#type': pattern
    '#id': list_item_block_two_columns
    '#fields':
      items:
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "List item 1"
            detail: "Description for list item 1."
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "List item 2"
            detail: "Description for list item 2."
      button_label: "View all"
      button_url: "http://example.com"
      button_icon_name: "list"
      button_icon_position: "before"
  assertions:
    count:
      'div.ecl-content-item-block__title': 0
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 0
      'div.ecl-content-item-block__item': 2
      'div.ecl-content-item-block__item.ecl-col-l-6': 2
      'div.ecl-content-item-block__item.ecl-col-l-4': 0
      'div.ecl-content-item-block__item.ecl-col-l-6 article.ecl-content-item': 2
      'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 0
      'div.ecl-content-item-block__button': 1
      'div.ecl-content-item-block__button a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-before[href="http://example.com"]': 1
    equals:
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "List item 1"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "Description for list item 1."
      'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__title': "List item 2"
      'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__description': "Description for list item 2."
      'a.ecl-link': '<svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#list"></use></svg><span class="ecl-link__label">View all</span>'
- array:
    '#type': pattern
    '#id': list_item_block_three_columns
    '#fields':
      items:
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "List item 1"
            detail: "Description for list item 1."
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "List item 2"
            detail: "Description for list item 2."
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "List item 3"
            detail: "Description for list item 3."
  assertions:
    count:
      'div.ecl-content-item-block__title': 0
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 0
      'div.ecl-content-item-block__item': 3
      'div.ecl-content-item-block__item.ecl-col-l-6': 0
      'div.ecl-content-item-block__item.ecl-col-l-4': 3
      'div.ecl-content-item-block__item.ecl-col-l-6 article.ecl-content-item': 0
      'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 3
      'div.ecl-content-item-block__button': 0
      'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0
    equals:
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "List item 1"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "Description for list item 1."
      'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__title': "List item 2"
      'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__description': "Description for list item 2."
      'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__title': "List item 3"
      'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__description': "Description for list item 3."
- array:
    '#type': pattern
    '#id': list_item_block_three_columns
    '#fields':
      items:
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "List item 1"
            detail: "Description for list item 1."
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "List item 2"
            detail: "Description for list item 2."
        - '#type': "pattern"
          '#id': "list_item"
          '#fields':
            title: "List item 3"
            detail: "Description for list item 3."
      button_label: "View all"
      button_url: "http://example.com"
      button_icon_name: "language"
      button_icon_position: "after"
  assertions:
    count:
      'div.ecl-content-item-block__title': 0
      'div.ecl-content-item-block__title h2.ecl-u-type-heading-2': 0
      'div.ecl-content-item-block__item': 3
      'div.ecl-content-item-block__item.ecl-col-l-6': 0
      'div.ecl-content-item-block__item.ecl-col-l-4': 3
      'div.ecl-content-item-block__item.ecl-col-l-6 article.ecl-content-item': 0
      'div.ecl-content-item-block__item.ecl-col-l-4 article.ecl-content-item': 3
      'div.ecl-content-item-block__button': 1
      'div.ecl-content-item-block__button a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-after[href="http://example.com"]': 1
    equals:
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "List item 1"
      'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "Description for list item 1."
      'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__title': "List item 2"
      'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__description': "Description for list item 2."
      'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__title': "List item 3"
      'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__description': "Description for list item 3."
      'a.ecl-link': '<span class="ecl-link__label">View all</span><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#language"></use></svg>'
- array:
    '#type': pattern
    '#id': list_item_block_four_columns
    '#fields':
      items:
        - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 1' } }
        - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 2' } }
        - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 3' } }
        - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 4' } }
      button_label: "View all"
      button_url: "http://example.com"
      button_icon_name: "list"
      button_icon_position: "before"
  assertions:
    equals:
      'div.ecl-content-item-block__item.ecl-col-l-3:nth-child(1) a.ecl-link': 'A simple link 1'
      'div.ecl-content-item-block__item.ecl-col-l-3:nth-child(2) a.ecl-link': 'A simple link 2'
      'div.ecl-content-item-block__item.ecl-col-l-3:nth-child(3) a.ecl-link': 'A simple link 3'
      'div.ecl-content-item-block__item.ecl-col-l-3:nth-child(4) a.ecl-link': 'A simple link 4'
      'a.ecl-link--icon-before': '<svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#list"></use></svg><span class="ecl-link__label">View all</span>'
- array:
    '#type': pattern
    '#id': list_item_block_six_columns
    '#fields':
      items:
        - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 1' } }
        - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 2' } }
        - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 3' } }
        - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 4' } }
        - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 5' } }
        - { '#type': 'pattern', '#id': 'link', '#fields': { url: '#', text: 'A simple link 6' } }
      button_label: "View all"
      button_url: "http://example.com"
      button_icon_name: "list"
      button_icon_position: "before"
  assertions:
    equals:
      'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(1) a.ecl-link': 'A simple link 1'
      'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(2) a.ecl-link': 'A simple link 2'
      'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(3) a.ecl-link': 'A simple link 3'
      'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(4) a.ecl-link': 'A simple link 4'
      'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(5) a.ecl-link': 'A simple link 5'
      'div.ecl-content-item-block__item.ecl-col-l-2:nth-child(6) a.ecl-link': 'A simple link 6'
      'a.ecl-link--icon-before': '<svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#list"></use></svg><span class="ecl-link__label">View all</span>'
- array:
    '#type': pattern
    '#id': navigation_list
    '#fields':
      title: 'Navigation list title'
      title_url: 'http://example.com'
      description: 'Navigation list description'
      links:
        - label: 'Child 1'
          url: 'http://example.com/child1'
        - label: 'Child 2'
          url: 'http://example.com/child2'
        - label: 'Child 3'
          url: 'http://example.com/child3'
      secondary_links:
        - label: 'Secondary Link 1'
          url: 'http://example.com/secondary1'
        - label: 'Secondary Link 2'
          url: 'http://example.com/secondary2'
  assertions:
    equals:
      'h2.ecl-u-ma-none.ecl-u-type-prolonged-xl.ecl-u-type-bold a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
      'p.ecl-u-mb-none.ecl-u-mt-m.ecl-u-type-color-grey.ecl-u-type-paragraph': 'Navigation list description'
      'li.ecl-unordered-list__item:nth-child(1) a.ecl-link[href="http://example.com/child1"]': 'Child 1'
      'li.ecl-unordered-list__item:nth-child(2) a.ecl-link[href="http://example.com/child2"]': 'Child 2'
      'li.ecl-unordered-list__item:nth-child(3) a.ecl-link[href="http://example.com/child3"]': 'Child 3'
      'div.ecl-u-border-top li.ecl-unordered-list__item:nth-child(1) a.ecl-link[href="http://example.com/secondary1"]': 'Secondary Link 1'
      'div.ecl-u-border-top li.ecl-unordered-list__item:nth-child(2) a.ecl-link[href="http://example.com/secondary2"]': 'Secondary Link 2'
    count:
      ul.ecl-u-mt-m.ecl-unordered-list.ecl-unordered-list--no-bullet: 2
      li.ecl-unordered-list__item: 5
- array:
    '#type': pattern
    '#id': navigation_list
    '#fields':
      title: 'Navigation list title'
      title_url: 'http://example.com'
      description: 'Navigation list description'
  assertions:
    equals:
      'h2.ecl-u-ma-none.ecl-u-type-prolonged-xl.ecl-u-type-bold a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
      'p.ecl-u-mb-none.ecl-u-mt-m.ecl-u-type-color-grey.ecl-u-type-paragraph': 'Navigation list description'
    count:
      ul.ecl-u-mt-m.ecl-unordered-list.ecl-unordered-list--no-bullet: 0
      li.ecl-unordered-list__item: 0
      div.ecl-u-border-top: 0
- array:
    '#type': pattern
    '#id': navigation_list
    '#fields':
      title: 'Navigation list title'
      title_url: 'http://example.com'
      links:
        - label: 'Child 1'
          url: 'http://example.com/child1'
        - label: 'Child 2'
          url: 'http://example.com/child2'
        - label: 'Child 3'
          url: 'http://example.com/child3'
  assertions:
    equals:
      'h2.ecl-u-ma-none.ecl-u-type-prolonged-xl.ecl-u-type-bold a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
      'li.ecl-unordered-list__item:nth-child(1) a.ecl-link[href="http://example.com/child1"]': 'Child 1'
      'li.ecl-unordered-list__item:nth-child(2) a.ecl-link[href="http://example.com/child2"]': 'Child 2'
      'li.ecl-unordered-list__item:nth-child(3) a.ecl-link[href="http://example.com/child3"]': 'Child 3'
    count:
      ul.ecl-u-mt-m.ecl-unordered-list.ecl-unordered-list--no-bullet: 1
      li.ecl-unordered-list__item: 3
      'p.ecl-u-mb-none.ecl-u-mt-m.ecl-u-type-color-grey.ecl-u-type-paragraph': 0
      div.ecl-u-border-top: 0
- array:
    '#type': pattern
    '#id': accordion
    '#fields':
      identifier: "id"
      items:
        - title: "Title 1"
          body: "Body 1"
        - title: "Title 2"
          body: "Body 2"
  assertions:
    count:
      '.ecl-accordion__title': 2
      '.ecl-accordion__title button.ecl-accordion__toggle .ecl-accordion__toggle-icon': 2
      '.ecl-accordion__title button.ecl-accordion__toggle .ecl-accordion__toggle-title': 2
      '.ecl-accordion__content#id-0-content': 1
      '.ecl-accordion__content#id-1-content': 1
    equals:
      '.ecl-accordion__title button.ecl-accordion__toggle[aria-controls="id-0-content"] .ecl-accordion__toggle-title': "Title 1"
      '.ecl-accordion__content#id-0-content': "Body 1"
      '.ecl-accordion__title button.ecl-accordion__toggle[aria-controls="id-1-content"] .ecl-accordion__toggle-title': "Title 2"
      '.ecl-accordion__content#id-1-content': "Body 2"
- array:
    '#type': pattern
    '#id': dropdown
    '#fields':
      button_label: "Dropdown"
      links:
        - label: 'Link 1'
          url: 'http://example.com/1'
        - label: 'Link 2'
          url: 'http://example.com/2'
        - label: 'Link 3'
          url: 'http://example.com/3'
  assertions:
    count:
      '.ecl-expandable-dropdown__content a[href="http://example.com/1"]': 1
      '.ecl-expandable-dropdown__content a[href="http://example.com/2"]': 1
      '.ecl-expandable-dropdown__content a[href="http://example.com/3"]': 1
    equals:
      'button.ecl-expandable__toggle span.ecl-button__label': "Dropdown"
      '.ecl-expandable-dropdown__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(1) a': "Link 1"
      '.ecl-expandable-dropdown__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(2) a': "Link 2"
      '.ecl-expandable-dropdown__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(3) a': "Link 3"
- array:
    '#type': pattern
    '#id': field
    '#variant': default
    '#fields':
      label: "Field text"
      body: "Field body"
  assertions:
    count:
      '.ecl-description-list.ecl-description-list--default': 1
      '.ecl-description-list__term': 1
      '.ecl-description-list__definition': 1
    equals:
      '.ecl-description-list__term': "Field text"
      '.ecl-description-list__definition': "Field body"
- array:
    '#type': pattern
    '#id': field
    '#variant': horizontal
    '#fields':
      label: "Field label"
      body: "Field body"
  assertions:
    count:
      '.ecl-description-list.ecl-description-list--horizontal': 1
      '.ecl-description-list__term': 1
      '.ecl-description-list__definition': 1
    equals:
      '.ecl-description-list__term': "Field label"
      '.ecl-description-list__definition': "Field body"
- array:
    '#type': pattern
    '#id': field_list
    '#variant': horizontal
    '#fields':
      items:
        - label: "When"
          body: "Thursday 15 November, 08:00 AM to Friday 16 November"
        - label: "Where"
          body: "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
        - label: "Live streaming"
          body: "08:00 CET | 00d:23h:35m"
  assertions:
    count:
      '.ecl-description-list.ecl-description-list--horizontal': 1
      '.ecl-description-list__term': 3
      '.ecl-description-list__definition': 3
    equals:
      '.ecl-description-list .ecl-description-list__term:nth-child(1)': "When"
      '.ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November"
      '.ecl-description-list .ecl-description-list__term:nth-child(3)': "Where"
      '.ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
      '.ecl-description-list .ecl-description-list__term:nth-child(5)': "Live streaming"
      '.ecl-description-list .ecl-description-list__definition:nth-child(6)': "08:00 CET | 00d:23h:35m"
- array:
    '#type': pattern
    '#variant': default
    '#id': field_list
    '#fields':
      items:
        - label: "When"
          body: "Thursday 15 November, 08:00 AM to Friday 16 November"
        - label: "Where"
          body: "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
        - label: "Live streaming"
          body: "08:00 CET | 00d:23h:35m"
  assertions:
    count:
      '.ecl-description-list.ecl-description-list--default': 1
      '.ecl-description-list__term': 3
      '.ecl-description-list__definition': 3
    equals:
      '.ecl-description-list .ecl-description-list__term:nth-child(1)': "When"
      '.ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November"
      '.ecl-description-list .ecl-description-list__term:nth-child(3)': "Where"
      '.ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
      '.ecl-description-list .ecl-description-list__term:nth-child(5)': "Live streaming"
      '.ecl-description-list .ecl-description-list__definition:nth-child(6)': "08:00 CET | 00d:23h:35m"
- array:
    '#type': pattern
    '#id': link_block
    '#fields':
      title: "Link block title"
      links:
        - label: 'Link 1'
          url: 'http://link-1.com'
          is_external: true
        - label: 'Link 2'
          url: 'http://link-2.com'
          is_external: true
        - label: 'Link 3'
          url: 'http://link-3.com'
  assertions:
    count:
      '.ecl-link-block__title': 1
      '.ecl-link-block__item': 3
      'a.ecl-link-block__link[href="http://link-1.com"]': 1
      'a.ecl-link-block__link[href="http://link-2.com"]': 1
      'a.ecl-link-block__link[href="http://link-3.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-link__icon': 2
    equals:
      '.ecl-link-block__title h5': "Link block title"
      '.ecl-link-block__list .ecl-link-block__item:nth-child(1) .ecl-link .ecl-link__label': "Link 1"
      '.ecl-link-block__list .ecl-link-block__item:nth-child(1) .ecl-link svg.ecl-icon.ecl-icon--xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      '.ecl-link-block__list .ecl-link-block__item:nth-child(2) .ecl-link .ecl-link__label': "Link 2"
      '.ecl-link-block__list .ecl-link-block__item:nth-child(2) .ecl-link svg.ecl-icon.ecl-icon--xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      '.ecl-link-block__list .ecl-link-block__item:nth-child(3) .ecl-link': "Link 3"
- array:
    '#type': pattern
    '#id': link_block
    '#fields':
      links:
        - label: 'Link 1'
          url: 'http://link-1.com'
        - label: 'Link 2'
          url: 'http://link-2.com'
        - label: 'Link 3'
          url: 'http://link-3.com'
  assertions:
    count:
      '.ecl-link-block__title': 0
      '.ecl-link-block__item': 3
      'a.ecl-link-block__link[href="http://link-1.com"]': 1
      'a.ecl-link-block__link[href="http://link-2.com"]': 1
      'a.ecl-link-block__link[href="http://link-3.com"]': 1
    equals:
      '.ecl-link-block__list .ecl-link-block__item:nth-child(1) .ecl-link': "Link 1"
      '.ecl-link-block__list .ecl-link-block__item:nth-child(2) .ecl-link': "Link 2"
      '.ecl-link-block__list .ecl-link-block__item:nth-child(3) .ecl-link': "Link 3"
- array:
    '#type': pattern
    '#id': blockquote
    '#fields':
      body: "Quote text"
      author: "Quote author"
  assertions:
    count:
      'img.ecl-blockquote__image': 0
    equals:
      '.ecl-blockquote__author': "Quote author"
      '.ecl-blockquote__citation': "Quote text"
- array:
    '#type': pattern
    '#id': blockquote
    '#fields':
      body: "Quote text"
      author: "Quote author"
      image:
        src: "http://via.placeholder.com/120x80"
        alt: "Alternative of image"
  assertions:
    count:
      'img.ecl-blockquote__image[src="http://via.placeholder.com/120x80"]': 1
      'img.ecl-blockquote__image[alt="Alternative of image"]': 1
    equals:
      '.ecl-blockquote__author': "Quote author"
      '.ecl-blockquote__citation': "Quote text"
- array:
    '#type': pattern
    '#id': context_nav
    '#fields':
      label: "Navigation title"
      items:
        - href: "http://link-1.com"
          label: "Item one"
          is_external: true
        - href: "http://link-2.com"
          label: "Item two"
        - href: "http://link-3.com"
          label: "Item three"
          is_external: true
        - href: "http://link-4.com"
          label: "Item four"
        - href: "http://link-5.com"
          label: "Item five"
          is_external: true
      limit: 4
      more_label: "More label"
  assertions:
    count:
      'li.ecl-contextual-navigation__item': 6
      'li.ecl-contextual-navigation__item--collapsed': 1
      'li.ecl-contextual-navigation__item--more': 1
      'span.ecl-link__label': 3
    equals:
      'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-1.com"] span.ecl-link__label': "Item one"
      'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-1.com"] svg.ecl-icon.ecl-icon--2xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-2.com"]': "Item two"
      'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-3.com"] span.ecl-link__label': "Item three"
      'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-3.com"] svg.ecl-icon.ecl-icon--2xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-4.com"]': "Item four"
      'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-5.com"] span.ecl-link__label': "Item five"
      'li.ecl-contextual-navigation__item a.ecl-contextual-navigation__link[href="http://link-5.com"] svg.ecl-icon.ecl-icon--2xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      'div.ecl-contextual-navigation__label': "Navigation title"
      'button.ecl-contextual-navigation__more .ecl-button__label': "More label"
- array:
    '#type': pattern
    '#id': button
    '#variant': default
    '#fields':
      label: "Button label"
      href: "http://example.com"
      icon: "caret-right"
      icon_position: "before"
      type_attribute: "default"
  assertions:
    count:
      'a.ecl-link--icon-before': 1
      'a.ecl-link--icon-before svg': 1
    equals:
      'a.ecl-link--standalone[href="http://example.com"] .ecl-link__label': "Button label"
      'svg.ecl-icon.ecl-icon--s.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#caret-right"></use>'
- array:
    '#type': pattern
    '#id': button
    '#variant': default
    '#fields':
      label: "Button label"
      href: "http://example.com"
      icon: "caret-right"
      icon_position: "before"
      type_attribute: "default"
      external_link: true
  assertions:
    count:
      'a.ecl-link--icon-after svg': 1
      'a.ecl-link--icon-before svg': 0
    equals:
      'a.ecl-link--standalone[href="http://example.com"] .ecl-link__label': "Button label"
      'svg.ecl-icon.ecl-icon--2xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
- array:
    '#type': pattern
    '#id': button
    '#variant': default
    '#fields':
      label: "Button label"
      href: "http://example.com"
      type_attribute: "standalone"
      external_link: true
  assertions:
    count:
      'a.ecl-link--icon': 1
    equals:
      'a.ecl-link--standalone[href="http://example.com"] .ecl-link__label': "Button label"
      'svg.ecl-icon.ecl-icon--2xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
- array:
    '#type': pattern
    '#id': button
    '#fields':
      type_attribute: "submit"
      label: "Button label"
  assertions:
    count:
      'button.ecl-button--primary': 1
      'button.ecl-button[type="submit"]': 1
    equals:
      'button.ecl-button--primary': "Button label"
- array:
    '#type': pattern
    '#id': button
    '#variant': secondary
    '#fields':
      type_attribute: "submit"
      label: "Button label"
  assertions:
    count:
      'button.ecl-button--secondary': 1
      'button.ecl-button[type="submit"]': 1
    equals:
      'button.ecl-button--secondary': "Button label"
- array:
    '#type': pattern
    '#id': button
    '#variant': primary
    '#fields':
      type_attribute: "reset"
      label: "Button label"
  assertions:
    count:
      'button.ecl-button[type="reset"]': 1
- array:
    '#type': pattern
    '#id': button
    '#variant': primary
    '#fields':
      type_attribute: "button"
      is_block: true
      label: "Button label"
  assertions:
    count:
      'button.ecl-button[type="button"]': 1
- array:
    '#type': pattern
    '#id': button
    '#variant': secondary
    '#fields':
      label: "Button label"
  assertions:
    equals:
      'button.ecl-button--secondary': "Button label"
- array:
    '#type': pattern
    '#id': button
    '#variant': ghost
    '#fields':
      label: "Button label"
  assertions:
    equals:
      'button.ecl-button--ghost': "Button label"
- array:
    '#type': pattern
    '#id': button
    '#variant': search
    '#fields':
      label: "Button label"
  assertions:
    equals:
      'button.ecl-button--search': "Button label"
- array:
    '#type': pattern
    '#id': button
    '#variant': call
    '#fields':
      label: "Button label"
  assertions:
    equals:
      'button.ecl-button--call': "Button label"
- array:
    '#type': pattern
    '#id': button
    '#variant': form
    '#fields':
      label: "Button label"
  assertions:
    equals:
      'button.ecl-button--form': "Button label"
- array:
    '#type': pattern
    '#id': button
    '#variant': form_primary
    '#fields':
      label: "Button label"
  assertions:
    equals:
      'button.ecl-button--form-primary': "Button label"
- array:
    '#type': pattern
    '#id': button
    '#variant': splash_page
    '#fields':
      label: "Button label"
  assertions:
    equals:
      'button.ecl-button--splash-page': "Button label"
- array:
    '#type': pattern
    '#id': social_media_links_vertical
    '#fields':
      title: "View European Commission on:"
      links:
        - service: "facebook"
          label: "Facebook"
          url: "http://facebook.com"
        - service: "twitter"
          label: "Twitter"
          url: "http://twitter.com"
        - service: "instagram"
          label: "Instagram"
          url: "http://instagram.com"
  assertions:
    count:
      'a.ecl-social-media-follow__link[href="http://facebook.com"]': 1
      'a.ecl-social-media-follow__link[href="http://instagram.com"]': 1
      'a.ecl-social-media-follow__link[href="http://twitter.com"]': 1
    equals:
      '.ecl-social-media-follow--vertical > p.ecl-social-media-follow__description': "View European Commission on:"
      'a.ecl-social-media-follow__link[href="http://facebook.com"] span': "Facebook"
      'a.ecl-social-media-follow__link[href="http://twitter.com"] span': "Twitter"
      'a.ecl-social-media-follow__link[href="http://instagram.com"] span': "Instagram"
- array:
    '#type': pattern
    '#id': social_media_links_horizontal
    '#fields':
      title: "View European Commission on:"
      links:
        - service: "facebook"
          label: "Facebook"
          url: "http://facebook.com"
        - service: "twitter"
          label: "Twitter"
          url: "http://twitter.com"
        - service: "instagram"
          label: "Instagram"
          url: "http://instagram.com"
  assertions:
    assertions:
      count:
        'a.ecl-social-media-follow__link[href="http://facebook.com"]': 1
        'a.ecl-social-media-follow__link[href="http://instagram.com"]': 1
        'a.ecl-social-media-follow__link[href="http://twitter.com"]': 1
      equals:
        '.ecl-social-media-follow > p.ecl-social-media-follow__description': "View European Commission on:"
        'a.ecl-social-media-follow__link[href="http://facebook.com"] span': "Facebook"
        'a.ecl-social-media-follow__link[href="http://twitter.com"] span': "Twitter"
        'a.ecl-social-media-follow__link[href="http://instagram.com"] span': "Instagram"
- array:
    '#type': pattern
    '#id': social_icon
    '#fields':
      service: "facebook"
      label: "Facebook"
      url: "http://facebook.com"
  assertions:
    count:
      'a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-before[href="http://facebook.com"]': 1
      'svg.ecl-link__icon': 1
    equals:
      'a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-before span.ecl-link__label': "Facebook"
- array:
    '#type': pattern
    '#id': featured_item
    '#variant': "default"
    '#fields':
      title: "Example title"
  assertions:
    count:
      "div.ecl-card__image": 0
      'h1.ecl-content-block__title': 1
      'div.ecl-content-block__description': 0
      'ul.ecl-content-block__secondary-meta-container': 0
      'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 0
      'h1.ecl-content-block__title a.ecl-link.ecl-link--standalone': 0
    equals:
      'h1.ecl-content-block__title': "Example title"
- array:
    '#type': pattern
    '#id': featured_item
    '#variant': "extended"
    '#fields':
      title: "Example title"
  assertions:
    count:
      "div.ecl-card__image": 0
      'h1.ecl-content-block__title': 1
      'div.ecl-content-block__description': 0
      'ul.ecl-content-block__secondary-meta-container': 0
      'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 0
      'span.ecl-button__container a.ecl-button .ecl-button__label': 0
      'h1.ecl-content-block__title a.ecl-link.ecl-link--standalone': 0
    equals:
      'h1.ecl-content-block__title': "Example title"
- array:
    '#type': pattern
    '#id': featured_item
    '#variant': "default"
    '#fields':
      title: "Example title"
      description: "Example description"
      image:
        src: "http://via.placeholder.com/120x80"
        alt: "Alternative of image"
      metas:
        - "Breaking news article"
        - "Brussels"
      link:
        href: "https://example.com"
        label: "Link title"
      badges:
        - label: "Highlighted"
          variant: "highlight"
        - label: "Status: Open"
          variant: "high"
  assertions:
    count:
      "div.ecl-card__image[style=\"background-image:url('http://via.placeholder.com/120x80')\"]": 1
      'h1.ecl-content-block__title a.ecl-link--standalone[href="https://example.com"]': 1
      'a.ecl-button': 0
      'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 1
      'ul.ecl-content-block__label-container li.ecl-content-block__label-item': 2
      'ul.ecl-content-block__primary-meta-container': 1
    equals:
      'ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': "Breaking news article"
      'ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': "Brussels"
      'h1.ecl-content-block__title a': "Example title"
      'div.ecl-content-block__description': "Example description"
      'ul.ecl-content-block__label-container li.ecl-content-block__label-item:nth-child(1) span.ecl-label.ecl-label--highlight': "Highlighted"
      'ul.ecl-content-block__label-container li.ecl-content-block__label-item:nth-child(2) span.ecl-label.ecl-label--high': "Status: Open"
- array:
    '#type': pattern
    '#id': featured_item
    '#variant': "default"
    '#fields':
      title: "Example title"
      description: "Example description"
      length: 8
      image:
        src: "http://via.placeholder.com/120x80"
        alt: "Alternative of image"
      metas:
        - "Breaking news article"
        - "Brussels"
      link:
        href: "https://example.com"
        label: "Link title"
  assertions:
    count:
      "div.ecl-card__image[style=\"background-image:url('http://via.placeholder.com/120x80')\"]": 1
      'h1.ecl-content-block__title a.ecl-link--standalone[href="https://example.com"]': 1
      'a.ecl-button': 0
      'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 0
      'ul.ecl-content-block__primary-meta-container': 1
    equals:
      'ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': "Breaking news article"
      'ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': "Brussels"
      'h1.ecl-content-block__title a': "Example title"
      'div.ecl-content-block__description': "Example..."
- array:
    '#type': pattern
    '#id': featured_item
    '#variant': "default"
    '#fields':
      description:
        '#type': pattern
        '#id': blockquote
        '#fields':
          body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.'
          author: 'John Doe'
      length: 25
  assertions:
    equals:
      'div.ecl-content-block__description': '<figure class="ecl-blockquote"><div class="ecl-blockquote__body"><blockquote class="ecl-blockquote__quote"><p class="ecl-blockquote__citation">Lorem ipsum dolor sit...</p></blockquote></div></figure>'
- array:
    '#type': pattern
    '#id': featured_item
    '#variant': "default"
    '#fields':
      description:
        '#markup': '<div>Example description</div>'
      length: 8
  assertions:
    equals:
      'div.ecl-content-block__description': '<div>Example...</div>'
- array:
    '#type': pattern
    '#id': featured_item
    '#variant': "extended"
    '#fields':
      title: "Example title"
      description: "Example description"
      link:
        href: "https://example.com"
        label: "Link title"
  assertions:
    count:
      "div.ecl-card__image": 0
      'h1.ecl-content-block__title a.ecl-link--standalone[href="https://example.com"]': 1
      'a.ecl-button[href="https://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-button__icon.ecl-button__icon--after': 1
    equals:
      'h1.ecl-content-block__title a': "Example title"
      'div.ecl-content-block__description .ecl-paragraph': "Example description"
      'a.ecl-button .ecl-button__label': "Link title"
      'svg.ecl-icon.ecl-icon--xs.ecl-button__icon.ecl-button__icon--after': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#corner-arrow"></use>'
- array:
    '#type': pattern
    '#id': featured_item
    '#variant': "extended"
    '#fields':
      title: "Example title"
      description: "Example description"
      link:
        href: "https://example.com"
        label: "Link title"
      external_link: true
  assertions:
    count:
      "div.ecl-card__image": 0
      'h1.ecl-content-block__title a.ecl-link--standalone.ecl-link--icon.ecl-link--icon-after[href="https://example.com"]': 1
      'a.ecl-button[href="https://example.com"]': 1
      'svg.ecl-icon.ecl-icon--xs.ecl-button__icon.ecl-button__icon--after': 1
    equals:
      'h1.ecl-content-block__title a span.ecl-link__label': "Example title"
      'div.ecl-content-block__description .ecl-paragraph': "Example description"
      'a.ecl-button .ecl-button__label': "Link title"
      'h1.ecl-content-block__title a svg.ecl-icon.ecl-icon--2xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      '.ecl-content-block__description svg.ecl-icon.ecl-icon--xs.ecl-button__icon.ecl-button__icon--after': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
- array:
    '#type': pattern
    '#id': featured_item
    '#variant': "default"
    '#fields':
      title: "Example title"
      description: "Example description"
      footer_items:
        - icon: "calendar"
          text: "15-16 November 2019, 08:00 AM"
        - icon: "location"
          text: "Brussels, Belgium"
  assertions:
    count:
      'ul.ecl-content-block__secondary-meta-container': 1
      'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 0
    equals:
      'li.ecl-content-block__secondary-meta-item:nth-child(1)' : '<svg class="ecl-icon ecl-icon--s ecl-content-block__secondary-meta-icon" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#calendar"></use></svg><span class="ecl-content-block__secondary-meta-label">15-16 November 2019, 08:00 AM</span>'
      'li.ecl-content-block__secondary-meta-item:nth-child(2)' : '<svg class="ecl-icon ecl-icon--s ecl-content-block__secondary-meta-icon" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#location"></use></svg><span class="ecl-content-block__secondary-meta-label">Brussels, Belgium</span>'
- array:
    '#type': pattern
    '#id': timeline
    '#fields':
      limit: 2
      limit_to: 4
      items:
        -
          label: "13 September 2017"
          title: "Item 1"
          body:
            '#markup': '<a href="/example" class="ecl-link">Economic and Monetary Union package of proposals</a>'
        -
          label: "28-29 September 2017"
          title: "Item 2"
          body: "Lorem Ipsum 2"
        -
          body: "Lorem Ipsum 3"
        -
          body: "Lorem Ipsum 4"
        -
          body: "Lorem Ipsum 5"
        -
          label: "6 February 2018"
          title: "Item 6"
          body: "Lorem Ipsum 6"
  assertions:
    count:
      'h2.ecl-u-type-heading-2': 0
      'div.ecl.ecl-u-mb-m': 0
      'ol.ecl-timeline': 1
      'li.ecl-timeline__item': 7
      '.ecl-timeline__item.ecl-timeline__item--toggle': 1
      '.ecl-timeline__item.ecl-timeline__item--collapsed': 2
      '.ecl-timeline__item:nth-child(3) .ecl-timeline__title': 0
      '.ecl-timeline__item:nth-child(4) .ecl-timeline__title': 0
      '.ecl-timeline__item:nth-child(6) .ecl-timeline__title': 0
    equals:
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__title': "Item 1"
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__label': "13 September 2017"
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__title': "Item 2"
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__label': "28-29 September 2017"
      '.ecl-timeline__item:nth-child(5) .ecl-timeline__toggle .ecl-button__label': "Show 2 more items"
      '.ecl-timeline__item:nth-child(7) .ecl-timeline__title': "Item 6"
      '.ecl-timeline__item:nth-child(7) .ecl-timeline__label': "6 February 2018"
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__content': '<a href="/example" class="ecl-link">Economic and Monetary Union package of proposals</a>'
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__content': 'Lorem Ipsum 2'
      '.ecl-timeline__item:nth-child(3) .ecl-timeline__content': 'Lorem Ipsum 3'
      '.ecl-timeline__item:nth-child(4) .ecl-timeline__content': 'Lorem Ipsum 4'
      '.ecl-timeline__item:nth-child(6) .ecl-timeline__content': 'Lorem Ipsum 5'
      '.ecl-timeline__item:nth-child(7) .ecl-timeline__content': 'Lorem Ipsum 6'
- array:
    '#type': pattern
    '#id': timeline
    '#fields':
      items:
        -
          title: "Item 1"
          body: "Lorem Ipsum 1"
        -
          title: "Item 2"
          body: "Lorem Ipsum 2"
        -
          title: "Item 3"
          body: "Lorem Ipsum 3"
        -
          title: "Item 4"
          body: "Lorem Ipsum 4"
        -
          title: "Item 5"
          body: "Lorem Ipsum 5"
        -
          title: "Item 6"
          body: "Lorem Ipsum 6"
  assertions:
    count:
      'h2.ecl-u-type-heading-2': 0
      'div.ecl.ecl-u-mb-m': 0
      'ol.ecl-timeline': 1
      'li.ecl-timeline__item': 6
      '.ecl-timeline__item.ecl-timeline__item--toggle': 0
      '.ecl-timeline__item.ecl-timeline__item--collapsed': 0
    equals:
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__title': "Item 1"
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__title': "Item 2"
      '.ecl-timeline__item:nth-child(3) .ecl-timeline__title': "Item 3"
      '.ecl-timeline__item:nth-child(4) .ecl-timeline__title': "Item 4"
      '.ecl-timeline__item:nth-child(5) .ecl-timeline__title': "Item 5"
      '.ecl-timeline__item:nth-child(6) .ecl-timeline__title': "Item 6"
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__content': 'Lorem Ipsum 1'
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__content': 'Lorem Ipsum 2'
      '.ecl-timeline__item:nth-child(3) .ecl-timeline__content': 'Lorem Ipsum 3'
      '.ecl-timeline__item:nth-child(4) .ecl-timeline__content': 'Lorem Ipsum 4'
      '.ecl-timeline__item:nth-child(5) .ecl-timeline__content': 'Lorem Ipsum 5'
      '.ecl-timeline__item:nth-child(6) .ecl-timeline__content': 'Lorem Ipsum 6'
- array:
    '#type': pattern
    '#id': timeline
    '#fields':
      limit: 2
      button_label: 'Show all timelines'
      items:
        -
          label: "13 September 2017"
          title: "Item 1"
          body:
            '#markup': '<a href="/example">Economic and Monetary Union package of proposals</a>'
        -
          label: "28-29 September 2017"
          title: "Item 2"
          body: "Lorem Ipsum 2"
        -
          body: "Lorem Ipsum 3"
        -
          body: "Lorem Ipsum 4"
        -
          body: "Lorem Ipsum 5"
        -
          label: "6 February 2018"
          title: "Item 6"
          body: "Lorem Ipsum 6"
  assertions:
    count:
      'h2.ecl-u-type-heading-2': 0
      'div.ecl.ecl-u-mb-m': 0
      'ol.ecl-timeline': 1
      'li.ecl-timeline__item': 7
      '.ecl-timeline__item.ecl-timeline__item--toggle': 1
      '.ecl-timeline__item.ecl-timeline__item--collapsed': 4
      '.ecl-timeline__item:nth-child(3) .ecl-timeline__title': 0
      '.ecl-timeline__item:nth-child(4) .ecl-timeline__title': 0
      '.ecl-timeline__item:nth-child(5) .ecl-timeline__title': 0
    equals:
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__title': "Item 1"
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__label': "13 September 2017"
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__title': "Item 2"
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__label': "28-29 September 2017"
      '.ecl-timeline__item:nth-child(6) .ecl-timeline__title': "Item 6"
      '.ecl-timeline__item:nth-child(6) .ecl-timeline__label': "6 February 2018"
      '.ecl-timeline__item:nth-child(7) .ecl-timeline__toggle .ecl-button__label': "Show all timelines"
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__content': '<a href="/example">Economic and Monetary Union package of proposals</a>'
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__content': 'Lorem Ipsum 2'
      '.ecl-timeline__item:nth-child(3) .ecl-timeline__content': 'Lorem Ipsum 3'
      '.ecl-timeline__item:nth-child(4) .ecl-timeline__content': 'Lorem Ipsum 4'
      '.ecl-timeline__item:nth-child(5) .ecl-timeline__content': 'Lorem Ipsum 5'
      '.ecl-timeline__item:nth-child(6) .ecl-timeline__content': 'Lorem Ipsum 6'
- array:
    '#type': pattern
    '#id': timeline
    '#fields':
      title: "Timeline heading"
      introduction: "Timeline introduction"
      limit: 2
      items:
        -
          label: "13 September 2017"
          title: "Item 1"
          body:
            '#markup': '<a href="/example" class="ecl-link">Economic and Monetary Union package of proposals</a>'
        -
          label: "28-29 September 2017"
          title: "Item 2"
          body: "Lorem Ipsum 2"
        -
          body: "Lorem Ipsum 3"
        -
          body: "Lorem Ipsum 4"
        -
          body: "Lorem Ipsum 5"
        -
          label: "6 February 2018"
          title: "Item 6"
          body: "Lorem Ipsum 6"
  assertions:
    count:
      'h2.ecl-u-type-heading-2': 1
      'div.ecl.ecl-u-mb-m': 1
      'ol.ecl-timeline': 1
      'li.ecl-timeline__item': 7
      '.ecl-timeline__item.ecl-timeline__item--toggle': 1
      '.ecl-timeline__item.ecl-timeline__item--collapsed': 4
      '.ecl-timeline__item:nth-child(3) .ecl-timeline__title': 0
      '.ecl-timeline__item:nth-child(4) .ecl-timeline__title': 0
      '.ecl-timeline__item:nth-child(5) .ecl-timeline__title': 0
    equals:
      'h2.ecl-u-type-heading-2': "Timeline heading"
      'div.ecl.ecl-u-mb-m': "Timeline introduction"
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__title': "Item 1"
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__label': "13 September 2017"
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__title': "Item 2"
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__label': "28-29 September 2017"
      '.ecl-timeline__item:nth-child(6) .ecl-timeline__title': "Item 6"
      '.ecl-timeline__item:nth-child(6) .ecl-timeline__label': "6 February 2018"
      '.ecl-timeline__item:nth-child(7) .ecl-timeline__toggle .ecl-button__label': "Show 4 more items"
      '.ecl-timeline__item:nth-child(1) .ecl-timeline__content': '<a href="/example" class="ecl-link">Economic and Monetary Union package of proposals</a>'
      '.ecl-timeline__item:nth-child(2) .ecl-timeline__content': 'Lorem Ipsum 2'
      '.ecl-timeline__item:nth-child(3) .ecl-timeline__content': 'Lorem Ipsum 3'
      '.ecl-timeline__item:nth-child(4) .ecl-timeline__content': 'Lorem Ipsum 4'
      '.ecl-timeline__item:nth-child(5) .ecl-timeline__content': 'Lorem Ipsum 5'
      '.ecl-timeline__item:nth-child(6) .ecl-timeline__content': 'Lorem Ipsum 6'
- array:
    '#type': pattern
    '#id': text_featured_media
    '#variant': "left_simple"
    '#fields':
      title: "Heading"
      text_title: "Title"
      image:
        src: "http://via.placeholder.com/150x150"
      caption: "Some caption text for the image"
      text: "Some more text"
      link:
        label: "Call to action"
        path: "http://example.com"
      highlighted: false
  assertions:
    count:
      'div.ecl-featured-item': 1
      'div.ecl-featured-item.ecl-featured-item--extended': 0
      'article.ecl-featured-item__container': 1
      'div.ecl-featured-item__item': 1
      'div.ecl-col-m-6.ecl-u-order-m-last': 1
      'div.ecl-featured-item__title': 1
      'figure.ecl-media-container': 1
      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
      'div.ecl-media-container__media--ratio-16-9 iframe': 0
      'figcaption.ecl-media-container__caption': 1
      'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
      'svg.ecl-icon.ecl-icon--s.ecl-icon--primary.ecl-link__icon': 1
    equals:
      'div.ecl-featured-item__heading': "Heading"
      'div.ecl-featured-item__title': "Title"
      'figcaption.ecl-media-container__caption': "Some caption text for the image"
      'div.ecl-featured-item__item > div.ecl': "Some more text"
      'a.ecl-link span.ecl-link__label': "Call to action"
      'svg.ecl-icon.ecl-icon--s.ecl-icon--primary.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
- array:
    '#type': pattern
    '#id': text_featured_media
    '#variant': "right_simple"
    '#fields':
      text_title: "Title"
      image:
        src: "http://via.placeholder.com/150x150"
      caption: "Some caption text for the image"
      text: "Some more text"
      link:
        label: "Call to action"
        path: "https://european-union.europa.eu/index_en"
      highlighted: true
  assertions:
    count:
      'div.ecl-featured-item.ecl-featured-item--extended': 1
      'div.ecl-featured-item__heading': 0
      'article.ecl-featured-item__container': 1
      'div.ecl-col-m-6.ecl-u-order-m-last': 0
      'div.ecl-col-m-6.ecl-u-pr-l.ecl-u-pl-none': 1
      'div.ecl-featured-item__title': 1
      'figure.ecl-media-container': 1
      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
      'div.ecl-media-container__media--ratio-16-9 iframe': 0
      'figcaption.ecl-media-container__caption': 1
      'a.ecl-link.ecl-link--standalone[href="https://european-union.europa.eu/index_en"]': 1
      'svg.ecl-icon.ecl-icon--s.ecl-icon--primary.ecl-link__icon': 1
    equals:
      'div.ecl-featured-item__title': "Title"
      'figcaption.ecl-media-container__caption': "Some caption text for the image"
      'div.ecl-featured-item__item > div.ecl': "Some more text"
      'a.ecl-link span.ecl-link__label': "Call to action"
      'svg.ecl-icon.ecl-icon--s.ecl-icon--primary.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#corner-arrow"></use>'
- array:
    '#type': pattern
    '#id': text_featured_media
    '#variant': "right_simple"
    '#fields':
      title: "Heading"
      image:
        src: "http://via.placeholder.com/150x150"
      caption: "Some caption text for the image"
      text: "Some more text"
      link:
        label: "Call to action"
        path: "http://example.com"
      highlighted: true
  assertions:
    count:
      'div.ecl-featured-item.ecl-featured-item--extended': 1
      'div.ecl-featured-item__heading': 1
      'article.ecl-featured-item__container': 1
      'div.ecl-col-m-6.ecl-u-order-m-last': 0
      'div.ecl-col-m-6.ecl-u-pr-l.ecl-u-pl-none': 1
      'div.ecl-featured-item__title': 0
      'figure.ecl-media-container': 1
      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
      'div.ecl-media-container__media--ratio-16-9 iframe': 0
      'figcaption.ecl-media-container__caption': 1
      'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
    equals:
      'div.ecl-featured-item__heading': "Heading"
      'figcaption.ecl-media-container__caption': "Some caption text for the image"
      'div.ecl-featured-item__item > div.ecl': "Some more text"
      'a.ecl-link span.ecl-link__label': "Call to action"
- array:
    '#type': pattern
    '#id': text_featured_media
    '#fields':
      title: "Heading"
      text_title: "Title"
      caption: "Some caption text for the image"
      text: "Some more text"
  assertions:
    count:
      'div.ecl-featured-item': 1
      'div.ecl-featured-item.ecl-featured-item--extended': 0
      'article.ecl-featured-item__container': 1
      'div.ecl-col-md-6': 0
      'div.ecl-featured-item__title': 1
      'figure.ecl-media-container': 0
      'div.ecl-featured-item__item.ecl': 0
      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
      'div.ecl-media-container__media--ratio-16-9 iframe': 0
      'figcaption.ecl-media-container__caption': 0
      'a.ecl-link': 0
    equals:
      'div.ecl-featured-item__heading': "Heading"
      'div.ecl-featured-item__title': "Title"
      'div.ecl-featured-item__item > div.ecl': "Some more text"
- array:
    '#type': pattern
    '#id': text_featured_media
    '#variant': "right_featured"
    '#fields':
      title: "Heading"
      text_title: "Title"
      image:
        src: "http://via.placeholder.com/150x150"
      text: "Some more text"
      link:
        label: "Call to action"
        path: "http://example.com"
  assertions:
    count:
      'div.ecl-featured-item': 1
      'div.ecl-featured-item.ecl-featured-item--extended': 0
      'article.ecl-featured-item__container': 1
      'div.ecl-col-m-6.ecl-u-order-m-last': 0
      'div.ecl-col-m-6.ecl-u-pl-none': 1
      'div.ecl-featured-item__title': 1
      'figure.ecl-media-container': 1
      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
      'div.ecl-media-container__media--ratio-16-9 iframe': 0
      'figcaption.ecl-media-container__caption': 0
      'a.ecl-link.ecl-link--cta[href="http://example.com"]': 1
    equals:
      'div.ecl-featured-item__heading': "Heading"
      'div.ecl-featured-item__title': "Title"
      'div.ecl-featured-item__item div.ecl': "Some more text"
      'a.ecl-link span.ecl-link__label': "Call to action"
- array:
    '#type': pattern
    '#id': text_featured_media
    '#fields':
      title: "Heading"
      caption: "Some caption"
  assertions:
    count:
      'div.ecl-featured-item': 0
      'div.ecl-featured-item.ecl-featured-item--extended': 0
      'article.ecl-featured-item__container': 0
      'div.ecl-col-m-6': 0
      'figure.ecl-media-container': 0
      'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none': 0
      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
      'div.ecl-media-container__media--ratio-16-9 iframe': 0
      'figcaption.ecl-media-container__caption': 0
      'div.ecl-featured-item__heading': 0
      'a.ecl-link': 0
    equals: {}
- array:
    '#type': pattern
    '#id': text_featured_media
    '#variant': "left_featured"
    '#fields':
      title: "Heading"
      video:
        '#type': 'html_tag'
        '#tag': 'iframe'
        '#attributes':
          id: 'videoplayerI-181645'
          src: '//ec.europa.eu/avservices/play.cfm?ref=I-181645'
      text: "Some more text"
      link:
        label: "Call to action"
        path: "http://example.com"
  assertions:
    count:
      'div.ecl-featured-item': 1
      'div.ecl-featured-item.ecl-featured-item--extended': 0
      'article.ecl-featured-item__container': 1
      'div.ecl-col-m-6.ecl-u-order-m-last': 1
      'figure.ecl-media-container': 1
      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
      'div.ecl-media-container__media--ratio-16-9 iframe[src="//ec.europa.eu/avservices/play.cfm?ref=I-181645"]': 1
      'figcaption.ecl-media-container__caption': 0
      'a.ecl-link.ecl-link--cta[href="http://example.com"]': 1
    equals:
      'div.ecl-featured-item__heading': "Heading"
      'div.ecl-featured-item__item div.ecl': "Some more text"
      'a.ecl-link span.ecl-link__label': "Call to action"
- array:
    '#type': pattern
    '#id': text_featured_media
    '#fields':
      video:
        '#type': 'html_tag'
        '#tag': 'iframe'
        '#attributes':
          id: 'videoplayerI-181645'
          src: '//ec.europa.eu/avservices/play.cfm?ref=I-181645'
      video_ratio: "invalid"
  assertions:
    count:
      'div.ecl-media-container__media--ratio-16-9 iframe[src="//ec.europa.eu/avservices/play.cfm?ref=I-181645"]': 1
- array:
    '#type': pattern
    '#id': text_featured_media
    '#fields':
      video:
        '#type': 'html_tag'
        '#tag': 'iframe'
        '#attributes':
          id: 'videoplayerI-181645'
          src: '//ec.europa.eu/avservices/play.cfm?ref=I-181645'
      video_ratio: "1:1"
      link:
        label: "Call to action"
        path: "http://example.com"
  assertions:
    count:
      'div.ecl-media-container__media--ratio-1-1 iframe[src="//ec.europa.eu/avservices/play.cfm?ref=I-181645"]': 1
      'div.ecl-col-m-6.ecl-u-order-m-last': 1
      'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
- array:
    '#type': pattern
    '#id': icons_with_text
    '#fields':
      items:
        -
          icon: "file"
          text: "Culture | Innovation"
        -
          icon: "calendar"
          size: "s"
          text: "15-16 November 2019, 08:00 AM"
        -
          icon: "location"
          text: "Brussels, Belgium"
        -
          icon: "livestreaming"
          size: "xs"
          text: "Live streaming available"
  assertions:
    count:
      'ul.ecl-unordered-list--no-bullet': 1
      'ul li.ecl-unordered-list__item': 4
      'ul li.ecl-unordered-list__item svg': 4
    equals:
      'ul li.ecl-unordered-list__item:nth-child(1)': '<svg class="ecl-icon ecl-icon--m ecl-u-mr-s" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#file"></use></svg>Culture | Innovation'
      'ul li.ecl-unordered-list__item:nth-child(2)': '<svg class="ecl-icon ecl-icon--s ecl-u-mr-s" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#calendar"></use></svg>15-16 November 2019, 08:00 AM'
      'ul li.ecl-unordered-list__item:nth-child(3)': '<svg class="ecl-icon ecl-icon--m ecl-u-mr-s" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#location"></use></svg>Brussels, Belgium'
      'ul li.ecl-unordered-list__item:nth-child(4)': '<svg class="ecl-icon ecl-icon--xs ecl-u-mr-s" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#livestreaming"></use></svg>Live streaming available'
- array:
    '#type': pattern
    '#id': icons_with_text
  assertions:
    count:
      'ul.ecl-unordered-list--no-bullet': 0
- array:
    '#type': pattern
    '#id': icons_with_text
    '#fields':
      items:
        -
          icon: "file"
          text: "Culture | Innovation"
        -
          text: "15-16 November 2019, 08:00 AM"
        -
          icon: "location"
        -
          icon: "livestreaming"
          text: "Live streaming available"
  assertions:
    count:
      'ul.ecl-unordered-list--no-bullet': 1
      'ul li.ecl-unordered-list__item': 3
      'ul li.ecl-unordered-list__item svg': 3
    equals:
      'ul li.ecl-unordered-list__item:nth-child(1)': '<svg class="ecl-icon ecl-icon--m ecl-u-mr-s" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#file"></use></svg>Culture | Innovation'
      'ul li.ecl-unordered-list__item:nth-child(2)': '<svg class="ecl-icon ecl-icon--m ecl-u-mr-s" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#file"></use></svg>15-16 November 2019, 08:00 AM'
      'ul li.ecl-unordered-list__item:nth-child(3)': '<svg class="ecl-icon ecl-icon--m ecl-u-mr-s" focusable="false" aria-hidden="true"><use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#livestreaming"></use></svg>Live streaming available'
- array:
    '#type': "pattern"
    '#id': "tag"
    '#variant': "default"
    '#fields':
      tag_type: "link"
      url: "http://example.com"
      label: "Tag label"
  assertions:
    equals:
      'a.ecl-tag': "Tag label"
    count:
      'a.ecl-tag[href="http://example.com"]': 1
- array:
    '#type': "pattern"
    '#id': "tag"
    '#variant': "default"
    '#fields':
      tag_type: "removable"
      url: "http://example.com"
      label: "Tag label"
  assertions:
    contains:
      '.ecl-tag': "Tag label"
    count:
      '.ecl-tag--removable': 1
- array:
    '#type': "pattern"
    '#id': "tag"
    '#variant': "default"
    '#fields':
      tag_type: "display"
      url: "http://example.com"
      label: "Tag label"
  assertions:
    contains:
      '.ecl-tag': "Tag label"
    count:
      '.ecl-tag--display': 1
- array:
    '#type': "pattern"
    '#id': "navigation_menu"
    '#variant': "vertical"
    '#fields':
      label: "Menu"
      site_name: "Site name"
      items:
        - href: "#"
          label: 'Parent 1'
          children:
            - href: '#'
              label: 'Child 1.1'
              is_current: true
              external: true
            - href: '#'
              label: 'Child 1.2'
            - href: '#'
              label: 'Child 1.3'
              external: true
            - href: '#'
              label: 'Child 1.4'
        - href: "#"
          label: "Parent 2"
          children:
            - href: '#'
              label: 'Child 2.1'
            - href: '#'
              label: 'Child 2.2'
            - href: '#'
              label: 'Child 2.3'
              external: true
        - href: "#"
          label: "Link"
  assertions:
    contains:
      '.ecl-menu__open': "Menu"
      '.ecl-menu__inner-header button.ecl-menu__close .ecl-button__label': "Close"
      '.ecl-menu__inner-header button.ecl-menu__back .ecl-button__label': "Back"
      'li.ecl-menu__item:nth-child(1) a.ecl-menu__link': "Parent 1"
      'li.ecl-menu__item:nth-child(2) a.ecl-menu__link': "Parent 2"
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem--current a.ecl-menu__sublink.ecl-link--icon-after': 'Child 1.1'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a.ecl-menu__sublink.ecl-link--icon-after': 'Child 1.3'
      'li.ecl-menu__item:nth-child(2) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a.ecl-menu__sublink.ecl-link--icon-after': 'Child 2.3'
    equals:
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem--current a svg.ecl-icon.ecl-icon--2xs.ecl-menu__sublink-icon.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(2) a.ecl-menu__sublink': 'Child 1.2'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a svg.ecl-icon.ecl-icon--2xs.ecl-menu__sublink-icon.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(4) a.ecl-menu__sublink': 'Child 1.4'
      'li.ecl-menu__item:nth-child(2) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(1) a.ecl-menu__sublink': 'Child 2.1'
      'li.ecl-menu__item:nth-child(2) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(2) a.ecl-menu__sublink': 'Child 2.2'
      'li.ecl-menu__item:nth-child(2) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a svg.ecl-icon.ecl-icon--2xs.ecl-menu__sublink-icon.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      'li.ecl-menu__item:nth-child(3) a.ecl-menu__link': "Link"
- array:
    '#type': "pattern"
    '#id': "navigation_menu"
    '#variant': "vertical"
    '#fields':
      label: "Custom Menu"
      items:
        - href: "#"
          label: 'Parent 1'
          children:
            - href: '#'
              label: 'Child 1.1'
            - href: '#'
              label: 'Child 1.2'
            - href: '#'
              label: 'Child 1.3'
            - href: '#'
              label: 'Child 1.4'
            - href: '#'
              label: 'Child 1.5'
            - href: '#'
              label: 'Child 1.6'
            - href: '#'
              label: 'Child 1.7'
            - href: '#'
              label: 'Child 1.8'
  assertions:
    contains:
      '.ecl-menu__open': "Custom Menu"
      '.ecl-menu__inner-header button.ecl-menu__close .ecl-button__label': "Close"
      '.ecl-menu__inner-header button.ecl-menu__back .ecl-button__label': "Back"
      'li.ecl-menu__item:nth-child(1) a.ecl-menu__link': "Parent 1"
    equals:
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(1) a.ecl-menu__sublink': 'Child 1.1'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(2) a.ecl-menu__sublink': 'Child 1.2'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a.ecl-menu__sublink': 'Child 1.3'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(4) a.ecl-menu__sublink': 'Child 1.4'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(5) a.ecl-menu__sublink': 'Child 1.5'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(6) a.ecl-menu__sublink': 'Child 1.6'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(7) a.ecl-menu__sublink': 'Child 1.7'
      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(8) a.ecl-menu__sublink': 'Child 1.8'
- array:
    '#type': 'pattern'
    '#id': 'link'
    '#fields':
      url: '/'
      text: 'Link text'
  assertions:
    equals:
      'a.ecl-link.ecl-link--standalone': 'Link text'
    count:
      'a.ecl-link[href="/"]': 1
- array:
    '#type': 'pattern'
    '#id': 'link'
    '#fields':
      url: '/'
      text: 'Link text'
      variant: 'standalone'
  assertions:
    equals:
      'a.ecl-link.ecl-link--standalone': 'Link text'
- array:
    '#type': 'pattern'
    '#id': 'link'
    '#fields':
      url: '/'
      text: 'Link text'
      variant: 'cta'
  assertions:
    equals:
      'a.ecl-link.ecl-link--cta': 'Link text'
- array:
    '#type': 'pattern'
    '#id': 'facts_figures'
    '#fields':
      items:
        - icon: 'instagram'
          value: '00.0 million'
          title: 'Lorem ipsum'
          description: 'Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.'
        - icon: 'external'
          value: '10.0 millions'
          title: 'Nam lacinia nisl eget diam mattis'
          description: 'Sed efficitur bibendum rutrum. Nunc feugiat congue augue ac consectetur.'
      view_all:
        label: 'View all metrics'
        path: 'https://example.com'
      external_link: true
  assertions:
    count:
      'div.ecl-fact-figures.ecl-fact-figures--col-3 div.ecl-fact-figures__items': 1
      'div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': 1
      'div.ecl-fact-figures__item:nth-child(2) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': 1
      'div.ecl-fact-figures__view-all': 1
    equals:
      'div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons-social-media/sprites/icons-social-media.svg#instagram"></use>'
      'div.ecl-fact-figures__item:nth-child(1) div.ecl-fact-figures__value': '00.0 million'
      'div.ecl-fact-figures__item:nth-child(1) div.ecl-fact-figures__title': 'Lorem ipsum'
      'div.ecl-fact-figures__item:nth-child(1) div.ecl-fact-figures__description': 'Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.'
      'div.ecl-fact-figures__item:nth-child(2) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      'div.ecl-fact-figures__item:nth-child(2) div.ecl-fact-figures__value': '10.0 millions'
      'div.ecl-fact-figures__item:nth-child(2) div.ecl-fact-figures__title': 'Nam lacinia nisl eget diam mattis'
      'div.ecl-fact-figures__item:nth-child(2) div.ecl-fact-figures__description': 'Sed efficitur bibendum rutrum. Nunc feugiat congue augue ac consectetur.'
      'div.ecl-fact-figures__view-all a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-after.ecl-fact-figures__view-all-link[href="https://example.com"] span.ecl-link__label': 'View all metrics'
      'svg.ecl-icon.ecl-icon--2xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
- array:
    '#type': 'pattern'
    '#id': 'facts_figures'
    '#fields':
      items:
        - icon: 'instagram'
          value: '00.0 million'
          title: 'Lorem ipsum'
          description: 'Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.'
        - icon: 'external'
          value: '10.0 millions'
          title: 'Nam lacinia nisl eget diam mattis'
          description: 'Sed efficitur bibendum rutrum. Nunc feugiat congue augue ac consectetur.'
  assertions:
    count:
      'div.ecl-fact-figures.ecl-fact-figures--col-3 div.ecl-fact-figures__items': 1
      'div.ecl-fact-figures__view-all': 0
- array:
    '#type': 'pattern'
    '#id': 'active_search_filters'
    '#fields':
      name: 'Source'
      items:
        - label: 'DG Trad'
          url: 'http://dg-trad.com'
        - label: 'Health, well-being & Consumer protection'
          url: 'http://health.com'
        - label: 'No link'
          url: ''
  assertions:
    count:
      'div.active-search-filters.ecl-u-d-m-flex': 1
      'a.ecl-u-mr-xs.ecl-u-mb-s.ecl-tag.ecl-tag--removable[href="http://dg-trad.com"]': 1
      'a.ecl-u-mr-xs.ecl-u-mb-s.ecl-tag.ecl-tag--removable[href="http://health.com"]': 1
      'span.ecl-tag__icon': 2
      'svg.ecl-icon.ecl-icon--xs.ecl-tag__icon-close': 2
      'svg.ecl-icon.ecl-icon--xs.ecl-tag__icon-close-filled': 2
    contains:
      'a.ecl-u-mr-xs.ecl-u-mb-s.ecl-tag.ecl-tag--removable[href="http://dg-trad.com"]': 'DG Trad'
      'a.ecl-u-mr-xs.ecl-u-mb-s.ecl-tag.ecl-tag--removable[href="http://health.com"]': 'Health, well-being &amp; Consumer protection'
      'div.ecl-u-mr-xs.ecl-u-mt-s.ecl-tag.ecl-tag--removable': 'No link'
    equals:
      'div.active-search-filters__name span': 'Source'
- array:
    '#type': 'pattern'
    '#id': 'list_with_illustration'
    '#fields':
      square_image: false
      zebra: true
      column: 1
      items:
        - title: "Business, Economy, Euro"
          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
          image:
            src: "https://placeimg.com/1000/500/arch"
            alt: "Alternative text for featured item image 1"
        - title: "About the European Union"
          description: "The EU and its institutions, how to visit and work at the EU."
          image:
            src: "https://placeimg.com/500/500/arch"
            alt: "Alternative text for featured item image 2"
  assertions:
    count:
      div.ecl-list-illustration: 1
      div.ecl-list-illustration.ecl-list-illustration--zebra: 1
      div.ecl-list-illustration__item: 2
      div.ecl-list-illustration__image: 2
      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
    contains:
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
- array:
    '#type': 'pattern'
    '#id': 'list_with_illustration'
    '#fields':
      square_image: true
      zebra: true
      column: 1
      items:
        - title: "Business, Economy, Euro"
          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
          image:
            src: "https://placeimg.com/1000/500/arch"
            alt: "Alternative text for featured item image 1"
        - title: "About the European Union"
          description: "The EU and its institutions, how to visit and work at the EU."
          image:
            src: "https://placeimg.com/500/500/arch"
            alt: "Alternative text for featured item image 2"
  assertions:
    count:
      div.ecl-list-illustration: 1
      div.ecl-list-illustration.ecl-list-illustration--zebra: 1
      div.ecl-list-illustration__item: 2
      div.ecl-list-illustration__image: 2
      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
      'div.ecl-list-illustration__item svg.ecl-icon': 0
    contains:
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
- array:
    '#type': 'pattern'
    '#id': 'list_with_illustration'
    '#fields':
      square_image: false
      zebra: false
      column: 1
      items:
        - title: "Business, Economy, Euro"
          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
          icon: "growth"
        - title: "About the European Union"
          description: "The EU and its institutions, how to visit and work at the EU."
          icon: "budget"
  assertions:
    count:
      div.ecl-list-illustration: 1
      div.ecl-list-illustration.ecl-list-illustration--zebra: 0
      div.ecl-list-illustration__item: 2
      div.ecl-list-illustration__image: 0
    contains:
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
    equals:
      'div.ecl-list-illustration__item:nth-child(1) svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#growth"></use>'
      'div.ecl-list-illustration__item:nth-child(2) svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#budget"></use>'
- array:
    '#type': 'pattern'
    '#id': 'list_with_illustration'
    '#fields':
      square_image: false
      zebra: true
      column: 2
      items:
        - title: "Business, Economy, Euro"
          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
          image:
            src: "https://placeimg.com/1000/500/arch"
            alt: "Alternative text for featured item image 1"
        - title: "About the European Union"
          description: "The EU and its institutions, how to visit and work at the EU."
          image:
            src: "https://placeimg.com/500/500/arch"
            alt: "Alternative text for featured item image 2"
  assertions:
    count:
      div.ecl-list-illustration: 1
      div.ecl-list-illustration.ecl-list-illustration--zebra: 0
      div.ecl-list-illustration.ecl-list-illustration--col-2: 1
      div.ecl-list-illustration__item: 2
      div.ecl-list-illustration__image: 2
      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
    contains:
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
- array:
    '#type': 'pattern'
    '#id': 'list_with_illustration'
    '#fields':
      square_image: true
      column: 3
      items:
        - title: "Business, Economy, Euro"
          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
          image:
            src: "https://placeimg.com/1000/500/arch"
            alt: "Alternative text for featured item image 1"
        - title: "About the European Union"
          description: "The EU and its institutions, how to visit and work at the EU."
          image:
            src: "https://placeimg.com/500/500/arch"
            alt: "Alternative text for featured item image 2"
  assertions:
    count:
      div.ecl-list-illustration: 1
      div.ecl-list-illustration.ecl-list-illustration--col-3: 1
      div.ecl-list-illustration__item: 2
      div.ecl-list-illustration__image: 2
      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
    contains:
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
- array:
    '#type': 'pattern'
    '#id': 'list_with_illustration'
    '#fields':
      square_image: false
      column: 2
      items:
        - title: "Business, Economy, Euro"
          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
          icon: "growth"
        - title: "About the European Union"
          description: "The EU and its institutions, how to visit and work at the EU."
          icon: "budget"
  assertions:
    count:
      div.ecl-list-illustration: 1
      div.ecl-list-illustration.ecl-list-illustration--col-2: 1
      div.ecl-list-illustration__item: 2
      div.ecl-list-illustration__image: 0
    contains:
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
    equals:
      'div.ecl-list-illustration__item:nth-child(1) svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#growth"></use>'
      'div.ecl-list-illustration__item:nth-child(2) svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#budget"></use>'
- array:
    '#type': 'pattern'
    '#id': 'news_ticker'
    '#fields':
      identifier: "news-ticker-example"
      items:
        - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
          link: "http://example.com"
          external_link: TRUE
        - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
        - content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
          link: "http://example.com"
        - content: "Excepteur sint occaecat cupidatat officia deserunt mollit anim id est laborum"
        - content: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium"
          link: "http://example.com"
          external_link: TRUE
        - content: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores"
          link: "http://example.com"
  assertions:
    count:
      div.ecl-news-ticker: 1
      div.ecl-news-ticker__container: 1
      div.ecl-news-ticker__content: 1
      ul#news-ticker-example-content.ecl-news-ticker__slides: 1
      li.ecl-news-ticker__slide: 6
      a.ecl-link.ecl-news-ticker__slide-text: 4
      div.ecl-news-ticker__counter: 1
      div.ecl-news-ticker__controls: 1
    contains:
      li.ecl-news-ticker__slide:nth-child(1) a.ecl-link.ecl-news-ticker__slide-text span.ecl-link__label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
      li.ecl-news-ticker__slide:nth-child(2): "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
      li.ecl-news-ticker__slide:nth-child(3) a.ecl-linkecl-news-ticker__slide-text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
      li.ecl-news-ticker__slide:nth-child(4): "Excepteur sint occaecat cupidatat officia deserunt mollit anim id est laborum"
      li.ecl-news-ticker__slide:nth-child(5) a.ecl-link.ecl-news-ticker__slide-text span.ecl-link__label: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium"
      li.ecl-news-ticker__slide:nth-child(6) a.ecl-link.ecl-news-ticker__slide-text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores"
    equals:
      li.ecl-news-ticker__slide:nth-child(1) a svg.ecl-link__icon: '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      li.ecl-news-ticker__slide:nth-child(5) a svg.ecl-link__icon: '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
      svg.ecl-icon.ecl-icon--m.ecl-news-ticker__icon: '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#information"></use>'
      div.ecl-news-ticker__counter span.ecl-news-ticker__counter--current: '1'
      div.ecl-news-ticker__counter span.ecl-news-ticker__counter--max: '6'
- array:
    '#type': 'pattern'
    '#id': 'news_ticker'
    '#fields':
      items:
        - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
          link: "http://example.com"
        - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
        - content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
          link: "http://example.com"
      counter_label: "in"
  assertions:
    count:
      div.ecl-news-ticker: 1
      div.ecl-news-ticker__container: 1
      div.ecl-news-ticker__content: 1
      ul.ecl-news-ticker__slides: 1
      li.ecl-news-ticker__slide: 3
      a.ecl-link.ecl-news-ticker__slide-text: 2
      div.ecl-news-ticker__counter span.ecl-news-ticker__counter--current: 1
      div.ecl-news-ticker__controls: 1
    contains:
      li.ecl-news-ticker__slide:nth-child(1) a.ecl-link.ecl-news-ticker__slide-text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
      li.ecl-news-ticker__slide:nth-child(2): "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
      li.ecl-news-ticker__slide:nth-child(3) a.ecl-link.ecl-news-ticker__slide-text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
      div.ecl-news-ticker__counter: '<span class="ecl-news-ticker__counter--current">1</span> in'
    equals:
      svg.ecl-icon.ecl-icon--m.ecl-news-ticker__icon: '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#information"></use>'
      div.ecl-news-ticker__counter span.ecl-news-ticker__counter--max: '3'
- array:
    '#type': 'pattern'
    '#id': 'carousel'
    '#fields':
      items:
        - title: "Lorem ipsum dolor sit amet"
          description: "Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
          url: "https://example.com"
          url_text: "CTA 1"
          image: "https://placeimg.com/640/480/tech"
          variant: "image"
          centered: false
        - title: "Duis vitae pulvinar turpis"
          description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
          url: "https://example.com"
          url_text: "CTA 2"
          image: "https://placeimg.com/640/480/arch"
          variant: "image-gradient"
        - title: "Donec maximus pharetra ex a ultricies"
          description: "Integer quis lorem tellus."
          url: "https://example.com"
          url_text: "CTA 3"
        - title: "Donec maximus pharetra ex a ultricies"
          image: "https://placeimg.com/640/480/tech"
          variant: "image-shade"
        - title: "Lorem ipsum dolor sit amet"
          description: "Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
          variant: "secondary"
          centered: false
        - title: "Duis vitae pulvinar turpis"
          url: "https://example.com"
          url_text: "CTA 4"
          variant: "white"
          centered: false
  assertions:
    count:
      div.ecl-carousel.ecl-carousel--full-width: 0
      div.ecl-carousel: 1
      div.ecl-carousel__container: 1
      div.ecl-carousel__slides: 1
      div.ecl-carousel__slide: 6
      div.ecl-carousel__slide section.ecl-page-banner.ecl-page-banner--image: 1
      div.ecl-carousel__slide section.ecl-page-banner.ecl-page-banner--image-gradient.ecl-page-banner--centered: 1
      div.ecl-carousel__slide section.ecl-page-banner.ecl-page-banner--primary.ecl-page-banner--centered: 1
      div.ecl-carousel__controls: 1
      section.ecl-page-banner--image div.ecl-page-banner__image[style="background-image:url(https://placeimg.com/640/480/tech)"]: 1
      section.ecl-page-banner--image-gradient div.ecl-page-banner__image[style="background-image:url(https://placeimg.com/640/480/arch)"]: 1
      div.ecl-carousel__slide section.ecl-page-banner.ecl-page-banner--image-shade.ecl-page-banner--centered: 1
      div.ecl-carousel__slide section.ecl-page-banner.ecl-page-banner--secondary: 1
      div.ecl-carousel__slide section.ecl-page-banner.ecl-page-banner.ecl-page-banner--white: 1
      section.ecl-page-banner--image-shade div.ecl-page-banner__image[style="background-image:url(https://placeimg.com/640/480/tech)"]: 1
      div.ecl-carousel__slide section.ecl-page-banner--image-shade.ecl-page-banner--centered div.ecl-page-banner__content p.ecl-page-banner__description: 0
      div.ecl-carousel__slide section.ecl-page-banner--image-shade.ecl-page-banner--centered div.ecl-page-banner__content div.ecl-page-banner__cta a span.ecl-link__label: 0
      div.ecl-carousel__slide section.ecl-page-banner--secondary div.ecl-page-banner__content div.ecl-page-banner__cta a span.ecl-link__label: 0
      div.ecl-carousel__slide section.ecl-page-banner--white div.ecl-page-banner__content p.ecl-page-banner__description: 0
    contains:
      div.ecl-carousel__slide section.ecl-page-banner--image div.ecl-page-banner__content div.ecl-page-banner__title: 'Lorem ipsum dolor sit amet'
      div.ecl-carousel__slide section.ecl-page-banner--image div.ecl-page-banner__content p.ecl-page-banner__description: 'Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
      div.ecl-carousel__slide section.ecl-page-banner--image div.ecl-page-banner__content div.ecl-page-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 1'
      div.ecl-carousel__slide div.ecl-page-banner.ecl-page-banner--image-gradient.ecl-page-banner--centered div.ecl-page-banner__title: 'Duis vitae pulvinar turpis'
      div.ecl-carousel__slide div.ecl-page-banner.ecl-page-banner--image-gradient.ecl-page-banner--centered p.ecl-page-banner__description: 'Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
      div.ecl-carousel__slide div.ecl-page-banner.ecl-page-banner--image-gradient.ecl-page-banner--centered div.ecl-page-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 2'
      div.ecl-carousel__slide section.ecl-page-banner--primary div.ecl-page-banner.ecl-page-banner--primary.ecl-page-banner--centered div.ecl-page-banner__title: 'Donec maximus pharetra ex a ultricies'
      div.ecl-carousel__slide section.ecl-page-banner--primary div.ecl-page-banner.ecl-page-banner--primary.ecl-page-banner--centered p.ecl-page-banner__description: 'Integer quis lorem tellus.'
      div.ecl-carousel__slide section.ecl-page-banner--primary div.ecl-page-banner.ecl-page-banner--primary.ecl-page-banner--centered div.ecl-page-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 3'
      div.ecl-carousel__slide section.ecl-page-banner--image-shade.ecl-page-banner--centered div.ecl-page-banner__content div.ecl-page-banner__title: 'Donec maximus pharetra ex a ultricies'
      div.ecl-carousel__slide section.ecl-page-banner--secondary div.ecl-page-banner__content div.ecl-page-banner__title: 'Lorem ipsum dolor sit amet'
      div.ecl-carousel__slide section.ecl-page-banner--secondary div.ecl-page-banner__content p.ecl-page-banner__description: 'Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
      div.ecl-carousel__slide section.ecl-page-banner--white div.ecl-page-banner__content div.ecl-page-banner__title: 'Duis vitae pulvinar turpis'
      div.ecl-carousel__slide section.ecl-page-banner--white div.ecl-page-banner__content div.ecl-page-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 4'
      div.ecl-carousel__pagination: 'of 6'
- array:
    '#type': 'pattern'
    '#id': 'carousel'
    '#fields':
      items:
        - title: "Donec maximus pharetra ex a ultricies"
          description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies"
          url: "https://example.com"
          url_text: "CTA 1"
          image: "https://placeimg.com/640/480/tech"
          variant: "image-shade"
        - title: "Lorem ipsum dolor sit amet"
          description: "Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
          url: "https://example.com"
          url_text: "CTA 2"
          variant: "secondary"
          centered: false
        - title: "Duis vitae pulvinar turpis"
          description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
          url: "https://example.com"
          url_text: "CTA 3"
          variant: "white"
          centered: false
      counter_label: 'in'
      full_width: true
  assertions:
    count:
      div.ecl-carousel.ecl-carousel--full-width: 1
      div.ecl-carousel__slide: 3
      div.ecl-carousel__slide section.ecl-page-banner.ecl-page-banner--image-shade.ecl-page-banner--centered: 1
      div.ecl-carousel__slide section.ecl-page-banner.ecl-page-banner--secondary: 1
      div.ecl-carousel__slide section.ecl-page-banner.ecl-page-banner.ecl-page-banner--white: 1
      section.ecl-page-banner--image-shade div.ecl-page-banner__image[style="background-image:url(https://placeimg.com/640/480/tech)"]: 1
    contains:
      div.ecl-carousel__slide section.ecl-page-banner--image-shade.ecl-page-banner--centered div.ecl-page-banner__content div.ecl-page-banner__title: 'Donec maximus pharetra ex a ultricies'
      div.ecl-carousel__slide section.ecl-page-banner--image-shade.ecl-page-banner--centered div.ecl-page-banner__content p.ecl-page-banner__description: 'Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies'
      div.ecl-carousel__slide section.ecl-page-banner--image-shade.ecl-page-banner--centered div.ecl-page-banner__content div.ecl-page-banner__cta a span.ecl-link__label: 'CTA 1'
      div.ecl-carousel__slide section.ecl-page-banner--secondary div.ecl-page-banner__content div.ecl-page-banner__title: 'Lorem ipsum dolor sit amet'
      div.ecl-carousel__slide section.ecl-page-banner--secondary div.ecl-page-banner__content p.ecl-page-banner__description: 'Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
      div.ecl-carousel__slide section.ecl-page-banner--secondary div.ecl-page-banner__content div.ecl-page-banner__cta a span.ecl-link__label: 'CTA 2'
      div.ecl-carousel__slide section.ecl-page-banner--white div.ecl-page-banner__content div.ecl-page-banner__title: 'Duis vitae pulvinar turpis'
      div.ecl-carousel__slide section.ecl-page-banner--white div.ecl-page-banner__content p.ecl-page-banner__description: 'Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
      div.ecl-carousel__slide section.ecl-page-banner--white div.ecl-page-banner__content div.ecl-page-banner__cta a span.ecl-link__label: 'CTA 3'
      div.ecl-carousel__pagination: 'in 3'
