Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 132 lines (96 sloc) 3.386 kb
bf3d9f2 Fix bug where css3 renderings would not get updated when the target elem...
Jason Johnston authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
6 <title>Tests for hiding/showing elements</title>
7
8 <style type="text/css">
9
10 .section {
11 border: 1px solid #CCC;
12 padding: 2em;
13 margin: 2em;
14 }
15
16 .test {
17 padding: 2em;
18 margin: 2em 0 0;
19 width: 300px;
20 background: #CCF;
21 -webkit-border-radius: 1em;
22 -moz-border-radius: 1em;
23 border-radius: 1em;
24 -webkit-box-shadow: 0 0 5px #000;
25 -moz-box-shadow: 0 0 5px #000;
26 box-shadow: 0 0 5px #000;
27 behavior: url(../build/PIE.htc);
28 }
29
30 </style>
31
32 <script type="text/javascript">
33
34 function toggleDisplay( id ) {
35 var el = document.getElementById( id );
36 el.style.display = el.style.display === 'none' ? 'block' : 'none';
37 }
38
39 function toggleVisibility( id ) {
40 var el = document.getElementById( id );
41 el.style.visibility = el.style.visibility === 'hidden' ? 'visible' : 'hidden';
42 }
43
44 </script>
45
46 </head>
47 <body>
48
49 <h1>Tests for hiding/showing elements</h1>
50
51 <div class="section">
52 <h2>Toggle display, hidden initially</h2>
53
54 <button type="button" onclick="toggleDisplay('test1')">Toggle</button>
55
56 <div class="test" id="test1" style="display:none;">
57 Hello PIE
58 </div>
59 </div>
60
61 <div class="section">
62 <h2>Toggle display, shown initially</h2>
63
64 <button type="button" onclick="toggleDisplay('test2')">Toggle</button>
65
66 <div class="test" id="test2">
67 Hello PIE
68 </div>
69 </div>
70
71 <div class="section">
55cce89 Add tests for reacting to show/hide of ancestor elements
Jason Johnston authored
72 <h2>Toggle parent display, hidden initially</h2>
73
74 <button type="button" onclick="toggleDisplay('test3')">Toggle</button>
75
76 <div id="test3" style="display:none;">
77 <div class="test">Hello PIE</div>
78 </div>
79 </div>
80
81 <div class="section">
82 <h2>Toggle parent display, shown initially</h2>
83
84 <button type="button" onclick="toggleDisplay('test4')">Toggle</button>
85
86 <div id="test4">
87 <div class="test">Hello PIE</div>
88 </div>
89 </div>
90
91 <div class="section">
bf3d9f2 Fix bug where css3 renderings would not get updated when the target elem...
Jason Johnston authored
92 <h2>Toggle visibility, hidden initially</h2>
93
55cce89 Add tests for reacting to show/hide of ancestor elements
Jason Johnston authored
94 <button type="button" onclick="toggleVisibility('test5')">Toggle</button>
bf3d9f2 Fix bug where css3 renderings would not get updated when the target elem...
Jason Johnston authored
95
55cce89 Add tests for reacting to show/hide of ancestor elements
Jason Johnston authored
96 <div class="test" id="test5" style="visibility: hidden">
bf3d9f2 Fix bug where css3 renderings would not get updated when the target elem...
Jason Johnston authored
97 Hello PIE
98 </div>
99 </div>
100
101 <div class="section">
102 <h2>Toggle visibility, shown initially</h2>
103
55cce89 Add tests for reacting to show/hide of ancestor elements
Jason Johnston authored
104 <button type="button" onclick="toggleVisibility('test6')">Toggle</button>
bf3d9f2 Fix bug where css3 renderings would not get updated when the target elem...
Jason Johnston authored
105
55cce89 Add tests for reacting to show/hide of ancestor elements
Jason Johnston authored
106 <div class="test" id="test6">
bf3d9f2 Fix bug where css3 renderings would not get updated when the target elem...
Jason Johnston authored
107 Hello PIE
108 </div>
109 </div>
110
55cce89 Add tests for reacting to show/hide of ancestor elements
Jason Johnston authored
111 <div class="section">
112 <h2>Toggle parent visibility, hidden initially</h2>
113
114 <button type="button" onclick="toggleVisibility('test7')">Toggle</button>
115
116 <div id="test7" style="visibility: hidden">
117 <div class="test">Hello PIE</div>
118 </div>
119 </div>
120
121 <div class="section">
122 <h2>Toggle parent visibility, shown initially</h2>
123
124 <button type="button" onclick="toggleVisibility('test8')">Toggle</button>
125
126 <div id="test8">
127 <div class="test">Hello PIE</div>
128 </div>
129 </div>
130
bf3d9f2 Fix bug where css3 renderings would not get updated when the target elem...
Jason Johnston authored
131 </body>
132 </html>
Something went wrong with that request. Please try again.