css-inline-style-interface.tentative.html (1689B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>MathML 'ElementCSSInlineStyle` Mixin Tests</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> 7 <style> 8 math * { 9 background-color: red; 10 } 11 </style> 12 <meta 13 name="assert" 14 content="MathMLElements incorporate a functional ElementCSSInlineStyle interface" 15 /> 16 <script src="/mathml/support/mathml-fragments.js"></script> 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 </head> 20 <body> 21 <span 22 >This tests the presence and functionality of features of the 23 `ElementCSSInlineStyle` interface for MathMLElements</span 24 > 25 <math></math> 26 <script> 27 let mathEl = document.querySelector("math"); 28 29 test(function() { 30 mathEl.style.backgroundColor = "lime"; 31 assert_equals( 32 getComputedStyle(mathEl).backgroundColor, 33 "rgb(0, 255, 0)", 34 "The applied background should be green." 35 ); 36 }, `The <math> element style property should be present and be functional.`); 37 38 Object.keys(MathMLFragments).forEach(elName => { 39 mathEl.innerHTML = MathMLFragments[elName]; 40 41 test(function() { 42 let el = FragmentHelper.element(mathEl); 43 el.style.backgroundColor = "blue"; 44 45 assert_equals( 46 getComputedStyle(el).backgroundColor, 47 "rgb(0, 0, 255)", 48 "The applied background should be blue." 49 ); 50 }, `The ${elName}'s style property should be present and be functional.`); 51 }); 52 </script> 53 </body> 54 </html>