dom/base/test/test_bug338679.html

   1 <!DOCTYPE html>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=338679
   5 -->
   6 <head>
   7 <title>Bug 338679: correct reporting of newValue/prevValue in
   8        DOMAttrModified events</title>
   9 <script src="/tests/SimpleTest/SimpleTest.js"></script>
  10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  11 </head>
  12 <body>
  13 <a target="_blank"
  14    href="https://bugzilla.mozilla.org/show_bug.cgi?id=338679">Bug
  15    338679: correct reporting of newValue/prevValue in
  16    DOMAttrModified events</a>
  17
  18 <div id="test" style="width:20em"></div>
  19
  20 <script>
  21 var testDiv = document.getElementById("test");
  22 var e_new, e_prev = testDiv.getAttribute("style");
  23 var phase, recursive = false;
  24
  25 /* driver */
  26 var tests = [ test_1, test_2, test_3 ];
  27 var i = 0;
  28 function nextTest() {
  29   if (i < tests.length) {
  30     phase = tests[i];
  31     i++;
  32     phase();
  33   } else {
  34     SimpleTest.finish();
  35   }
  36 }
  37
  38 if (SpecialPowers.getBoolPref("dom.mutation-events.cssom.disabled")) {
  39   ok(true, "DOMAttrModified event from CSSOM change is disabled");
  40 } else {
  41   SimpleTest.waitForExplicitFinish();
  42   testDiv.addEventListener("DOMAttrModified", attr_modified);
  43   nextTest();
  44 }
  45
  46 /* event handler */
  47 function attr_modified(ev) {
  48   is(ev.newValue, e_new,
  49      phase.name + (recursive ? " recursive" : "") + ": newValue");
  50   is(ev.prevValue, e_prev,
  51      phase.name + (recursive ? " recursive" : "") + ": prevValue");
  52
  53   e_prev = e_new;
  54   if (!recursive) {
  55     recursive = true;
  56     e_new = "width: 0px;";
  57     testDiv.style.width = "0";
  58   } else {
  59     recursive = false;
  60     setTimeout(nextTest, 0);
  61   }
  62 }
  63
  64 /* tests */
  65 function test_1() {
  66   e_new = "width: auto;";
  67   testDiv.style.width = "auto";
  68 }
  69
  70 function test_2() {
  71   e_new = "width: 15%;";
  72   testDiv.style.width = "15%";
  73 }
  74
  75 function test_3() {
  76   window.getComputedStyle(testDiv).width; // force style resolution
  77   e_new = "width: inherit;";
  78   testDiv.style.width = "inherit";
  79 }
  80 </script>
  81 </body>
  82 </html>