<!DOCTYPE html> <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=338679 --> <head> <title>Bug 338679: correct reporting of newValue/prevValue in DOMAttrModified events</title> <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> </head> <body> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=338679">Bug 338679: correct reporting of newValue/prevValue in DOMAttrModified events</a> <div id="test" style="width:20em"></div> <script> var testDiv = document.getElementById("test"); var e_new, e_prev = testDiv.getAttribute("style"); var phase, recursive = false; /* driver */ var tests = [ test_1, test_2, test_3 ]; var i = 0; function nextTest() { if (i < tests.length) { phase = tests[i]; i++; phase(); } else { SimpleTest.finish(); } } SimpleTest.waitForExplicitFinish(); testDiv.addEventListener("DOMAttrModified", attr_modified, false); nextTest(); /* event handler */ function attr_modified(ev) { is(ev.newValue, e_new, phase.name + (recursive ? " recursive" : "") + ": newValue"); is(ev.prevValue, e_prev, phase.name + (recursive ? " recursive" : "") + ": prevValue"); e_prev = e_new; if (!recursive) { recursive = true; e_new = "width: 0px;"; testDiv.style.width = "0"; } else { recursive = false; setTimeout(nextTest, 0); } } /* tests */ function test_1() { e_new = "width: auto;"; testDiv.style.width = "auto"; } function test_2() { e_new = "width: 15%;"; testDiv.style.width = "15%"; } function test_3() { window.getComputedStyle(testDiv, null).width; // force style resolution e_new = "width: inherit;"; testDiv.style.width = "inherit"; } </script> </body> </html>