display-contents-acid.html (8193B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html lang="en-US"> 7 <head> 8 <meta charset="UTF-8"> 9 <title>CSS Test: CSS display:contents</title> 10 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"> 11 <link rel="help" href="http://dev.w3.org/csswg/css-display"> 12 <style type="text/css"> 13 14 html,body { 15 color:black; background-color:white; font-size:16px; padding:0; margin:0; 16 } 17 18 .table { display:table; border-collapse:collapse; border: blue solid 1pt;} 19 .itable { display:inline-table; } 20 .caption { display:table-caption; } 21 .cell { display:table-cell; border:inherit; } 22 .row { display:table-row; border: green dashed 1pt; } 23 .rowg { display:table-row-group; } 24 .head { display:table-header-group; } 25 .foot { display:table-footer-group; } 26 .col { display:table-column; } 27 .colg { display:table-column-group; } 28 .flex { display:flex; } 29 .iflex { display:inline-flex; } 30 .li { display:list-item; } 31 .ib { display:inline-block; } 32 .inline { display:inline; } 33 .columns { columns:2; height:4em; } 34 35 .contents { display:contents; align-items:inherit; justify-items:inherit; } 36 37 .c1 { color:lime; } 38 .c2 { background:blue; color:pink; } 39 .c3 { color:teal; } 40 .c4 { color:green; } 41 .c5 { color:silver; } 42 .c6 { color:cyan; } 43 .c7 { color:magenta; } 44 .c8 { color:yellow; } 45 .c9 { color:grey; } 46 .c10{ color:black; } 47 48 .b { background:inherit; } 49 </style> 50 </head> 51 <body style="color:red"> 52 53 <div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div> 54 <div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> 55 <div class="contents c3"><div class="cell">3</div></div> 56 <div class="contents c4"><div class="rowg">4</div></div> 57 <div class="contents c5"><div class="cell">5a</div></div> 58 <div class="cell c5">5b</div> 59 <div class="contents c6"><div class="head">6</div></div> 60 <div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div> 61 <div class="contents c8"><div class="cell">7b</div></div> 62 <div class="contents c9"><div class="foot">8</div></div> 63 <div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> 64 <div class="contents c10"><div class="cell">10</div></div> 65 66 <div class="table" style="float:right"> 67 <div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div> 68 <div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> 69 <div class="contents c3"><div class="cell">3</div></div> 70 <div class="contents c4"><div class="rowg">4</div></div> 71 <div class="contents c5"><div class="cell">5a</div></div> 72 <div class="cell c5">5b</div> 73 <div class="contents c6"><div class="head">6</div></div> 74 <div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div> 75 <div class="contents c8"><div class="cell">7b</div></div> 76 <div class="contents c9"><div class="foot">8</div></div> 77 <div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> 78 <div class="contents c10"><div class="cell">10</div></div> 79 </div> 80 81 <div class="flex c1"> 82 0 83 <div class="contents c1">x</div> 84 <div class="contents c1"><div class="contents c2">y</div></div> 85 <div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div> 86 <div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> 87 <div class="contents c3"><div class="inline">3</div></div> 88 <div class="inline"><div class="contents c4">4</div></div> 89 <div class=""><div class="contents c5">5a</div></div> 90 <div class=" c5">5b</div> 91 <div class="contents c6"><div class="">6</div></div> 92 <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> 93 <div class="contents c9"><div class="">8</div></div> 94 <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> 95 <div class="contents c10"><div class="">10</div></div> 96 </div> 97 98 <div class="flex"><div class="contents c2"> 99 0 100 <div class="contents c1">x</div> 101 <div class="contents c1"><div class="contents c2">y</div></div> 102 <div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div> 103 <div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> 104 <div class="contents c3"><div class="inline">3</div></div> 105 <div class=""><div class="contents c4">4</div></div> 106 <div class=""><div class="contents c5">5a</div></div> 107 <div class=" c5">5b</div> 108 <div class="contents c6"><div class="">6</div></div> 109 <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> 110 <div class="contents c9"><div class="">8</div></div> 111 <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> 112 <div class="contents c10"><div class="">10</div></div> 113 </div></div> 114 115 <div class="iflex"><div class="contents c2"> 116 0 117 </div></div> 118 <div class="iflex"><div class="contents c2"> 119 0 120 <div class="contents c1">1</div> 121 2 122 </div></div> 123 <div class="iflex"><div class="contents c2"> 124 0 125 <div class="c1">1</div> 126 2 127 </div></div> 128 <div class="iflex c3"> 129 0 130 <div class="contents c2"><div class="c1">1</div></div> 131 2 132 </div> 133 <div class="iflex c3"> 134 <div class="contents c2">0</div> 135 <div class="contents c2"><div class="c1">1</div></div> 136 <div class="contents c2">2</div> 137 </div> 138 <div class="iflex c3"> 139 <div class="inline">0</div> 140 <div class="contents"><div class="inline c1">1</div></div> 141 <div class="inline">2</div> 142 </div> 143 144 <ul><li class="c1"><div class="contents c2"> 145 0 146 <div class="contents c1">x</div> 147 <div class="contents c1"><div class="contents c2">y</div></div> 148 <div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div> 149 <div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div> 150 <div class="contents c3"><div class="inline">3</div></div> 151 <div class="inline"><div class="contents c4">4</div></div> 152 <div class=""><div class="contents c5">5a</div></div> 153 <div class=" c5">5b</div> 154 <div class="contents c6"><div class="">6</div></div> 155 <div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div> 156 <div class="contents c9"><div class="">8</div></div> 157 <div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div> 158 <div class="contents c10"><div class="">10</div></div> 159 </div></li> 160 </ul> 161 162 <div class="columns"> 163 <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> 164 <div class="contents c2"><div>2</div></div> 165 <div class="contents c3"><div>3</div></div> 166 </div> 167 168 <div class="columns"> 169 <div class="columns contents"> 170 <div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div> 171 <div class="contents c2"><div>2</div></div> 172 <div class="contents c3"><div>3</div></div> 173 </div> 174 </div> 175 176 <div class="contents c3"><!-- comment node --></div> 177 <div class="contents c3"><?PI ?></div> 178 179 <span class="c2"><legend class="contents c1">Legend</legend><legend class="contents c1">Legend</legend></span> 180 <br clear="all"> 181 <span class="c3">x<div class="contents c1" style="float:left">float:left</div></span> 182 <span class="c3">y<div class="contents c1" style="position:absolute">position:absolute</div></span> 183 184 <fieldset class="contents c1"><legend class="contents">Legend</legend>fieldset</fieldset> 185 <button class="contents c1" style="font: inherit;">but<span>ton</span></button> 186 187 <!-- Stuff below should simply behave as having display: none --> 188 189 <select class="contents c1"><option>select</select> 190 191 </body> 192 </html>