html-or-foreign-element-interfaces.tentative.html (3241B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>MathML 'HTMLOrForeignElement` Mixin Tests</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> 7 <style> 8 mi { 9 background-color: red; 10 } 11 :focus { 12 background-color: rgb(0, 255, 0); 13 } 14 </style> 15 <meta 16 name="assert" 17 content="MathMLElements incorporate a functional HTMLOrForeignElement interface" 18 /> 19 <script src="/resources/testharness.js"></script> 20 <script src="/resources/testharnessreport.js"></script> 21 </head> 22 <body tabindex="-1"> 23 <span tabindex="-1" 24 >This tests the presence and functionality of features of 25 `HTMLOrForeignElement` (currently `HTMLOrSVGElement`)</span 26 > 27 <math tabindex="-1"> 28 <mi>E</mi> 29 </math> 30 </body> 31 <script> 32 // spot check the functionality of several interfaces 33 let el = document.querySelector("mi"); 34 let mathEl = document.querySelector("math"); 35 36 // this really belongs in 37 // https://github.com/web-platform-tests/wpt/blob/master/html/dom/elements/global-attributes/dataset.html 38 // it is here tentatively 39 test(function() { 40 var mathml = document.createElementNS( 41 "http://www.w3.org/1998/Math/MathML", 42 "math" 43 ); 44 assert_true(mathml.dataset instanceof DOMStringMap); 45 }, "MathML elements should have a .dataset"); 46 47 // exercise some basic tests on .dataset 48 test(function() { 49 assert_equals( 50 Object.keys(el.dataset).toString(), 51 "", 52 "The .dataset property should be present" 53 ); 54 55 el.setAttribute("data-one", "x"); 56 el.setAttribute("data-two", "y"); 57 58 assert_equals( 59 el.dataset.one, 60 "x", 61 '.one should be "x" after setting the data-one attribute' 62 ); 63 assert_equals( 64 el.dataset.two, 65 "y", 66 '.one should be "y" after setting the data-two attribute' 67 ); 68 69 el.dataset.one = "o"; 70 assert_equals( 71 el.getAttribute("data-one"), 72 "o", 73 'the data-one attribute should reflect a change to dataset.one and contain "o"' 74 ); 75 }, "The dataset property should be present and be functional."); 76 77 test(function() { 78 assert_equals(mathEl.tabIndex, -1); 79 }, "MathML elements should have a tabIndex property"); 80 81 promise_test(function() { 82 function focus() { 83 mathEl.focus(); 84 return Promise.resolve(); 85 } 86 87 return focus().then(() => { 88 assert_equals( 89 getComputedStyle(mathEl).backgroundColor, 90 "rgb(0, 255, 0)", 91 "MathML elements with tabindex=-1 should be programmatically focusable and apply :focus" 92 ); 93 }); 94 }, "MathML elements should work with focus predictably"); 95 96 promise_test(function() { 97 function blur() { 98 mathEl.blur(); 99 return Promise.resolve(); 100 } 101 102 return blur().then(() => { 103 assert_equals( 104 getComputedStyle(mathEl).backgroundColor, 105 "rgba(0, 0, 0, 0)", 106 "MathML elements with tabindex=-1 be programmatically blur() able" 107 ); 108 }); 109 }, "MathML elements should work with blur predictably"); 110 </script> 111 </html>