chromium-tools/normalized.html at master · kojiishi/chromium-tools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<style>
details {
  margin-bottom: 1em;
}
.item {
  cursor: pointer;
}
iframe {
  width: 100%;
  height: 400px;
}
.hidden {
  display: none;
}
</style>
<body>
<template id="item">
  <div class="item">
    <span class="path"></span>
    <div class="details"></div>
  </div>
</template>
<script>
class Results {
  constructor() {
    this.rs = fetch('layout-test-results/normalized/normalized.json');
    this.openElements = [];
  }

  async items() {
    return (await this.rs).json();
  }

  async render() {
    let items = await this.items();
    this.renderWithFilter('Has image and text dump match',
      items.filter(i => i.hasImage && i.hasTextDump && i.matches));
    this.renderWithFilter('Has image and non-text dump match',
      items.filter(i => i.hasImage && !i.hasTextDump && i.matches));
    this.renderWithFilter('Has image but text dump did not match',
      items.filter(i => i.hasImage && i.hasTextDump && !i.matches));
    this.renderWithFilter('Has image but non-text dump did not match',
      items.filter(i => i.hasImage && !i.hasTextDump && !i.matches));
    this.renderWithFilter('No image but text dump match',
      items.filter(i => !i.hasImage && i.hasTextDump && i.matches));
    this.renderWithFilter('No image but non-text dump match',
      items.filter(i => !i.hasImage && !i.hasTextDump && i.matches));
    this.renderWithFilter('No image and text dump did not match',
      items.filter(i => !i.hasImage && i.hasTextDump && !i.matches));
    this.renderWithFilter('No image, non-text dump did not match',
      items.filter(i => !i.hasImage && !i.hasTextDump && !i.matches));
  }

  renderWithFilter(title, items) {
    let parent = document.createElement('details');
    parent.open = true;
    let heading = document.createElement('summary');
    heading.textContent = `${title} (${items.length})`;
    parent.appendChild(heading);
    let rowTemplate = document.getElementById('item').content.children[0];
    for (let item of items) {
      let row = document.importNode(rowTemplate, true);
      row.querySelector('.path').textContent = item.path;
      row.addEventListener('click', e => {
        this.onClickItem(item, row);
      });
      parent.appendChild(row);
    }
    document.body.appendChild(parent);
  }

  onClickItem(item, row) {
    let parent = row.querySelector('.details');
    if (parent.firstChild) {
      if (parent.classList.contains('hidden')) {
        this.hideAllDetails();
        parent.classList.remove('hidden');
        this.openElements.push(parent);
      } else {
        parent.classList.add('hidden');
      }
      return;
    }
    this.hideAllDetails();
    let diff = document.createElement('iframe');
    diff.src = 'layout-test-results/' + item.path.replace(/\.\w+$/, '-pretty-diff.html');
    parent.appendChild(diff);
    if (item.hasTextDump && !item.matches) {
      let diff = document.createElement('iframe');
      diff.src = 'layout-test-results/normalized/' + item.path.replace(/\.\w+$/, '-diff.txt');
      parent.appendChild(diff);
    }
    this.openElements.push(parent);
  }

  hideAllDetails() {
    for (let element of this.openElements)
      element.classList.add('hidden');
    this.openElements = [];
  }
}
let results = new Results;
results.render();
</script>
</body>