-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbox-examples.html
47 lines (33 loc) · 2.03 KB
/
box-examples.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
<!DOCTYPE html">
<html lang="en" >
<head><meta charset="utf-8">
<title>Style Adjuster Box Examples</title>
<link rel="stylesheet" type="text/css" href="box-examples.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="extension/style-adjuster-common.js"></script>
<script type="text/javascript" src="extension/style-adjuster-stylesheets.js"></script>
<script type="text/javascript" src="extension/initialise-target-tab.js"></script>
</head>
<body>
<h1><a class="style-adjuster" href="index.html">Style Adjuster</a> Box Examples</h1>
<image src="images/style-adjuster-slider.svg"/>
<div class="author"><a href="http://thinkinghard.com/">Philip Dorrell</a>, 19 August, 2013</div>
<div class="run-it-now">
<span class="label">Run Style Adjuster on this page:</span><button class="style-adjuster" onclick="openStyleAdjusterPopup();"><img src="extension/icons/icon48.png"/></button>
</div>
<p>This web page shows boxes with "border" properties either separate or joined together.
It is a test page for the behaviour of browsers with regard to reading rules from CSS files and
putting property values into rules in the <b>document.stylesheets</b> object.
</p>
<h2>Separate properties in one rule.</h2>
<p>In some browsers, the different <b>border-</b> properties get joined into a single <b>border</b> rule.</p>
<div class="box-separate-border-properties">Some text in a box with separate border properties in one rule.</div>
<h2>One property in one rule.</h2>
<p>In some browsers the single <b>border</b> property gets split into many different <b>border-</b> properties.</p>
<div class="box-single-border-property">Some text in a box with a single "border" property value.</div>
<h2>Separate properties in separate rules</h2>
<p>Separate properties in separate rules will not get joined together – any splitting and joining
can only occur within the same rule.</p>
<div class="box-separated-border-rules">Some text in a box with separated border property rules.</div>
</body>
</html>