layout/style/test/test_default_computed_style.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=800983
   5 -->
   6 <head>
   7   <meta charset="utf-8">
   8   <title>Test for Bug 800983</title>
   9   <script src="/tests/SimpleTest/SimpleTest.js"></script>
  10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  11   <style>
  12     #display::before { content: "Visible"; display: block }
  13     #display {
  14       display: inline;
  15       margin-top: 0;
  16       background: yellow;
  17       color: blue;
  18     }
  19   </style>
  20 </head>
  21 <body>
  22 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=800983">Mozilla Bug 800983</a>
  23 <p id="display"></p>
  24 <div id="content" style="display: none">
  25
  26 </div>
  27 <pre id="test">
  28 <script type="application/javascript">
  29
  30 /** Test for Bug 800983 **/
  31 var cs = getComputedStyle($("display"));
  32 var cs_pseudo = getComputedStyle($("display"), "::before")
  33
  34 var cs_default = getDefaultComputedStyle($("display"));
  35 var cs_default_pseudo = getDefaultComputedStyle($("display"), "::before");
  36
  37 // Sanity checks for normal computed style
  38 is(cs.display, "inline", "We have inline display");
  39 is(cs.marginTop, "0px", "We have 0 margin");
  40 is(cs.backgroundColor, "rgb(255, 255, 0)", "We have yellow background");
  41 is(cs.color, "rgb(0, 0, 255)", "We have blue text");
  42 is(cs_pseudo.content, '"Visible"', "We have some content");
  43 is(cs_pseudo.display, "block", "Our ::before is block");
  44
  45 // And now our actual tests
  46 is(cs_default.display, "block", "We have block display by default");
  47 is(cs_default.marginTop, "16px", "We have 16px margin by default");
  48 is(cs_default.backgroundColor, "rgba(0, 0, 0, 0)",
  49    "We have transparent background by default");
  50 is(cs_default.color, "rgb(0, 0, 0)", "We have black text by default");
  51 is(cs_default_pseudo.content, "none", "We have no content by default");
  52 is(cs_default_pseudo.display, "inline", "Our ::before is inline by default");
  53
  54
  55 </script>
  56 </pre>
  57 </body>
  58 </html>