-
Notifications
You must be signed in to change notification settings - Fork 1
/
driver.html
145 lines (132 loc) · 3.63 KB
/
driver.html
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype HTML>
<style>
body, html {
padding: 0px;
margin: 0px;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
background-color: #eeeeee;
}
#container {
will-change: transform;
display: grid;
grid-template: 1fr 5fr / 3fr 400px;
height: 99vh;
width: 99vw;
}
#controls_container {
grid-row: 1 / span 1;
grid-column: 1 / span 1;
width: 100%;
min-width: 200px;
border: 1px solid black;
}
#test_container {
grid-row: 2 / span 1;
grid-column: 1 / span 2;
width: 100%;
height: 100%;
border: 1px solid black;
overflow: hidden;
}
.spinner_frame {
width: 150px;
height: 150px;
}
#spinner_container {
grid-row: 1 / span 1;
grid-column: 2 / span 1;
order: 1;
min-width: 400px;
width: 100%;
border: 1px solid black;
display: grid;
grid-template: 150px 50px / 100%;
}
#spinners {
display: flex;
justify-content: space-around;
align-items: center;
}
#spinner_controls {
display: flex;
justify-content: space-around;
align-items: center;
}
#test_frame {
background-color: white;
width: 100%;
height: 100%;
}
#controls_frame {
visibility: hidden;
width: 1px;
height: 1px;
}
</style>
<div id="container">
<div id="controls_container">
<iframe id="controls_frame" frameborder=0 scrolling=no src="tests/large_dom_control.html"></iframe>
<div>
<input id="refresh_test" type=button value="refresh test"></input>
</div>
</div>
<div id="spinner_container">
<div id="spinners">
<iframe id="css_spinner" class="spinner_frame" frameborder=0 scrolling=no src="spinners/css_spinner.html?d=150"></iframe>
<iframe id="raf_spinner" class="spinner_frame" frameborder=0 scrolling=no src="spinners/raf_spinner.html?d=150"></iframe>
</div>
<div id="spinner_controls">
<input id="hide_css_spinner" type=button value="toggle css spinner"></input>
<input id="hide_raf_spinner" type=button value="toggle raf spinner"></input>
</div>
</div>
<div id="test_container">
<iframe id="test_frame" frameborder=0 src=""></iframe>
</div>
</div>
<script>
function processMessage(e) {
if (e.data.controls_dimensions !== undefined) {
let controls_frame = document.getElementById("controls_frame");
let dimensions = e.data.controls_dimensions;
controls_frame.style.width = dimensions[0] + "px";
controls_frame.style.height = dimensions[1] + "px";
controls_frame.style.visibility = "visible";
} else if (e.data.test_url !== undefined) {
let test_frame = document.getElementById("test_frame");
test_frame.src = e.data.test_url;
}
}
function init() {
let hide_css_spinner = document.getElementById("hide_css_spinner");
hide_css_spinner.addEventListener("click", function() {
let spinner = document.getElementById("css_spinner");
let hidden = spinner.style.visibility === "hidden";
if (hidden) {
spinner.style.visibility = "visible";
} else {
spinner.style.visibility = "hidden";
}
});
let hide_raf_spinner = document.getElementById("hide_raf_spinner");
hide_raf_spinner.addEventListener("click", function() {
let spinner = document.getElementById("raf_spinner");
let hidden = spinner.style.visibility === "hidden";
if (hidden) {
spinner.style.visibility = "visible";
} else {
spinner.style.visibility = "hidden";
}
});
let refresh_test = document.getElementById("refresh_test");
refresh_test.addEventListener("click", function() {
let controls_frame = document.getElementById("controls_frame");
controls_frame.contentWindow.postMessage("get_test_url", "*");
});
window.addEventListener("message", processMessage, false);
}
init();
</script>