Animation.html (2762B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Custom Elements: CEReactions on Element interface</title> 5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> 6 <meta name="assert" content="commitStyles of Animation interface must have CEReactions"> 7 <meta name="help" content="https://dom.spec.whatwg.org/#element"> 8 <meta name="help" content="https://w3c.github.io/DOM-Parsing/"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="../resources/custom-elements-helpers.js"></script> 12 <script src="./resources/reactions.js"></script> 13 </head> 14 <body> 15 <div id="log"></div> 16 <script> 17 18 test(function () { 19 const element = define_new_custom_element(['style']); 20 const instance = document.createElement(element.name); 21 document.body.appendChild(instance); 22 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 23 24 const animation = instance.animate([{'borderColor': 'rgb(0, 0, 255)'}], 1); 25 animation.commitStyles(); 26 27 const logEntries = element.takeLog(); 28 assert_array_equals(logEntries.types(), ['attributeChanged']); 29 assert_equals(logEntries.last().name, 'style'); 30 assert_equals(logEntries.last().namespace, null); 31 }, 'Animation.animate must enqueue an attributeChanged reaction when it adds the observed style attribute'); 32 33 test(function () { 34 const element = define_new_custom_element(['style']); 35 const instance = document.createElement(element.name); 36 document.body.appendChild(instance); 37 38 let animation = instance.animate([{'borderColor': 'rgb(0, 0, 255)'}], 1); 39 animation.commitStyles(); 40 41 assert_array_equals(element.takeLog().types(), ['constructed', 'connected', 'attributeChanged']); 42 43 animation = instance.animate([{'borderColor': 'rgb(0, 255, 0)'}]); 44 animation.commitStyles(); 45 46 const logEntries = element.takeLog(); 47 assert_array_equals(logEntries.types(), ['attributeChanged']); 48 assert_equals(logEntries.last().name, 'style'); 49 assert_equals(logEntries.last().namespace, null); 50 }, 'Animation.animate must enqueue an attributeChanged reaction when it mutates the observed style attribute'); 51 52 test(function () { 53 const element = define_new_custom_element([]); 54 const instance = document.createElement(element.name); 55 document.body.appendChild(instance); 56 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 57 58 const animation = instance.animate([{'borderColor': 'rgb(0, 0, 255)'}], 1); 59 animation.commitStyles(); 60 61 assert_array_equals(element.takeLog().types(), []); 62 }, 'Animation.animate must not enqueue an attributeChanged reaction when it mutates the style attribute but the style attribute is not observed'); 63 64 </script> 65 </body> 66 </html>