display-contents-style-inheritance-1-stylechange.html (2419B)
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, style changes</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; border:10px solid black; } 15 .test2 { display:contents; border-style:none; } 16 .test3:not(:lang(foo)) { display:contents; color:cyan; } 17 #t18:lang(foo) { display:contents; color:red; } 18 .green { color:green; } 19 .border { border-left:1px solid green; } 20 b { border:inherit; font-weight:normal; } 21 </style> 22 <script> 23 function runTest() { 24 var elms = document.querySelectorAll('.test') 25 for (i=0; i < elms.length; ++i) { 26 elms[i].classList.remove('test'); 27 elms[i].classList.add('test2'); 28 } 29 // FIXME(emilio): This basically does a full subtree restyle, and could hide 30 // bugs in the previous parts of the test. 31 document.body.lang = 'foo'; 32 document.body.offsetWidth; 33 34 document.documentElement.className = ''; 35 } 36 </script> 37 </head> 38 <body onload="setTimeout(runTest,0)"> 39 <span class="green"><div class="test">green</div></span> 40 <span class="green"><div class="test">green</div>x</span> 41 <span><div class="test green">green</div></span> 42 <span><div class="test green">green</div>x</span> 43 <br> 44 <span><div class="test border">no border</div></span> 45 <span><div class="test border"><span>no border</span></div></span> 46 <span class="border"><div class="test"><b>1px green left border</b></div></span> 47 <span class="border"><div class="test" style="border:inherit"><b>2px green left border</b></div></span> 48 <br> 49 50 <span class="green"><div class="test"><div class="test">green</div></div></span> 51 <span><div class="test green"><div class="test">green</div></div></span> 52 <br> 53 <span class="border"><div class="test"><div class="test"><b>1px green left border</b></div></div></span> 54 <span class="border"><div class="test"><div class="test" style="border:inherit"><b>1px green left border</b></div></div></span> 55 <span class="border"><div class="test" style="border:inherit"><div class="test" style="border:inherit"><b>2px green left border</b></div></div></span> 56 </body> 57 </html>