layout/style/test/test_bug98997.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=98997
   5 -->
   6 <head>
   7   <title>Test for Bug 98997</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   /*
  14    * This test does NOT test any of the cases where :empty and
  15    * :-moz-only-whitespace differ.  We should probably have some tests
  16    * for that as well.
  17    */
  18   div.test { width: 200px; height: 30px; margin: 5px 0; }
  19   div.test.to, div.test.from:empty { background: orange; }
  20   div.test.to:empty, div.test.from { background: green; }
  21   div.test.to, div.test.from:-moz-only-whitespace { color: maroon; }
  22   div.test.to:-moz-only-whitespace, div.test.from { color: navy; }
  23
  24   </style>
  25 </head>
  26 <body>
  27 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=98997">Mozilla Bug 98997</a>
  28 <div id="display">
  29 <div class="test to" onclick="testReplaceChild(this, '')">x</div>
  30 <div class="test to" onclick="testReplaceChild(this, '')"><span>x</span></div>
  31 <div class="test to" onclick="testReplaceChild(this, '')">x<!-- comment --></div>
  32 <div class="test to" onclick="testRemoveChild(this)">x</div>
  33 <div class="test to" onclick="testRemoveChild(this)"><span>x</span></div>
  34 <div class="test to" onclick="testRemoveChild(this)">x<!-- comment --></div>
  35 <div class="test to" onclick="testChangeData(this, '')">x</div>
  36 <div class="test to" onclick="testChangeData(this, '')">x<!-- comment --></div>
  37 <div class="test to" onclick="testDeleteData(this)">x</div>
  38 <div class="test to" onclick="testDeleteData(this)">x<!-- comment --></div>
  39 <div class="test to" onclick="testReplaceData(this, '')">x</div>
  40 <div class="test to" onclick="testReplaceData(this, '')">x<!-- comment --></div>
  41
  42 <div class="test from makeemptytext" onclick="testReplaceChild(this, 'x')"></div>
  43 <div class="test from makeemptytext" onclick="testReplaceChild(this, 'x')"><!-- comment --></div>
  44 <div class="test from" onclick="testReplaceChild(this, 'x')"><!-- comment --></div>
  45 <div class="test from" onclick="testInsertBefore(this, 'x')"></div>
  46 <div class="test from" onclick="testInsertBefore(this, 'x')"><!-- comment --></div>
  47 <div class="test from" onclick="testAppendChild(this, 'x')"></div>
  48 <div class="test from" onclick="testAppendChild(this, 'x')"><!-- comment --></div>
  49 <div class="test from makeemptytext" onclick="testChangeData(this, 'x')"></div>
  50 <div class="test from makeemptytext" onclick="testChangeData(this, 'x')"><!-- comment --></div>
  51 <div class="test from makeemptytext" onclick="testAppendData(this, 'x')"></div>
  52 <div class="test from makeemptytext" onclick="testAppendData(this, 'x')"><!-- comment --></div>
  53 <div class="test from makeemptytext" onclick="testReplaceData(this, 'x')"></div>
  54 <div class="test from makeemptytext" onclick="testReplaceData(this, 'x')"><!-- comment --></div>
  55 </div>
  56
  57 <div id="content" style="display: none">
  58
  59 </div>
  60 <pre id="test">
  61 <script class="testbody" type="text/javascript">
  62
  63 /** Test for Bug 98997 **/
  64
  65 function testInsertBefore(elt, text) {
  66   elt.insertBefore(document.createTextNode(text), elt.firstChild);
  67 }
  68
  69 function testAppendChild(elt, text) {
  70   elt.appendChild(document.createTextNode(text));
  71 }
  72
  73 function testReplaceChild(elt, text) {
  74   elt.replaceChild(document.createTextNode(text), elt.firstChild);
  75 }
  76
  77 function testRemoveChild(elt) {
  78   elt.removeChild(elt.firstChild);
  79 }
  80
  81 function testChangeData(elt, text) {
  82   elt.firstChild.data = text;
  83 }
  84
  85 function testAppendData(elt, text) {
  86   elt.firstChild.appendData(text);
  87 }
  88
  89 function testDeleteData(elt) {
  90   elt.firstChild.deleteData(0, elt.firstChild.length);
  91 }
  92
  93 function testReplaceData(elt, text) {
  94   elt.firstChild.replaceData(0, elt.firstChild.length, text);
  95 }
  96
  97 var cnodes = document.getElementById("display").childNodes;
  98 var divs = [];
  99 var i;
 100 for (i = 0; i < cnodes.length; ++i) {
 101   if (cnodes[i].nodeName == "DIV")
 102     divs.push(cnodes[i]);
 103 }
 104
 105 for (i in divs) {
 106   var div = divs[i];
 107   if (div.className.match(/makeemptytext/))
 108     div.insertBefore(document.createTextNode(""), div.firstChild);
 109 }
 110
 111 const ORANGE = "rgb(255, 165, 0)";
 112 const MAROON = "rgb(128, 0, 0)";
 113 const GREEN = "rgb(0, 128, 0)";
 114 const NAVY = "rgb(0, 0, 128)";
 115
 116 function color(div) {
 117   return getComputedStyle(div, "").color;
 118 }
 119 function bg(div) {
 120   return getComputedStyle(div, "").backgroundColor;
 121 }
 122
 123 for (i in divs) {
 124   var div = divs[i];
 125   is(bg(div), ORANGE, "should be orange");
 126   is(color(div), MAROON, "should be maroon");
 127 }
 128
 129 for (i in divs) {
 130   var div = divs[i];
 131   var e = document.createEvent("MouseEvents");
 132   e.initEvent("click", true, true);
 133   div.dispatchEvent(e);
 134 }
 135
 136 for (i in divs) {
 137   var div = divs[i];
 138   is(bg(div), GREEN, "should be green");
 139   is(color(div), NAVY, "should be navy");
 140 }
 141
 142 </script>
 143 </pre>
 144 </body>
 145 </html>