-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtest.html
103 lines (86 loc) · 2.94 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Joe Walker">
<title>CSS Doctor Test</title>
<script src="lite/start.js"></script>
<style type="text/css">
span.demo { color:#AAA; }
span.reason { font-style: italic; }
</style>
</head>
<body>
<h1>CSS Doctor Test Page</h1>
<p>This page helps us test the CSS Doctor. It tests 2 parts - the general UI and
the set of rules.</p>
<h2>User Interface</h2>
<p>The UI would normally be invoked from a right-click context menu on the
element the user wishes to inspect.</p>
<p>For demo simplicity, this is mocked using this button
<button onclick="CssDoctorLite.start();">CSS Doctor</button> and a left-click on
the element to inspect.</p>
<p>Be warned - due to the tests below, there is likely to be a large and complex
set of stylesheets, which could make the UI more cumbersome than it would
normally be.</p>
<h2>The Rules</h2>
<ul id="rules">
<li data-setting-id="stoBeDisabled-r0-p0" id="liToBeDisabled">
Disabled stylesheet:
<style id="toBeDisabled">
#liToBeDisabled span.demo { color:red; }
</style>
<script>document.querySelector("#toBeDisabled").disabled = true;</script>
<span class="demo">Demo</span>
<span class="reason"></span>
</li>
<li data-setting-id="sinapplicableMedia-m0r0-p0" id="testInapplicableMedia">
Inapplicable Media on Stylesheet:
<style id="inapplicableMedia">
@media print { #testInapplicableMedia span.demo { color:red; } }
</style>
<span class="demo">Demo</span>
<span class="reason"></span>
</li>
<li data-setting-id="sunmatched-r0-p0" id="liUnmatched">
Unmatched Selector:
<style id="unmatched">
#liUnmatched style { color:red; }
</style>
<span class="demo">Demo</span>
<span class="reason"></span>
</li>
<li data-setting-id="sdimensionedInline-r0-p0">
Dimensioned Inline:
<style id="dimensionedInline">
#dimensionedInlineDemo { top: 30px; }
</style>
<span class="demo" id="dimensionedInlineDemo">Demo</span>
<span class="reason"></span>
</li>
<li data-setting-id="sworking-r0-p0">
Working Rule:
<!-- Note: what we don't have working is value normalization, so this will
break if you specify the color as 'green' because computed style will still
return the value as rgb(...) -->
<style id="working">
#workingDemo { color:rgb(0, 128, 0); }
</style>
<span class="demo" id="workingDemo">Demo</span>
<span class="reason"></span>
</li>
</ul>
</body>
</html>
<script>
CssDoctorLite.load(function() {
var testElements = document.querySelectorAll("#rules li");
Array.prototype.forEach.call(testElements, function(testElement) {
var demo = testElement.querySelector(".demo");
var settingId = testElement.getAttribute("data-setting-id");
// Warning - this should really be called async through a Surrogate.
var answer = styleLogic.getAnswer(demo, settingId, { skipIntro: true });
testElement.querySelector(".reason").innerHTML = answer.answers.join("");
});
});
</script>