MutationObserver-style.html (1471B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Observer notifications when updating styles</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty"> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <body> 8 <script> 9 "use strict"; 10 11 promise_test(async () => { 12 let called = 0; 13 const el = document.createElement("div"); 14 document.body.appendChild(el); 15 const m = new MutationObserver(() => { 16 called++; 17 }); 18 m.observe(el, { attributes: true }); 19 el.style.height = "100px"; 20 await Promise.resolve(); 21 assert_equals(called, 1, "times callback called"); 22 el.style.height = "100px"; 23 await Promise.resolve(); 24 assert_equals(called, 1, "times callback called"); 25 }, "Updating style property with the same value does not trigger an observation callback"); 26 27 promise_test(async () => { 28 let called = 0; 29 const el = document.createElement("div"); 30 document.body.appendChild(el); 31 const m = new MutationObserver(() => { 32 called++; 33 }); 34 m.observe(el, { attributes: true }); 35 el.style.cssText = "height:100px"; 36 await Promise.resolve(); 37 assert_equals(called, 1, "times callback called"); 38 el.style.cssText = "height:100px"; 39 await Promise.resolve(); 40 assert_equals(called, 2, "times callback called"); 41 }, "Updating cssText triggers an observation callback even if the value is the same"); 42 </script>