@@ -0,0 +1,104 @@
1+<!DOCTYPE html>
2+<html>
3+ <head>
4+ <meta charset="UTF-8" />
5+ <title>Rendering Benchmark Viewer</title>
6+ <script type="text/javascript" src="./elm.js"></script>
7+ </head>
8+ <style></style>
9+ <body id="root"></body>
10+
11+ <script type="text/javascript">
12+ var app = Elm.InFrontSize.init();
13+
14+ var test_results = "waiting..";
15+
16+ app.ports.report.subscribe(function (results) {
17+ test_results = results;
18+ });
19+
20+ app.ports.analyze.subscribe(function (ids) {
21+ // ids : List String
22+ var idsLength = ids.length;
23+ var results = [];
24+ for (var i = 0; i < idsLength; i++) {
25+ var id = ids[i];
26+ var element = document.getElementById(id);
27+ if (element == null) {
28+ console.log("id " + id + " not found");
29+ }
30+ var style = getStyle(element);
31+ var bbox = getBoundingBox(element);
32+
33+ var visible = isVisible(id, bbox);
34+
35+ var result = { bbox: bbox, style: style, id: id, isVisible: visible };
36+ results.push(result);
37+ }
38+ app.ports.styles.send(results);
39+ });
40+
41+ function isVisible(id, bbox) {
42+ var current = document.getElementById(id);
43+ var result = 0;
44+ if (current == document.elementFromPoint(bbox["left"], bbox["top"])) {
45+ result++;
46+ }
47+ if (
48+ current == document.elementFromPoint(bbox["left"], bbox["bottom"] - 1)
49+ ) {
50+ result++;
51+ }
52+ if (
53+ current == document.elementFromPoint(bbox["right"] - 1, bbox["top"])
54+ ) {
55+ result++;
56+ }
57+ if (
58+ current ==
59+ document.elementFromPoint(bbox["right"] - 1, bbox["bottom"] - 1)
60+ ) {
61+ result++;
62+ }
63+
64+ if (result == 4) {
65+ return true;
66+ } else {
67+ return false;
68+ }
69+ }
70+
71+ function getStyle(element) {
72+ var props = [];
73+ var style = window.getComputedStyle(element);
74+ for (var i = style.length; i--; ) {
75+ var name = style.item(i);
76+ var value = style.getPropertyValue(name);
77+ props.push([name, value]);
78+ }
79+ return props;
80+ }
81+
82+ function getBoundingBox(element) {
83+ var bbox = element.getBoundingClientRect();
84+ var style = window.getComputedStyle(element, null);
85+
86+ var padding = {
87+ top: parseFloat(style.getPropertyValue("padding-top")),
88+ bottom: parseFloat(style.getPropertyValue("padding-bottom")),
89+ left: parseFloat(style.getPropertyValue("padding-left")),
90+ right: parseFloat(style.getPropertyValue("padding-right")),
91+ };
92+
93+ return {
94+ top: bbox.top,
95+ bottom: bbox.bottom,
96+ left: bbox.left,
97+ right: bbox.right,
98+ width: bbox.width,
99+ height: bbox.height,
100+ padding: padding,
101+ };
102+ }
103+ </script>
104+</html>