display-contents-shadow-dom-1.html (9112B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html class="reftest-wait" lang="en-US"> 7 <head> 8 <meta charset="utf-8"> 9 <title>CSS Test: CSS display:contents; in Shadow DOM</title> 10 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"> 11 <link rel="help" href="https://drafts.csswg.org/css-display/"> 12 <link rel="match" href="display-contents-shadow-dom-1-ref.html"> 13 <style> 14 html,body { 15 color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; 16 } 17 .before::before, ::slotted(.before)::before {content: "a ";} 18 .after::after, ::slotted(.after)::after {content: " c";} 19 div.before::before {content: "X ";} 20 div.after::after {content: " Y";} 21 .b, .c, ::slotted(.b), ::slotted(.c) { display:contents; } 22 </style> 23 </head> 24 <body> 25 <div id="host1" class="before"></div> 26 <span id="host2"></span> 27 <div id="host3" class="after"></div> 28 <div id="host4" class="before after"></div> 29 <div id="host5" class="after"></div> 30 <div id="host6" class="before"></div> 31 <div id="host7"></div> 32 <div id="host8" class="after"></div> 33 <div id="host9" class="before after"></div> 34 <div id="hostA" class="after"></div> 35 <div id="hostB"></div> 36 <div id="hostC"></div> 37 <div id="hostD"></div> 38 <div id="hostE"></div> 39 <div id="hostF" class="before"></div> 40 <div id="hostG"></div> 41 <span id="hostH"></span> 42 <div id="hostI"></div> 43 <div id="hostJ"></div> 44 <span id="hostK"></span> 45 <div id="hostL"></div> 46 <div id="hostM"><i slot=i>Two</i><b slot=b>One</b></div> 47 <div id="hostN"><i slot=i class="c">Two</i><b slot=b>One</b></div> 48 <div id="hostO"><i slot=i>Two</i><b slot=b class="c">One</b></div> 49 <div id="hostP"><i slot=i class="c">Two</i><b slot=b class="c">One</b></div> 50 <div id="hostQ" class="c" style="color:blue"><i slot=i class="c">Two</i><b slot=b class="c">One</b></div>Three 51 <div id="hostS" class="c"><span class="c">S</span></div> 52 <div id="hostT" class="c">T</div> 53 <div id="hostU"><span slot="c">U</span></div> 54 <div id="hostV" class="c" style="color:red"><b slot="b" class="c" style="color:inherit">V</b></div> 55 56 <script> 57 function shadow(id) { 58 return document.getElementById(id).attachShadow({mode:"open"}); 59 } 60 function span(s) { 61 var e = document.createElement("span"); 62 var t = document.createTextNode(s); 63 e.appendChild(t); 64 return e; 65 } 66 function text(s) { 67 return document.createTextNode(s); 68 } 69 function contents(n, slotName) { 70 var e = document.createElement("z"); 71 e.style.display = "contents"; 72 e.style.color = "blue"; 73 if (n) e.appendChild(n); 74 if (slotName) e.setAttribute("slot", slotName); 75 return e; 76 } 77 78 function run() { 79 document.body.offsetHeight; 80 81 shadow("host1").innerHTML = '<slot style="display:inline"></slot> c'; 82 shadow("host2").innerHTML = 'a <slot style="display:contents"></slot> c'; 83 shadow("host3").innerHTML = 'a <slot style="display:contents"></slot>'; 84 shadow("host4").innerHTML = '<slot style="display:contents"></slot>'; 85 shadow("host5").innerHTML = 'a <slot style="display:contents"></slot>'; 86 shadow("host6").innerHTML = '<z style="color:blue; display:contents"><slot style="display:inline"></slot></z> c'; 87 shadow("host7").innerHTML = 'a <slot style="display:contents"></slot> c'; 88 shadow("host8").innerHTML = 'a <z style="color:blue; display:contents"><slot style="display:contents"></z></slot>'; 89 shadow("host9").innerHTML = '<slot style="display:contents"></slot>'; 90 shadow("hostA").innerHTML = 'a <slot style="display:contents"></slot>'; 91 shadow("hostB").innerHTML = 'a <slot name="c" style="display:contents"></slot> <slot name="b" style="display:contents"></slot> B'; 92 shadow("hostC").innerHTML = 'A <slot name="c" style="display:contents"></slot> <slot name="b" style="display:contents"></slot> B'; 93 shadow("hostD").innerHTML = 'A <slot name="c" style="display:contents"></slot> <slot name="b" style="display:contents"></slot> B <slot name="b"></slot>'; 94 shadow("hostE").innerHTML = 'A <slot name="c" style="display:contents"></slot> <slot name="b" style="display:contents"></slot> B'; 95 shadow("hostF").innerHTML = '<slot name="c" style="display:contents"></slot> <slot name="b" style="display:contents"></slot> B'; 96 shadow("hostG").innerHTML = '<slot name="b" style="display:contents"></slot>'; 97 shadow("hostH").innerHTML = '<slot name="b" style="display:contents"></slot>'; 98 shadow("hostI").innerHTML = 'A<slot name="b" style="display:contents"></slot>'; 99 shadow("hostJ").innerHTML = 'A<slot name="b" style="display:contents"></slot>'; 100 shadow("hostK").innerHTML = '<slot name="b" style="display:contents"></slot>'; 101 shadow("hostL").innerHTML = '<slot name="b" style="display:contents"></slot>'; 102 shadow("hostM").innerHTML = '<slot name="b" style="display:contents"></slot><slot name="i" style="display:inline"></slot>'; 103 shadow("hostN").innerHTML = '<slot name="b" style="display:contents"></slot><slot name="i" style="display:inline"></slot>'; 104 shadow("hostO").innerHTML = '<slot name="b" style="display:contents"></slot><slot name="i" style="display:inline"></slot>'; 105 shadow("hostP").innerHTML = '<slot name="b" style="display:contents"></slot><slot name="i" style="display:inline"></slot>'; 106 shadow("hostQ").innerHTML = '<slot name="b" style="display:contents"></slot><slot name="i" style="display:inline"></slot>'; 107 } 108 109 function tweak() { 110 document.body.offsetHeight; 111 112 host1.appendChild(span("1")); 113 host2.appendChild(text("2")); 114 host3.appendChild(span("3")); 115 host4.appendChild(text("4")); 116 117 var e = span("5"); 118 e.style.display = "contents"; 119 host5.appendChild(e); 120 121 host6.appendChild(span("6")); 122 host7.appendChild(contents(text("7"))); 123 host8.appendChild(contents(span("8"))); 124 host9.appendChild(contents(text("9"))); 125 126 var e = contents(span("A")); 127 hostA.appendChild(e); 128 129 var e = contents(text("2"), "b"); 130 hostB.appendChild(e); 131 var e = contents(text("1"), "c"); 132 hostB.appendChild(e); 133 134 var e = contents(text("2"), "b"); 135 e.className = "after"; 136 hostC.appendChild(e); 137 var e = contents(text("1"), "c"); 138 e.className = "before"; 139 hostC.appendChild(e); 140 141 var e = contents(text("2"), "b"); 142 e.className = "before after"; 143 hostD.appendChild(e); 144 var e = contents(text(" 3"), "b"); 145 e.className = "before after"; 146 hostD.appendChild(e); 147 var e = contents(text("1"), "c"); 148 e.className = "before"; 149 hostD.appendChild(e); 150 151 var e = contents(contents(text("2")), "b"); 152 e.className = "before after"; 153 hostE.appendChild(e); 154 var e2 = contents(text("1"), "c"); 155 e2.className = "before after"; 156 hostE.insertBefore(e2, e); 157 158 var e = contents(text("2"), "b"); 159 e.className = "before after"; 160 hostF.appendChild(e); 161 var e2 = contents(text("1"), "c"); 162 e2.className = "before after"; 163 hostF.insertBefore(e2, e); 164 165 var e = contents(contents(text("1")), "b"); 166 hostG.appendChild(e); 167 var e = contents(text("2"), "b"); 168 e.className = "before after"; 169 hostG.appendChild(e); 170 171 var e = contents(contents(text("2")), "b"); 172 hostH.appendChild(e); 173 var e2 = contents(text("1"), "b"); 174 e2.className = "before after"; 175 hostH.insertBefore(e2, e); 176 177 var e = contents(text("b"), "b"); 178 hostI.appendChild(e); 179 var e = span("c"); 180 e.setAttribute("slot", "b"); 181 hostI.appendChild(e); 182 183 var e = contents(contents(text("b")), "b"); 184 hostJ.appendChild(e); 185 var e = span("c"); 186 e.setAttribute("slot", "b"); 187 hostJ.appendChild(e); 188 189 var inner = span("b"); 190 inner.className = "after"; 191 var e = contents(contents(inner), "b"); 192 hostK.appendChild(e); 193 var e = span("d"); 194 e.setAttribute("slot", "b"); 195 hostK.appendChild(e); 196 197 var inner = contents(null); 198 inner.className = "before"; 199 var e = contents(inner, "b"); 200 hostL.appendChild(e); 201 var e = span("b"); 202 e.setAttribute("slot", "b"); 203 hostL.appendChild(e); 204 205 document.body.offsetHeight; 206 setTimeout(function() { 207 shadow("hostS"); 208 shadow("hostT"); 209 shadow("hostU"); 210 shadow("hostV").innerHTML = '<z style="color:green"><slot name="b"></slot></z>'; 211 212 document.body.offsetHeight; 213 document.documentElement.removeAttribute("class"); 214 },0); 215 } 216 217 run(); 218 setTimeout(tweak, 0); 219 </script> 220 </body> 221 </html>