third_party/WebKit/LayoutTests/fast/css-generated-content/dynamic-apply-after-for-inline.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <style>
   5 ul {
   6   display:inline;
   7 }
   8 ul.closed * {
   9   display:none;
  10 }
  11 ul::before {
  12   content: 'before';
  13 }
  14 ul::after {
  15   content: 'after';
  16 }
  17 </style>
  18 <script>
  19 function toggle(ul) {
  20     if (ul.className !== 'closed') {
  21         ul.className = 'closed';
  22     } else {
  23         ul.className = '';
  24     }
  25     document.body.offsetLeft;
  26 }
  27
  28 function runTest() {
  29     var button = document.getElementById("toggle");
  30     var ul = document.querySelectorAll('ul')[0];
  31     toggle(ul);
  32     toggle(ul);
  33     toggle(ul);
  34     toggle(ul);
  35     toggle(ul);
  36     toggle(ul);
  37     toggle(ul);
  38     toggle(ul);
  39 }
  40 </script>
  41 </head>
  42 <body onload="runTest()">
  43 <!-- [bug 93170] http://bugs.webkit.org/show_bug.cgi?id=91370 -->
  44 <!-- Dynamically apply / not apply :after to inline elements. -->
  45 <!-- If test passes, only 1 'before' and 1 'after' are shown. -->
  46   <ul><li>1</li><li>2</li><li>3</li></ul>
  47 </body>
  48 </html>