layout/style/test/test_bug229915.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=229915
   5 -->
   6 <head>
   7   <title>Test for Bug 229915</title>
   8   <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
   9   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  11   <style type="text/css">
  12
  13   p { color: black; background: transparent; }
  14   p.prev + p { color: green; }
  15   p.prev ~ p { background: white; }
  16
  17   </style>
  18 </head>
  19 <body>
  20 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=229915">Mozilla Bug 229915</a>
  21 <div id="display">
  22
  23 <div>
  24   <p id="toinsertbefore">After testing, this should turn green.</p>
  25 </div>
  26
  27 <div>
  28   <p id="toreplace">To be replaced.</p>
  29   <p id="replacecolor">After testing, this should turn green.</p>
  30 </div>
  31
  32 <div>
  33   <p class="prev">Previous paragraph.</p>
  34   <p id="toremove">To be removed.</p>
  35   <p id="removecolor">After testing, this should turn green.</p>
  36 </div>
  37
  38 </div>
  39 <div id="content" style="display: none">
  40
  41 </div>
  42 <pre id="test">
  43 <script class="testbody" type="text/javascript">
  44
  45 /** Test for Bug 229915 **/
  46
  47 const GREEN = "rgb(0, 128, 0)";
  48 const BLACK = "rgb(0, 0, 0)";
  49 const TRANSPARENT = "transparent";
  50 const WHITE = "rgb(255, 255, 255)";
  51
  52 function make_prev() {
  53   var result = document.createElement("p");
  54   result.setAttribute("class", "prev");
  55   var t = document.createTextNode("Dynamically created previous paragraph.");
  56   result.appendChild(t);
  57   return result;
  58 }
  59
  60 function color(id) {
  61   return getComputedStyle(document.getElementById(id), "").color;
  62 }
  63 function bg(id) {
  64   return getComputedStyle(document.getElementById(id), "").backgroundColor;
  65 }
  66
  67 var node;
  68
  69 // test insert
  70 is(color("toinsertbefore"), BLACK, "initial state (insertion test)");
  71 is(bg("toinsertbefore"), TRANSPARENT, "initial state (insertion test)");
  72 node = document.getElementById("toinsertbefore");
  73 node.parentNode.insertBefore(make_prev(), node);
  74 is(color("toinsertbefore"), GREEN, "inserting should turn node green");
  75 is(bg("toinsertbefore"), WHITE, "inserting should turn background white");
  76
  77 // test replace
  78 is(color("replacecolor"), BLACK, "initial state (replacement test)");
  79 is(bg("replacecolor"), TRANSPARENT, "initial state (replacement test)");
  80 node = document.getElementById("toreplace");
  81 node.parentNode.replaceChild(make_prev(), node);
  82 is(color("replacecolor"), GREEN, "replacing should turn node green");
  83 is(bg("replacecolor"), WHITE, "replacing should turn background white");
  84
  85 // test remove
  86 is(color("removecolor"), BLACK, "initial state (removal test)");
  87 is(bg("removecolor"), WHITE, "initial state (removal test; no change)");
  88 node = document.getElementById("toremove");
  89 node.parentNode.removeChild(node);
  90 is(color("removecolor"), GREEN, "removing should turn node green");
  91 is(bg("removecolor"), WHITE, "removing should leave background");
  92
  93 </script>
  94 </pre>
  95 </body>
  96 </html>