third_party/WebKit/LayoutTests/fast/css/counters/complex-before.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html><head>
   3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   4     <link rel="reference" href="http://test.csswg.org/suites/css2.1/20101210/html4/before-after-display-types-001-ref.xht">
   5     <title>CSS Test: generated content complex content for :before
   6     pseudo-element.</title>
   7     <link rel="author" title="Carol Szabo" href="mailto:carol.szabo@nokia.com">
   8     <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org">
   9     <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
  10     <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
  11     <meta name="flags" content="">
  12 <style type="text/css">
  13     #test { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"}
  14
  15     #test:before {
  16         content:counter(ctr) url(support/square-outline-32x32.png) open-quote "Before-" attr(class);
  17         counter-increment:ctr;
  18     }
  19     #test:after {
  20         content:counter(ctr) url(support/square-outline-32x32.png) "After-" attr(class) close-quote;
  21         counter-increment:ctr;
  22     }
  23     .table:before, .table:after { display:table; }
  24     div { border:1px solid green; margin:5px; }
  25 </style>
  26 <script type="text/javascript">
  27     if (window.testRunner) {
  28         testRunner.dumpAsText();
  29         testRunner.waitUntilDone();
  30     }
  31
  32     function log(text) {
  33         console = document.getElementById("console");
  34         console.innerText = console.innerText + text + "\n";
  35     }
  36
  37     function compareProperty(testStyle, referenceStyle, propertyName) {
  38         testValue = testStyle.getPropertyValue(propertyName);
  39         referenceValue = referenceStyle.getPropertyValue(propertyName);
  40         if (testValue == referenceValue)
  41             log(propertyName + ": PASSED");
  42         else
  43             log(propertyName + ": FAILED: testValue=" + testValue +"; expected " + referenceValue);
  44     }
  45
  46     function run() {
  47         if (window.testRunner)
  48             document.getElementById("onlyInBrowser").setAttribute("style", "display: none;");
  49         testStyle = window.getComputedStyle(document.getElementById("testContainer"), null);
  50         referenceStyle = window.getComputedStyle(document.getElementById("reference"), null);
  51         compareProperty(testStyle, referenceStyle, "width")
  52         compareProperty(testStyle, referenceStyle, "height")
  53        if (window.testRunner)
  54             testRunner.notifyDone();
  55     }
  56 </script>
  57 </head><body onload="setTimeout('run()', 0);">
  58     <p id="onlyInBrowser">The texts between the markers should be identical.</p>
  59     <p>========Marker1========</p>
  60     <table>
  61         <tr>
  62             <td id="testContainer"><div id="test" class="table">Inner</div></td>
  63             <td>1 1 1 1</td>
  64         </tr>
  65     </table>
  66     <p>========Marker2========</p>
  67     <table>
  68         <tr>
  69             <td id="reference"><div><span style="display: table;">1<img
  70             src="support/square-outline-32x32.png"/>"Before-table</span>Inner<span
  71             style="display: table">2<img
  72             src="support/square-outline-32x32.png"/>After-table"</span></div></td>
  73             <td>1 1 1 1</td>
  74         </tr>
  75     </table>
  76     <p>========Marker3========</p>
  77     <pre id="console"/>
  78 </td><td valign="top">
  79 </body></html>