<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Test Results | xcpretty</title>
    <style type="text/css">
      body { font-family:Avenir Next, Helvetica Neue, sans-serif; color: #4A4A4A; background-color: #F0F3FB; margin:0;}
      h1 { font-weight: normal; font-size: 24px; margin: 10px 0 0 0;}
      h3 { font-weight: normal; margin: 2px; font-size: 1.1em;}
      header { position: fixed;width: 100%;background: rgba(249, 254, 255, 0.9);margin: 0;padding: 10px;}
      header:before, header:after { content:""; display:table;}
      header:after { clear:both;}
      a:link { color: #A1D761;}
      footer { clear: both;position: relative;z-index: 10;height: 40px;margin-top: -10px; margin-left:30px; font-size:12px;}
      table { width:100%; border-collapse: collapse;}
      tr td:first-child { width:7%}
      .left { float: left; margin-left:30px;}
      .right { float: right; margin-right: 40px; margin-top: 0; margin-bottom:0;}
      .test-suite { margin: 0 0 30px 0;}
      .test-suite > .heading { font-family:Menlo, Monaco, monospace; font-weight: bold; border-color: #A1D761; background-color: #B8E986; border-width: 1px;}
      .test-suite.failing > .heading { border-color: #C84F5E; background-color: #E58591;}
      .test-suite > .heading > .title { margin-top: 4px; margin-left: 10px;}
      .tests { overflow: scroll;margin: 0 30px 0 60px;}
      .test, .test-suite > .heading { height: 30px; overflow: hidden; margin: 0 30px;}
      .test, .test-suite > .heading { border-width: 1px; border-collapse: collapse; border-style: solid; }
      .test { margin-left: 30px; border-top:none;}
      .test.failing { border-color: #C84F5E; background-color: #F4DDE0;}
      .test.passing { border-color: #A1D761;}
      .test.failing { background-color: #E7A1AA;}
      .test.passing { background-color: #CAF59F;}
      .test.failing.odd { background-color: #EEC7CC;}
      .test.passing.odd { background-color: #E5FBCF;}
      .details.failing { background-color: #F4DDE0; border: 1px solid #C84F5E;}
      .details.passing { background-color: #E5F4DC; border: 1px solid #A1D761;}
      .test .test-detail:last-child { padding-bottom: 8px;}
      .test .title { float: left; font-size: 0.9em; margin-top: 8px; font-family: Menlo, Monaco, monospace;}
      .test .time { float: left;margin: 4px 10px 0 20px;}
      .test-detail { font-family:Menlo, Monaco, monospace; font-size: 0.9em; margin: 5px 0 5px 0px;}
      .screenshots { height: auto; overflow: hidden; padding: 4px 4px 0 4px; background-color: #B8E986; border: #A1D761; border-width: 0 1px; border-style: solid; }
      .screenshots.failing { border-color: #C84F5E; background-color: #E58591; }
      .screenshot { max-height: 60px; float: left; transition: max-height 0.2s; margin: 0 4px 4px 0 }
      .screenshot.selected { max-height: 568px; }
      #test-suites { display: inline-block; width: 100%;margin-top:100px;}
      #segment-bar { margin-top: 10px;margin-left: 14px;float:right;}
      #segment-bar a:first-child { border-radius: 9px 0 0 9px; border-right: none;}
      #segment-bar a:last-child { border-radius: 0 9px 9px 0; border-left: none;}
      #segment-bar > a { color: #565656; border: 2px solid  #7B7B7B; width: 80px; font-weight: bold; display:inline-block;text-align:center; font-weight: normal;}
      #segment-bar > a.selected { background-color: #979797; color: #F0F3FB;}
      #counters { float: left;margin: 10px;text-align: right;}
      #counters h2 { font-size: 16px; font-family: Avenir, sans-serif; font-weight: lighter; display:inline;}
      #counters .number { font-size: 20px;}
      #fail-count { color: #D0021B; margin-left:10px;}
      @media (max-width: 640px) {
        h1, #counters, #segment-bar { margin: 5px auto; text-align:center;}
        header, #segment-bar { width: 100%; position: relative; background:none;}
        .left, .right { float:none; margin:0;}
        #test-suites { margin-top: 0;}
        #counters { float:none;}
      }
    </style>
    <script type="text/javascript">
      var hide = function(element) { element.style.display = 'none';}
      var show = function(element) { element.style.display = '';}
      var isHidden = function(element) { return element.style.display == 'none';}
      var isSelected = function(element) { return element.classList.contains("selected");}
      var deselect = function(element) { return element.classList.remove("selected");}
      var select = function(element) { return element.classList.add("selected");}
      var toggle = function(element) { isHidden(element) ? show(element) : hide(element);};
      var toggleTests = function(heading) { toggle(heading.parentNode.children[1]);};
      var toggleDetails = function(detailClass) {
        var details = document.querySelectorAll('.' + detailClass);
        for (var i = details.length - 1; i >= 0; i--) { toggle(details[i]);};
      };
      var hideAll = function(collection) {
        for (var i = collection.length - 1; i >= 0; i--) { hide(collection[i]); };
      }
      var showAll = function(collection) {
        for (var i = collection.length - 1; i >= 0; i--) { show(collection[i]); };
      }
      var selectSegment = function(segment) {
        if (isSelected(segment)) return;
        var segments = document.querySelectorAll('#segment-bar > a');
        for (var i = segments.length - 1; i >= 0; i--) { deselect(segments[i]);};
        select(segment);
        if (segment.id == "all-segment") {
          showAll(document.querySelectorAll('.test-suite'));
          showAll(document.querySelectorAll('.test'));
        } else if (segment.id == "failing-segment") {
          hideAll(document.querySelectorAll('.test.passing'));
          showAll(document.querySelectorAll('.test.failing'));
          hideAll(document.querySelectorAll('.test-suite.passing'));
          showAll(document.querySelectorAll('.test-suite.failing'));
        } else if (segment.id == "passing-segment") {
          hideAll(document.querySelectorAll('.test.failing'));
          showAll(document.querySelectorAll('.test.passing'));
          hideAll(document.querySelectorAll('.test-suite.failing'));
          showAll(document.querySelectorAll('.test-suite.passing'));
        }
      }
      var toggleScreenshot = function(suiteName, index) {
        var screenshot = document.getElementById("screenshot-" + suiteName + "-" + index);
        isSelected(screenshot) ? deselect(screenshot) : select(screenshot);
      }
    </script>
  </head>
  <body>
    <header>
      <section class="left">
        <h1>Test Results</h1>
      </section>
      <section class="right">
        <section id="counters">
          <h2 id="test-count"><span class="number"><%= test_count %></span> tests</h2>
          <% if fail_count > 0 %>
            <h2 id="fail-count"><span class="number"><%= fail_count %></span> failures</h2>
          <% end %>
        </section>
        <section id="segment-bar">
          <a id="all-segment" onclick="selectSegment(this);" class="selected">All</a><a id="failing-segment" onclick="selectSegment(this);">Failing</a><a id="passing-segment" onclick="selectSegment(this);">Passing</a>
        </section>
      </section>
    </header>
    <section id="test-suites">
      <% test_suites.each do |name, info| %>
        <% next unless info[:tests].size > 0 %>
        <section class="test-suite <%= info[:failing] ? 'failing' : 'passing'%>" id="<%= name %>">
          <section class="heading" onclick="toggleTests(this);">
            <h3 class="title"><%= name %></h3>
          </section>
          <section class="tests">
            <table>
            <% info[:tests].each_with_index do |test, index| %>
              <% detail_class = test[:name].gsub(/\s/,'') %>
              <tr class="test <%= test[:failing] ? 'failing' : 'passing'%> <%= index % 2 != 0 ? 'odd' :''%>"  onclick="toggleDetails('<%= detail_class %>');">
                <td>
                  <% if test[:time] %>
                    <h3 class="time"><%= test[:time] %>s</h3>
                  <% end %>
                </td>
                <td><h3 class="title"><%= test[:name] %></h3></td>
              </tr>
              <% if test[:reason] || test[:snippet] || !test[:screenshots].empty? %>
                <tr class="details <%= test[:failing] ? 'failing' : 'passing'%> <%= detail_class %>">
                  <td></td>
                  <td>
                    <% if test[:reason] %>
                      <section class="test-detail reason"><%= test[:reason] %></section>
                    <% end %>
                    <% if test[:snippet] %>
                      <section class="test-detail snippet"><%= test[:snippet] %></section>
                      <section class="test-detail"><%= test[:file] %></section>
                    <% end %>
                    <% if !test[:screenshots].empty? %>
                      <section class="test-detail">
                        <% test[:screenshots].each_with_index do |screenshot, idx| %>
                          <a href="javascript:toggleScreenshot('<%=test[:name] %>', <%=index %>)">
                            <img class="screenshot" id="screenshot-<%=test[:name] %>-<%=index %>" src="<%=screenshot %>" />
                          </a>
                        <% end %>
                      </section>
                    <% end %>
                  </td>
                </tr>
              <% end %>
            <% end %>
            </table>
          </section>
        </section>
      <% end %>
    </section>
    <footer>Report generated with <a href="https://github.com/supermarin/xcpretty">xcpretty</a></footer>
  </body>
</html>
