display-contents-495385-2d.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<html lang="en-US">

<head>

<!-- Test that before/after generated content stops suppression correctly,

     both statically and dynamically -->

  <meta charset="UTF-8">

  <title>CSS Test: CSS display:contents; with ::after/::before</title>

  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">

  <link rel="help" href="http://dev.w3.org/csswg/css-display">

<style>

body > div { border:1px solid black; margin:1em;

             font-family:sans-serif; letter-spacing:2px; }

#d1:before { content:"Hello"; }

#d2:after { content:"Kitty"; }

#d3.c:before { content:"Hello"; }

#d4.c:after { content:"Kitty"; }

#d5.c:before { content:"Hello"; }

#d6.c:after { content:"Kitty"; }

#d7.c:after { content:"Kitty"; }

#d8.c:before { content:"Hello"; }

#d5,#d6 { overflow:hidden; }

#d1,#d2,#d3,#d4 { display:contents; }

x { display:table; }

y { display:table-outer; }

</style>

<script>

function loaded() {

  document.body.offsetHeight;

  document.getElementById("d3").setAttribute("class", "c");

  document.getElementById("d4").setAttribute("class", "c");

  document.getElementById("d5").setAttribute("class", "c");

  document.getElementById("d6").setAttribute("class", "c");

  document.getElementById("d7").setAttribute("class", "c");

  document.getElementById("d8").setAttribute("class", "c");

</script>

</head>

<body onload="loaded()">

  <div><div id="d1"> <span>Kitty</span></div></div>

  <div><div id="d2"><span>Hello</span> </div></div>

  <div><div id="d3"> <span>Kitty</span></div></div>

  <div><div id="d4"><span>Hello</span> </div></div>

  <div><div id="d5"> <span>Kitty</span></div></div>

  <div><div id="d6"><span>Hello</span> </div></div>

  <div><x id="d7"><span>Hello</span> </div></x>

  <div><x id="d8"> <span>Kitty</span> </div></x>

</body>

</html>