Chromium Code Reviews Chromium Code Reviews
Issue 2450093005:
Support display: contents for elements, first-line and first-letter pseudos. (Closed)
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
|
Manuel Rego
2016/11/17 13:29:24
I wouldn't use "resources/" folder for a test.
It'
| |
| 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/sh ow_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; marg in: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 { -moz-columns:2; 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 cl ass="b">1</span></div></div></div> | |
| 54 <div class="contents c2"><div class="row">2a<div class="cell">2<div class="conte nts 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 clas s="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 cl ass="b">1</span></div></div></div> | |
| 68 <div class="contents c2"><div class="row">2a<div class="cell">2<div class="conte nts 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 clas s="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="conten ts 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="conten ts 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="conten ts 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="conte nts 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:ab solute</div></span> | |
| 183 | |
| 184 <!-- Stuff below should simply ignore having display:contents --> | |
| 185 | |
| 186 <fieldset class="contents c1"><legend class="contents">Legend</legend>fieldset</ fieldset> | |
| 187 <button class="contents c1">but<span>ton</span></button> | |
| 188 <select class="contents c1"><option>select</select> | |
| 189 | |
| 190 </body> | |
| 191 </html> | |
| OLD | NEW |
