LayoutTests/fast/css/first-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>:first-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 :first-of-type {\r
  19                                 background-color: #090;\r
  20                         }\r
  21 \r
  22                         .defaultgreen :first-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:first-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 class='test'></div>\r
  58                                         <div></div>\r
  59                                 </div>\r
  60                                 \r
  61                                 <pre>div:first-of-type {\r
  62 }\r
  63 \r
  64 &lt;div&gt;Does this element match?&lt;/div&gt;\r
  65 &lt;div&gt;&lt;/div&gt;</pre>\r
  66 \r
  67                                 <p>\r
  68                                         The CSS selector should match the marked div element, because it is the first element of this type\r
  69                                 </p>\r
  70                         </li>\r
  71                         \r
  72                         <li>\r
  73                                 <div class='defaultred'>\r
  74                                         <blockquote></blockquote>\r
  75                                         <div class='test required'></div>\r
  76                                 </div>\r
  77                                 \r
  78                                 <pre>div:first-of-type {\r
  79 }\r
  80 \r
  81 &lt;blockquote&gt;&lt;/blockquote&gt;\r
  82 &lt;div&gt;Does this element match?&lt;/div&gt;</pre>\r
  83 \r
  84                                 <p>\r
  85                                         The CSS selector should match the marked div element, because it is the first element of this type\r
  86                                 </p>\r
  87                         </li>\r
  88         \r
  89                         <li>\r
  90                                 <div class='defaultred'>\r
  91                                         <div></div>\r
  92                                         <blockquote>\r
  93                                                 <div class='test'></div>\r
  94                                         </blockquote>\r
  95                                 </div>\r
  96                                 \r
  97                                 <pre>div:first-of-type {\r
  98 }\r
  99 \r
 100 &lt;div&gt;&lt;/div&gt;\r
 101 &lt;blockquote&gt;\r
 102    &lt;div&gt;Does this element match?&lt;/div&gt;\r
 103 &lt;/blockquote&gt;</pre>\r
 104 \r
 105                                 <p>\r
 106                                         The CSS selector should match the marked div element, because it is the first 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:first-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 first 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                                         <blockquote>\r
 132                                                 <div></div>\r
 133                                         </blockquote>\r
 134                                         <div class='test'></div>\r
 135                                 </div>\r
 136                                 \r
 137                                 <pre>div:first-of-type {\r
 138 }\r
 139 \r
 140 &lt;blockquote&gt;\r
 141    &lt;div&gt;&lt;/div&gt;\r
 142 &lt;/blockquote&gt;\r
 143 &lt;div&gt;Does this element match?&lt;/div&gt;</pre>\r
 144 \r
 145                                 <p>\r
 146                                         The CSS selector should match the marked div element, because it is the first 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></div>\r
 153                                         <div class='test default required'></div>\r
 154                                 </div>\r
 155                                 \r
 156                                 <pre>div:first-of-type {\r
 157 }\r
 158 \r
 159 &lt;div&gt;&lt;/div&gt;\r
 160 &lt;div&gt;Does this element match?&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 second element of this type\r
 164                                 </p>\r
 165                         </li>\r
 166                         \r
 167                         <li>\r
 168                                 <div class='defaultgreen'>\r
 169                                         <DIV></DIV>\r
 170                                         <div class='test default'></div>\r
 171                                 </div>\r
 172                                 \r
 173                                 <pre>div:first-of-type {\r
 174 }\r
 175 \r
 176 &lt;DIV&gt;&lt;/DIV&gt;\r
 177 &lt;div&gt;Does this element match?&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 second element of this type\r
 181                                 </p>\r
 182                         </li>\r
 183 \r
 184                         <li>\r
 185                                 <div class='defaultred'>\r
 186                                         <div id='insertBefore1'></div>\r
 187                                 </div>\r
 188 \r
 189                                 <script type="text/javascript">\r
 190                                 <!--\r
 191 \r
 192                                         var ib = document.getElementById('insertBefore1');\r
 193                                         var el = document.createElement("div");\r
 194                                         el.className = 'test';\r
 195                                         ib.parentNode.insertBefore(el, ib);\r
 196 \r
 197                                 \r
 198                                 //-->\r
 199                                 </script>\r
 200                                 \r
 201                                 <pre>div:first-of-type {\r
 202 }\r
 203 \r
 204 &lt;div id='insertBefore'&gt;&lt;/div&gt;\r
 205 \r
 206 var ib = document.getElementById('insertBefore');\r
 207 ib.parentElement.insertBefore(document.createElement("div"), ib);</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='insertBefore2' 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('insertBefore2');\r
 223                                         ib.parentNode.insertBefore(document.createElement("div"), ib);\r
 224                                 \r
 225                                 //-->\r
 226                                 </script>\r
 227                                 \r
 228                                 <pre>div:first-of-type {\r
 229 }\r
 230 \r
 231 &lt;div id='insertBefore'&gt;&lt;/div&gt;\r
 232 \r
 233 var ib = document.getElementById('insertBefore');\r
 234 ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>\r
 235 \r
 236                                 <p>\r
 237                                         The original div element should not be a match for the :first-of-type selector.\r
 238                                 </p>\r
 239                         </li>\r
 240                 </ol>   \r
 241         </body>\r
 242 </html>\r