display-contents-495385-2d.html (1932B)
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 <!-- Test that before/after generated content stops suppression correctly, 9 both statically and dynamically --> 10 <meta charset="UTF-8"> 11 <title>CSS Test: CSS display:contents; with ::after/::before</title> 12 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"> 13 <link rel="help" href="http://dev.w3.org/csswg/css-display"> 14 <style> 15 body > div { border:1px solid black; margin:1em; 16 font-family:sans-serif; letter-spacing:2px; } 17 #d1:before { content:"Hello"; } 18 #d2:after { content:"Kitty"; } 19 #d3.c:before { content:"Hello"; } 20 #d4.c:after { content:"Kitty"; } 21 #d5.c:before { content:"Hello"; } 22 #d6.c:after { content:"Kitty"; } 23 #d7.c:after { content:"Kitty"; } 24 #d8.c:before { content:"Hello"; } 25 #d5,#d6 { overflow:hidden; } 26 #d1,#d2,#d3,#d4 { display:contents; } 27 x { display:table; } 28 y { display:table-outer; } 29 </style> 30 <script> 31 function loaded() { 32 document.body.offsetHeight; 33 document.getElementById("d3").setAttribute("class", "c"); 34 document.getElementById("d4").setAttribute("class", "c"); 35 document.getElementById("d5").setAttribute("class", "c"); 36 document.getElementById("d6").setAttribute("class", "c"); 37 document.getElementById("d7").setAttribute("class", "c"); 38 document.getElementById("d8").setAttribute("class", "c"); 39 } 40 </script> 41 </head> 42 <body onload="loaded()"> 43 <div><div id="d1"> <span>Kitty</span></div></div> 44 <div><div id="d2"><span>Hello</span> </div></div> 45 <div><div id="d3"> <span>Kitty</span></div></div> 46 <div><div id="d4"><span>Hello</span> </div></div> 47 <div><div id="d5"> <span>Kitty</span></div></div> 48 <div><div id="d6"><span>Hello</span> </div></div> 49 <div><x id="d7"><span>Hello</span> </div></x> 50 <div><x id="d8"> <span>Kitty</span> </div></x> 51 </body> 52 </html>