git.iko.soy/typeable/elm-ui
on master help sign in
change index.html to view.html to avoid messing with gitignore
255e151Elm UI Automation
notes/classifying-issues.md+1−1
compare with master
unifiedsplit
@@ -22,7 +22,7 @@ If you add a comment to an issue that references a label, that label will be ass
22 - Add a link to the issue, the title of the issue, and the body of the issue to the module comment. [Here's an example](https://github.com/mdgriffith/elm-ui/tree/master/tests-rendering/cases/open/InFrontSize)
22 - Add a link to the issue, the title of the issue, and the body of the issue to the module comment. [Here's an example](https://github.com/mdgriffith/elm-ui/tree/master/tests-rendering/cases/open/InFrontSize)
23 - Test is compiling - Optionally you can see if the test is compiling by first `cd tests-rendering` and then running `elm make cases/open/{The file}.elm --open --dir=view -- --output=view/elm.js --debug`
23 - Test is compiling - Optionally you can see if the test is compiling by first `cd tests-rendering` and then running `elm make cases/open/{The file}.elm --open --dir=view -- --output=view/elm.js --debug`
24 - If it does not compile, flag the issue as `#test-not-compiling`. Don't worry about fixing it unless it's really obvious what needs to happen.
24 - If it does not compile, flag the issue as `#test-not-compiling`. Don't worry about fixing it unless it's really obvious what needs to happen.
25− - Check if the test passes. Do that by opening `tests-rendering/cases/view/index.html` after running the above compilation. If it says all passes, likely you should flag the issue as `#test-incorrectly-passing`.
25+ - Check if the test passes. Do that by opening `tests-rendering/cases/view/view.html` after running the above compilation. If it says all passes, likely you should flag the issue as `#test-incorrectly-passing`.
26 - If it's failing, you can flag as `#test-failing`
26 - If it's failing, you can flag as `#test-failing`
27
27
28
28
tests-rendering/view/view.htmlnew file+104
@@ -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>