WebCore:
[WebKit-https.git] / LayoutTests / fast / css / last-of-type-pseudo-class.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
2 \r
3 <html>\r
4         <head>\r
5                 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />\r
6                 <title>:last-of-type</title>\r
7                 \r
8                 <style type='text/css'>\r
9                 <!--\r
10 \r
11                         body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }\r
12                         pre { background: #fff; padding: 0.5em; }\r
13                         li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; }\r
14                         .test { display: block; padding: 0.75em; }\r
15                         .base, .defaultgreen { background-color: #090; }\r
16                         .defaultred { background-color: #900; }\r
17                         \r
18                         .defaultred :last-of-type {\r
19                                 background-color: #090;\r
20                         }\r
21 \r
22                         .defaultgreen :last-of-type {\r
23                                 background-color: #900;\r
24                         }\r
25 \r
26                         blockquote {\r
27                                 margin: 0;\r
28                         }\r
29 \r
30                 -->\r
31                 </style>\r
32         </head>\r
33 \r
34         <body>\r
35                 <p>This page is part of the <a href="http://www.css3.info">CSS3.info</a> <a href="http://www.css3.info/selectors-test/">CSS selectors test</a>. See more info on <a href="http://www.css3.info/preview/attribute-selectors.html">CSS3 selectors</a>.</p>\r
36                 \r
37                 <div class='base'></div>\r
38         \r
39                 <ol>\r
40                         <li>\r
41                                 <div class='defaultred'>\r
42                                         <div class='test required'></div>\r
43                                 </div>\r
44                                 \r
45                                 <pre>div:last-of-type {\r
46 }\r
47 \r
48 &lt;div&gt;Does this element match?&lt;/div&gt;</pre>\r
49 \r
50                                 <p>\r
51                                         The CSS selector should match the marked div element, because it is the only element of this type\r
52                                 </p>\r
53                         </li>\r
54                         \r
55                         <li>\r
56                                 <div class='defaultred'>\r
57                                         <div></div>\r
58                                         <div class='test'></div>\r
59                                 </div>\r
60                                 \r
61                                 <pre>div:last-of-type {\r
62 }\r
63 \r
64 &lt;div&gt;&lt;/div&gt;\r
65 &lt;div&gt;Does this element match?&lt;/div&gt;</pre>\r
66 \r
67                                 <p>\r
68                                         The CSS selector should match the marked div element, because it is the last element of this type\r
69                                 </p>\r
70                         </li>\r
71                         \r
72                         <li>\r
73                                 <div class='defaultred'>\r
74                                         <div class='test required'></div>\r
75                                         <blockquote></blockquote>\r
76                                 </div>\r
77                                 \r
78                                 <pre>div:last-of-type {\r
79 }\r
80 \r
81 &lt;div&gt;Does this element match?&lt;/div&gt;\r
82 &lt;blockquote&gt;&lt;/blockquote&gt;</pre>\r
83 \r
84                                 <p>\r
85                                         The CSS selector should match the marked div element, because it is the last element of this type\r
86                                 </p>\r
87                         </li>\r
88         \r
89                         <li>\r
90                                 <div class='defaultred'>\r
91                                         <blockquote>\r
92                                                 <div class='test'></div>\r
93                                         </blockquote>\r
94                                         <div></div>\r
95                                 </div>\r
96                                 \r
97                                 <pre>div:last-of-type {\r
98 }\r
99 \r
100 &lt;blockquote&gt;\r
101    &lt;div&gt;Does this element match?&lt;/div&gt;\r
102 &lt;/blockquote&gt;\r
103 &lt;div&gt;&lt;/div&gt;</pre>\r
104 \r
105                                 <p>\r
106                                         The CSS selector should match the marked div element, because it is the last element of this type in this scope\r
107                                 </p>\r
108                         </li>\r
109 \r
110                         <li>\r
111                                 <div class='defaultred'>\r
112                                         <div>\r
113                                                 <div class='test'></div>\r
114                                         </div>\r
115                                 </div>\r
116                                 \r
117                                 <pre>div:last-of-type {\r
118 }\r
119 \r
120 &lt;div&gt;\r
121    &lt;div&gt;Does this element match?&lt;/div&gt;\r
122 &lt;/div&gt;</pre>\r
123 \r
124                                 <p>\r
125                                         The CSS selector should match the marked div element, because it is the last element of this type in the current scope\r
126                                 </p>\r
127                         </li>\r
128 \r
129                         <li>\r
130                                 <div class='defaultred'>\r
131                                         <div class='test'></div>\r
132                                         <blockquote>\r
133                                                 <div></div>\r
134                                         </blockquote>\r
135                                 </div>\r
136                                 \r
137                                 <pre>div:last-of-type {\r
138 }\r
139 \r
140 &lt;div&gt;Does this element match?&lt;/div&gt;\r
141 &lt;blockquote&gt;\r
142    &lt;div&gt;&lt;/div&gt;\r
143 &lt;/blockquote&gt;</pre>\r
144 \r
145                                 <p>\r
146                                         The CSS selector should match the marked div element, because it is the last element of this type in the current scope\r
147                                 </p>\r
148                         </li>\r
149 \r
150                         <li>\r
151                                 <div class='defaultgreen'>\r
152                                         <div class='test default required'></div>\r
153                                         <div></div>\r
154                                 </div>\r
155                                 \r
156                                 <pre>div:last-of-type {\r
157 }\r
158 \r
159 &lt;div&gt;Does this element match?&lt;/div&gt;\r
160 &lt;div&gt;&lt;/div&gt;</pre>\r
161 \r
162                                 <p>\r
163                                         The CSS selector should not match the marked div element, because it is the first element of this type\r
164                                 </p>\r
165                         </li>\r
166 \r
167                         <li>\r
168                                 <div class='defaultgreen'>\r
169                                         <div class='test default'></div>\r
170                                         <DIV></DIV>\r
171                                 </div>\r
172                                 \r
173                                 <pre>div:last-of-type {\r
174 }\r
175 \r
176 &lt;div&gt;Does this element match?&lt;/div&gt;\r
177 &lt;DIV&gt;&lt;/DIV&gt;</pre>\r
178 \r
179                                 <p>\r
180                                         The CSS selector should not match the marked div element, because it is the first element of this type\r
181                                 </p>\r
182                         </li>\r
183 \r
184                         <li>\r
185                                 <div class='defaultred'>\r
186                                         <div id='insertAfter1'></div>\r
187                                 </div>\r
188 \r
189                                 <script type="text/javascript">\r
190                                 <!--\r
191 \r
192                                         var ib = document.getElementById('insertAfter1');\r
193                                         var el = document.createElement("div");\r
194                                         el.className = 'test';\r
195                                         ib.parentNode.appendChild(el);\r
196 \r
197                                 \r
198                                 //-->\r
199                                 </script>\r
200                                 \r
201                                 <pre>div:last-of-type {\r
202 }\r
203 \r
204 &lt;div id='insertAfter'&gt;&lt;/div&gt;\r
205 \r
206 var ib = document.getElementById('insertAfter');\r
207 ib.parentElement.appendChild(document.createElement("div"));</pre>\r
208 \r
209                                 <p>\r
210                                         The CSS selector should match the div element that is inserted by the Javascript code. \r
211                                 </p>\r
212                         </li>\r
213 \r
214                         <li>\r
215                                 <div class='defaultgreen'>\r
216                                         <div id='insertAfter2' class='test default'></div>\r
217                                 </div>\r
218 \r
219                                 <script type="text/javascript">\r
220                                 <!--\r
221 \r
222                                         var ib = document.getElementById('insertAfter2');\r
223                                         ib.parentNode.appendChild(document.createElement("div"));\r
224                                 \r
225                                 //-->\r
226                                 </script>\r
227                                 \r
228                                 <pre>div:last-of-type {\r
229 }\r
230 \r
231 &lt;div id='insertAfter'&gt;&lt;/div&gt;\r
232 \r
233 var ib = document.getElementById('insertAfter');\r
234 ib.parentElement.appendChild(document.createElement("div"));</pre>\r
235 \r
236                                 <p>\r
237                                         The original div element should not be a match for the :last-of-type selector.\r
238                                 </p>\r
239                         </li>\r
240                 </ol>\r
241         </body>\r
242 </html>\r