git.iko.soy/typeable/elm-ui
on 4ea86ab help sign in
typeable/elm-ui/tests-rendering/view/view.html
174 lines 5.2 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">
10 <div id="elm-home"></div>
11 <canvas id="canvas"></canvas>
12 </body>
14 <script type="text/javascript">
15 // Calculations for canvas
16 var PIXEL_RATIO = (function () {
17 var ctx = document.createElement("canvas").getContext("2d"),
18 dpr = window.devicePixelRatio || 1,
19 bsr =
20 ctx.webkitBackingStorePixelRatio ||
21 ctx.mozBackingStorePixelRatio ||
22 ctx.msBackingStorePixelRatio ||
23 ctx.oBackingStorePixelRatio ||
24 ctx.backingStorePixelRatio ||
25 1;
27 return dpr / bsr;
28 })();
30 function createHiDPICanvas(w, h, id, ratio) {
31 if (!ratio) {
32 ratio = PIXEL_RATIO;
33 }
34 let can = document.getElementById(id);
35 can.width = w * ratio;
36 can.height = h * ratio;
37 can.style.width = w + "px";
38 can.style.height = h + "px";
39 can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
40 return can;
41 }
42 // create a canvas for text measurements
43 let canvas = createHiDPICanvas(200, 100, "canvas");
44 // Starting Elm App,
45 var app = Elm.WeirdCentering.init({
46 node: document.getElementById("elm-home"),
47 });
49 var test_results = "waiting..";
51 app.ports.report.subscribe(function (results) {
52 test_results = results;
53 });
55 app.ports.analyze.subscribe(function (ids) {
56 // ids : List String
57 var idsLength = ids.length;
58 var results = [];
59 for (var i = 0; i < idsLength; i++) {
60 var id = ids[i];
61 var element = document.getElementById(id);
62 if (element == null) {
63 console.log("id " + id + " not found");
64 }
65 var style = getStyle(element);
66 var bbox = getBoundingBox(element);
67 var metrics = getTextMetrics(element);
69 var visible = isVisible(id, bbox);
71 var result = {
72 textMetrics: metrics,
73 bbox: bbox,
74 style: style,
75 id: id,
76 isVisible: visible,
77 };
78 results.push(result);
79 }
80 app.ports.styles.send(results);
81 });
83 function isVisible(id, bbox) {
84 var current = document.getElementById(id);
85 var result = 0;
86 if (current == document.elementFromPoint(bbox["left"], bbox["top"])) {
87 result++;
88 }
89 if (
90 current == document.elementFromPoint(bbox["left"], bbox["bottom"] - 1)
91 ) {
92 result++;
93 }
94 if (
95 current == document.elementFromPoint(bbox["right"] - 1, bbox["top"])
96 ) {
97 result++;
98 }
99 if (
100 current ==
101 document.elementFromPoint(bbox["right"] - 1, bbox["bottom"] - 1)
102 ) {
103 result++;
104 }
106 if (result == 4) {
107 return true;
108 } else {
109 return false;
110 }
111 }
113 function getStyle(element) {
114 var props = [];
115 var style = window.getComputedStyle(element);
116 for (var i = style.length; i--; ) {
117 var name = style.item(i);
118 var value = style.getPropertyValue(name);
119 props.push([name, value]);
120 }
121 return props;
122 }
124 function getBoundingBox(element) {
125 var bbox = element.getBoundingClientRect();
126 var style = window.getComputedStyle(element, null);
128 var padding = {
129 top: parseFloat(style.getPropertyValue("padding-top")),
130 bottom: parseFloat(style.getPropertyValue("padding-bottom")),
131 left: parseFloat(style.getPropertyValue("padding-left")),
132 right: parseFloat(style.getPropertyValue("padding-right")),
133 };
135 return {
136 top: bbox.top,
137 bottom: bbox.bottom,
138 left: bbox.left,
139 right: bbox.right,
140 width: bbox.width,
141 height: bbox.height,
142 padding: padding,
143 };
144 }
145 function getTextMetrics(element) {
146 // Given our element, we want to return the text metrics on the text within.
147 // If it is an element we want to measure:
148 // we want to get the font family
149 // and the font size.
150 // We're going to presume that the font is loaded.
151 let childrenTextMetrics = [];
152 for (i = 0; i < element.children.length; i++) {
153 if (element.children[i].classList.contains("t")) {
154 let style = window.getComputedStyle(element, null);
155 let fontSize = style.getPropertyValue("font-size");
156 let fontFamily = style.getPropertyValue("font-family");
157 let ctx = canvas.getContext("2d");
159 ctx.font = fontSize + " " + fontFamily; //"16px Roboto";
160 let text = ctx.measureText(element.children[i].innerText);
162 childrenTextMetrics.push({
163 actualBoundingBoxAscent: text.actualBoundingBoxAscent,
164 actualBoundingBoxDescent: text.actualBoundingBoxDescent,
165 actualBoundingBoxLeft: text.actualBoundingBoxLeft,
166 actualBoundingBoxRight: text.actualBoundingBoxRight,
167 width: text.width,
168 });
169 }
170 }
171 return childrenTextMetrics;
172 }
173 </script>
174</html>