Skip to content

Commit e7df546

Browse files
author
mandy
committed
Added CSS detection experimental files
1 parent c46a770 commit e7df546

File tree

1 file changed

+188
-0
lines changed

1 file changed

+188
-0
lines changed

‎experiments/css_diff.htm

+188
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<!DOCTYPE html>
2+
<html class="sonar_probe" lang="en-US">
3+
<meta class="sonar_probe" charset="UTF-8">
4+
<!-- This entire page is just a probe to diff CSS styles that get applied when you include an external stylesheet -->
5+
<head class="sonar_probe">
6+
</head>
7+
<body class="sonar_probe">
8+
<a class="sonar_probe" href="https://www.example.com/">Example</a>
9+
<abbr class="sonar_probe" title="Example">Example</abbr>
10+
<acronym class="sonar_probe" title="Example">Ex</acronym>
11+
<address class="sonar_probe">
12+
1234 23rd St.
13+
Compton
14+
</address>
15+
<article class="sonar_probe">Example</article>
16+
<aside class="sonar_probe">Example</aside>
17+
<audio class="sonar_probe"></audio>
18+
<b class="sonar_probe">Example</b>
19+
<base class="sonar_probe" href="https://www.example.com/">
20+
<bdi class="sonar_probe">Example</bdi>
21+
<bdo class="sonar_probe">Example</bdo>
22+
<big class="sonar_probe">Example</big>
23+
<blockquote class="sonar_probe">Example</blockquote>
24+
<br class="sonar_probe" />
25+
<button class="sonar_probe" type="button">Example</button>
26+
<canvas class="sonar_probe"></canvas>
27+
<caption class="sonar_probe">Example</caption>
28+
<center class="sonar_probe">Example</center>
29+
<cite class="sonar_probe">Example</cite>
30+
<code class="sonar_probe">Example</code>
31+
<table class="sonar_probe">
32+
<colgroup class="sonar_probe">
33+
<col class="sonar_probe">
34+
</colgroup>
35+
<tr class="sonar_probe">
36+
<th class="sonar_probe">Example</th>
37+
</tr>
38+
<tr>
39+
<td class="sonar_probe">Example</td>
40+
</tr>
41+
<tfoot class="sonar_probe"></tfoot>
42+
</table>
43+
<datalist class="sonar_probe">
44+
<option value="Example">
45+
</datalist>
46+
<dl class="sonar_probe">
47+
<dt class="sonar_probe">Example</dt>
48+
<dd class="sonar_probe">Example</dd>
49+
</dl>
50+
<del class="sonar_probe">Example</del>
51+
<details class="sonar_probe">Example</details>
52+
<dfn class="sonar_probe">Example</dfn>
53+
<dialog class="sonar_probe">Example</dialog>
54+
<dir class="sonar_probe">Example</dir>
55+
<div class="sonar_probe">Example</div>
56+
<em class="sonar_probe">Example</em>
57+
<embed class="sonar_probe"></embed>
58+
<fieldset class="sonar_probe">Example</fieldset>
59+
<figure class="sonar_probe">
60+
<figcaption class="sonar_probe">Example</figcaption>
61+
</figure>
62+
<font class="sonar_probe">Example</font>
63+
<form class="sonar_probe"></form>
64+
<frameset class="sonar_probe">
65+
<frame class="sonar_probe" src="data:text/html,Example"></frame>
66+
</frameset>
67+
<h1 class="sonar_probe">Example</h1>
68+
<h2 class="sonar_probe">Example</h2>
69+
<h3 class="sonar_probe">Example</h3>
70+
<h4 class="sonar_probe">Example</h4>
71+
<h5 class="sonar_probe">Example</h5>
72+
<h6 class="sonar_probe">Example</h6>
73+
<header class="sonar_probe">Example</header>
74+
<hr class="sonar_probe">
75+
<i class="sonar_probe">Example</i>
76+
<iframe class="sonar_probe" src="data:text/html,Example"></iframe>
77+
<img class="sonar_probe" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX4/P+Jpl6OAAAAEklEQVR4XgXAgQgAAAAAoP2pjwACAAF0O1JHAAAAAElFTkSuQmCC">
78+
<input class="sonar_probe"></input>
79+
<ins class="sonar_probe">Example</ins>
80+
<kbd class="sonar_probe">Example</kbd>
81+
<keygen class="sonar_probe">
82+
<label class="sonar_probe">Example</label>
83+
<legend class="sonar_probe">Example</legend>
84+
<li class="sonar_probe">Example</li>
85+
<link class="sonar_probe" rel="stylesheet" type="text/css" href="data:text/css,">
86+
<main class="sonar_probe">Example</main>
87+
<mark class="sonar_probe">Example</mark>
88+
<menu class="sonar_probe" type="context">
89+
<menuitem class="sonar_probe">
90+
Example
91+
</menuitem>
92+
</menu>
93+
<meter class="sonar_probe" value="2" min="0" max="10">Example</meter>
94+
<nav class="sonar_probe"></nav>
95+
<noframes class="sonar_probe">Example</noframes>
96+
<noscript class="sonar_probe">Example</noscript>
97+
<object class="sonar_probe"><param class="sonar_probe"></param></object>
98+
<ol class="sonar_probe">Example</ol>
99+
<optgroup class="sonar_probe">Example</optgroup>
100+
<output class="sonar_probe">Example</output>
101+
<p class="sonar_probe">Example</p>
102+
<pre class="sonar_probe"></pre>
103+
<progress class="sonar_probe" value="22" max="100"></progress>
104+
<q class="sonar_probe">Example</q>
105+
<ruby class="sonar_probe">
106+
漢 <rt class="sonar_probe"><rp class="sonar_probe">(</rp>ㄏㄢˋ<rp>)</rp></rt>
107+
</ruby>
108+
<s class="sonar_probe">Example</s>
109+
<samp class="sonar_probe">Example</samp>
110+
<script class="sonar_probe" src="data:text/javascript,[]"></script>
111+
<section class="sonar_probe">Example</section>
112+
<select class="sonar_probe"></select>
113+
<small class="sonar_probe">Example</small>
114+
<source class="sonar_probe"></source>
115+
<span class="sonar_probe">Example</span>
116+
<strike class="sonar_probe">Example</strike>
117+
<strong class="sonar_probe">Example</strong>
118+
<style class="sonar_probe"></style>
119+
<sub class="sonar_probe">Example</sub>
120+
<summary class="sonar_probe">Example</summary>
121+
<sup class="sonar_probe">Example</sup>
122+
<textarea class="sonar_probe"></textarea>
123+
<time class="sonar_probe">13:37</time>
124+
<title class="sonar_probe">Example</title>
125+
<track class="sonar_probe"></track>
126+
<tt class="sonar_probe">Example</tt>
127+
<u class="sonar_probe">Example</u>
128+
<ul class="sonar_probe">Example</ul>
129+
<var class="sonar_probe">Example</var>
130+
<wbr class="sonar_probe">Example</wbr>
131+
<div id="main" class="sonar_probe"></div>
132+
</body>
133+
<footer class="sonar_probe">Example</footer>
134+
<script>
135+
var before_stylesheet = get_styles( "sonar_probe" );
136+
var remote_stylesheet = document.createElement('link');
137+
remote_stylesheet.type = 'text/css';
138+
remote_stylesheet.rel = 'stylesheet';
139+
remote_stylesheet.href = 'https://www.yahoo.com/sy/zz/combo?nn/lib/metro/g/yui/widget-base-css_3.8.1.css&nn/lib/metro/g/yui/widget-stack-css_3.8.1.css&nn/lib/metro/g/yui/overlay-css_3.8.1.css&nn/lib/metro/g/ui/base_0.0.11.css&nn/lib/metro/g/ui/helpers_0.0.9.css&nn/lib/metro/g/ui/typography_0.0.4.css&nn/lib/metro/g/theme/default/common_0.0.40.css&nn/lib/metro/g/theme/default/desktop_0.0.142.css&nn/lib/metro/g/theme/hr_blue_0.0.17.css&nn/lib/metro/g/uiplugins/modal_service_0.0.4.css&nn/lib/metro/g/uiplugins/iframeshim_service_0.0.13.css&nn/lib/metro/g/uiplugins/menu_service_0.1.15.css&nn/lib/metro/g/uiplugins/tablite_service_desktop_0.0.18.css&nn/lib/metro/g/uiplugins/tablist_service_0.1.16.css&nn/lib/metro/g/uiplugins/tablist_default_0.1.19.css&nn/lib/metro/g/uiplugins/tablist_service_vertical_0.0.3.css&nn/lib/metro/g/uicontrib/lw_style_css_0.0.2.css&nn/lib/metro/g/uiplugins/tooltip_service_1.0.15.css&nn/lib/metro/g/uiplugins/carousel_service_0.1.22.css';
140+
remote_stylesheet.onload = function() {
141+
after_stylesheet = get_styles( "sonar_probe" );
142+
console.log( diff_styles( before_stylesheet, after_stylesheet ) );
143+
};
144+
document.getElementsByTagName("head")[0].appendChild( remote_stylesheet );
145+
146+
function diff_styles( first_styleset, second_styleset ) {
147+
var diffs = {};
148+
for( tag_element in second_styleset ) {
149+
for( style in second_styleset[ tag_element ] ) {
150+
if( style in first_styleset[ tag_element ] ) {
151+
if( second_styleset[ tag_element ][ style ] !== first_styleset[ tag_element ][ style ] ) {
152+
//console.log( 'Style "' + style + '" in ' + tag_element + ' changed from "' + first_styleset[ tag_element ][ style ] + '" to "' + second_styleset[ tag_element ][ style ] + '"' );
153+
if( diffs[ tag_element ] === undefined ) {
154+
diffs[ tag_element ] = {};
155+
}
156+
diffs[ tag_element ][ style ] = second_styleset[ tag_element ][ style ];
157+
}
158+
}
159+
}
160+
}
161+
return diffs;
162+
}
163+
164+
function get_styles( class_name ) {
165+
style_property_blacklist = [ 'height', 'width' ];
166+
probes = document.getElementsByClassName( class_name );
167+
probe_styles = [];
168+
return_probe_data = {};
169+
for( var i = 0; i < probes.length; i++ ) {
170+
var probe_element_results = {};
171+
var element_styles = window.getComputedStyle( probes[i] );
172+
for( style in element_styles ) {
173+
if( isNaN( style ) && style != 'length' && style != 'cssText' && style != 'parentRule' && style_property_blacklist.indexOf( style ) == -1) {
174+
probe_element_results[ style ] = element_styles.getPropertyValue( style );
175+
}
176+
}
177+
var key_name = '';
178+
if( probes[i].id == '' ) {
179+
key_name = probes[i].tagName;
180+
} else {
181+
key_name = probes[i].tagName + '_' + probes[i].id;
182+
}
183+
return_probe_data[ key_name ] = probe_element_results;
184+
}
185+
return return_probe_data;
186+
}
187+
</script>
188+
</html>

0 commit comments

Comments
 (0)