display-contents-style-inheritance-1-dom-mutations.html (3536B)
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" class="reftest-wait"> 7 <head> 8 <meta charset="utf-8"> 9 <title>CSS Test: CSS display:contents; style inheritance, DOM mutations</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 body,span { color:black; background-color:white; } 14 .test { display:contents; } 15 .green { color:green; } 16 .border { border-left:1px solid green; } 17 b { border:inherit; font-weight:normal; } 18 </style> 19 <script> 20 function $(id) { return document.getElementById(id); } 21 function text(s) { return document.createTextNode(s); } 22 function b(s) { var e = document.createElement('b'); e.appendChild(document.createTextNode(s)); return e; } 23 function div(s) { var e = document.createElement('div'); e.setAttribute('class','test'); e.appendChild(document.createTextNode(s)); return e; } 24 function runTest() { 25 document.body.offsetHeight; 26 27 var e = $('t1'); 28 var c = e.firstChild; 29 e.insertBefore(text('g'), c); 30 e.insertBefore(text('r'), c); 31 e.appendChild(text('n')); 32 33 var e = $('t1b'); 34 var c = e.firstChild; 35 e.insertBefore(text('g'), c); 36 e.insertBefore(text('r'), c); 37 e.appendChild(text('n')); 38 39 var e = $('t2'); 40 var c = e.firstChild; 41 e.insertBefore(text('gr'), c); 42 e.appendChild(text('n')); 43 44 var e = $('t2b'); 45 var c = e.firstChild; 46 e.insertBefore(text('gr'), c); 47 e.appendChild(text('n')); 48 49 var e = $('t3'); 50 var c = e.firstChild; 51 e.insertBefore(text('n'), c); 52 e.insertBefore(text('o'), c); 53 e.appendChild(text('er')); 54 55 var e = $('t4'); 56 var c = e.firstChild; 57 e.insertBefore(text('n'), c); 58 e.insertBefore(text('o'), c); 59 e.appendChild(text('er')); 60 61 var e = $('t5'); 62 var c = e.firstChild; 63 e.insertBefore(b('1px green left '), c); 64 e.appendChild(text('er')); 65 66 var e = $('t6'); 67 e.appendChild(b('2px green left border')); 68 69 var e = $('t7'); 70 e.appendChild(div('green')); 71 72 var e = $('t8'); 73 e.appendChild(div('green')); 74 75 var e = $('t9'); 76 var c = b("1px green left border"); 77 var d = div(''); 78 d.appendChild(c); 79 e.appendChild(d); 80 81 var e = $('t10'); 82 var c = b("1px green left border"); 83 var d = div(''); 84 d.setAttribute('style','border:inherit'); 85 d.appendChild(c); 86 e.appendChild(d); 87 88 var e = $('t11'); 89 var c = b("2px green left border"); 90 var d = div(''); 91 d.setAttribute('style','border:inherit'); 92 d.appendChild(c); 93 e.appendChild(d); 94 95 document.documentElement.className = ''; 96 } 97 </script> 98 </head> 99 <body onload="runTest()"> 100 101 <span class="green"><div class="test" id="t1">ee</div></span> 102 <span class="green"><div class="test" id="t1b">ee</div>x</span> 103 <span><div class="test green" id="t2">ee</div></span> 104 <span><div class="test green" id="t2b">ee</div>x</span> 105 <br> 106 <span><div class="test border" id="t3"> bord</div></span> 107 <span><div class="test border" id="t4"><span> bord</span></div></span> 108 <span class="border"><div class="test" id="t5">bord</div></span> 109 <span class="border"><div class="test" style="border:inherit" id="t6"></div></span> 110 <br> 111 112 <span class="green"><div class="test" id="t7"></div></span> 113 <span><div class="test green" id="t8"></div></span> 114 <br> 115 <span class="border"><div class="test" id="t9"></div></span> 116 <span class="border"><div class="test" id="t10"></div></span> 117 <span class="border"><div class="test" style="border:inherit" id="t11"></div></span> 118 </body> 119 </html>