git.iko.soy/typeable/elm-ui
on d6d2a8a help sign in
typeable/elm-ui/tests-rendering/view/view.html
104 lines 2.7 kB history raw
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>
11 <script type="text/javascript">
12 var app = Elm.WeirdCentering.init();
14 var test_results = "waiting..";
16 app.ports.report.subscribe(function (results) {
17 test_results = results;
18 });
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);
33 var visible = isVisible(id, bbox);
35 var result = { bbox: bbox, style: style, id: id, isVisible: visible };
36 results.push(result);
37 }
38 app.ports.styles.send(results);
39 });
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 }
64 if (result == 4) {
65 return true;
66 } else {
67 return false;
68 }
69 }
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 }
82 function getBoundingBox(element) {
83 var bbox = element.getBoundingClientRect();
84 var style = window.getComputedStyle(element, null);
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 };
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>