-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblock element test.html
93 lines (81 loc) · 2.46 KB
/
block element 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Block element boundary test</title>
<link rel="stylesheet" type="text/css" href="cheap-toggle.css" />
<style type="text/css">
p, div {
margin: 0;
padding: 0;
}
.ws_normal,
.ws_normal * {
white-space: normal;
}
.ws_pre-wrap ,
.ws_pre-wrap * {
white-space: pre-wrap;
}
</style>
<script type="text/javascript" src="jQuery-1.4.js"></script>
<script type="text/javascript">
$(function(){
// Generic toggle:
$('.toggle a').click(function(){
$(this).parent('.toggle').children('a').removeClass('enabled').end().end().addClass('enabled');
return false;
});
// specific actions
$('#ws_toggle #ws_normal').click(function(){
$('#wrap').removeClass('ws_pre-wrap').addClass('ws_normal');
});
$('#ws_toggle #ws_pre-wrap').click(function(){
$('#wrap').removeClass('ws_normal').addClass('ws_pre-wrap');
});
$('.toggle a.enabled').click();
});
</script>
</head>
<body>
<h1>Block element boundary test</h1>
White-space: <span id="ws_toggle" class="toggle"><a href="#" class="enabled" id="ws_normal">Normal</a><a href="#" id="ws_pre-wrap">Pre-Wrap</a><br /></div>
<div id="wrap">
<p>Paragraph, followed by exactly two empty paragraphs, then a non-empty paragraph.</p>
<p></p>
<p></p>
<p>Fourth paragraph.</p>
<div>Div, followed by exactly two empty divs, then a non-empty div.</div>
<div></div>
<div></div>
<div>Fourth div.</div>
<hr />
<p>Paragraph, followed by exactly two paragraphs with just &nbsp; for content, then a non-empty paragraph.</p>
<p> </p>
<p> </p>
<p>Fourth paragraph.</p>
<div>Div, followed by exactly two divs with just &nbsp; for content, then a non-empty div.</div>
<div> </div>
<div> </div>
<div>Fourth div.</div>
<hr />
<p>Paragraph, followed by exactly two paragraphs with just whitespace (<code>\s</code>) for content, then a non-empty paragraph.</p>
<p> </p>
<p> </p>
<p>Fourth paragraph.</p>
<div>Div, followed by exactly two divs with just whitespace (<code>\s</code>) for content, then a non-empty div.</div>
<div> </div>
<div> </div>
<div>Fourth div.</div>
<hr />
<p>Paragraph, followed by exactly two paragraphs with just <code><br /></code> for content, then a non-empty paragraph.</p>
<p><br /></p>
<p><br /></p>
<p>Fourth paragraph.</p>
<div>Div, followed by exactly two divs with just <code><br /></code> for content, then a non-empty div.</div>
<div><br /></div>
<div><br /></div>
<div>Fourth div.</div>
</div>
</body>
</html>