matrix.hbs

<section class="informative" id="{{matrix.title}}">
  <!-- the title of the test suite is a State abbreviation -->
  <h2>{{getState matrix.title}}</h2>
  <style>
    .no-wrap {
      white-space: nowrap;
    }
    td.optional {
      background-color: #b9b7b7;
    }
   .text-right {
      text-align: right;
    }
   .text-left {
      text-align: left;
    }
   .text-center {
     text-align: center;
   }
   .qr-code {
     margin-left: 25px;
   }
   .row {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .small-font {
     font-size: 0.75rem;
   }
   pre, code.hljs{
     overflow: auto;
   }
  </style>
  <div class="row">
    <table class="simple">
      <thead>
        <th width="20%">
          <div class="text-right small-font">
          {{matrix.columnLabel}} &#8658;
          </div>
          <div class="text-left small-font">
          <span>&#8659;</span><span>{{matrix.rowLabel}}</span>
          </div>
        </th>
          {{#each matrix.columns}}
            <th class="no-wrap small-font">{{this}}</th>
          {{/each}}
      </thead>
      <tbody>
    {{#each matrix.rows}}
      <tr>
        <!--This is the name of the test-->
        <td class="no-wrap small-font">{{id}}</td>
        <!--These contain if the test passed, failed, or was skipped-->
        {{#each cells}}
          <td class="{{state}} {{getOptional optional}}">{{getStatusMark state}}</td>
        {{/each}}
      </tr>
    {{/each}}
    </tbody>
    </table>
    <div class="qr-code">
    {{#if matrix.images}}
      {{#each matrix.images}}
        <img src={{{this.src}}} />
        {{#each this.meta}}
          <div class="text-center small-font">
            {{this}}
          </div>
        {{/each}}
      {{/each}}
    {{/if}}
    </div>
  </div>
  <div>
    <div>
    {{#if matrix.reportData}}
      {{#each matrix.reportData}}
<pre class="example small-font" style="white-space: break-spaces; word-break: break-all;" title="{{this.label}}">
{{{this.data}}}
</pre>
      {{/each}}
    {{/if}}
    </div>
  </div>
</section>