inert-on-non-html.html (3618B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>'inert' is an HTML attribute and has no effect when used on other elements</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <style> 6 #tests { 7 line-height: 1.5em; 8 } 9 #tests svg { 10 height: 1.5em; 11 vertical-align: middle; 12 } 13 #tests svg > text { 14 transform: translateY(50%); 15 dominant-baseline: central; 16 } 17 #tests foreignObject { 18 height: 100%; 19 width: 100%; 20 } 21 </style> 22 <div id="log"></div> 23 <ul id="tests"> 24 <!-- The 'inert' attribute only works on HTML elements --> 25 <li> 26 <span>non-inert</span> 27 </li> 28 <li> 29 <span inert>inert</span> 30 </li> 31 <li> 32 <foo>non-inert</foo> 33 </li> 34 <li> 35 <foo inert>inert</foo> 36 </li> 37 <li> 38 <foo-bar>non-inert</foo-bar> 39 </li> 40 <li> 41 <foo-bar inert>inert</foo-bar> 42 </li> 43 <li> 44 <math><mi>non-inert</mi></math> 45 </li> 46 <li> 47 <math inert><mi>non-inert</mi></math> 48 </li> 49 <li> 50 <math><mi inert>non-inert</mi></math> 51 </li> 52 <li> 53 <svg><text>non-inert</text></svg> 54 </li> 55 <li> 56 <svg inert><text>non-inert</text></svg> 57 </li> 58 <li> 59 <svg><text inert>non-inert</text></svg> 60 </li> 61 62 <!-- But non-HTML are inert if an HTML ancestor has the attribute --> 63 <li> 64 <span inert><span>inert</span></span> 65 </li> 66 <li> 67 <span inert><foo>inert</foo></span> 68 </li> 69 <li> 70 <span inert><foo-bar>inert</foo-bar></span> 71 </li> 72 <li> 73 <span inert><math><mi>inert</mi></math></span> 74 </li> 75 <li> 76 <span inert><svg><text>inert</text></svg></span> 77 </li> 78 79 <!-- HTML elements are not inert if an non-HTML ancestor has the attribute --> 80 <li> 81 <span data-move>non-inert</span> 82 <math inert><mi data-destination></mi></math> 83 </li> 84 <li> 85 <span data-move>non-inert</span> 86 <math><mi inert data-destination></mi></math> 87 </li> 88 <li> 89 <svg inert><foreignObject><span>non-inert</span></foreignObject></svg> 90 </li> 91 <li> 92 <svg><foreignObject inert><span>non-inert</span></foreignObject></svg> 93 </li> 94 95 <!-- HTML elements with non-HTML ancestors are inert if they have the attribute themselves --> 96 <li> 97 <span inert data-move>inert</span> 98 <math><mi data-destination></mi></math> 99 </li> 100 <li> 101 <foo inert data-move>inert</foo> 102 <math><mi data-destination></mi></math> 103 </li> 104 <li> 105 <foo-bar inert data-move>inert</foo-bar> 106 <math><mi data-destination></mi></math> 107 </li> 108 <li> 109 <svg><foreignObject><span inert>inert</span></foreignObject></svg> 110 </li> 111 <li> 112 <svg><foreignObject><foo inert>inert</foo></foreignObject></svg> 113 </li> 114 <li> 115 <svg><foreignObject><foo-bar inert>inert</foo-bar></foreignObject></svg> 116 </li> 117 </ul> 118 <script src="/resources/testharness.js"></script> 119 <script src="/resources/testharnessreport.js"></script> 120 <script> 121 for (let li of document.querySelectorAll("#tests > li")) { 122 // The HTML parser would mess certain trees, fixup here. 123 const move = li.querySelector("[data-move]"); 124 if (move) { 125 const destination = li.querySelector("[data-destination]"); 126 destination.append(move); 127 move.removeAttribute("data-move"); 128 destination.removeAttribute("data-destination"); 129 } 130 test(() => { 131 assert_equals(li.childElementCount, 1); 132 const element = li.firstElementChild; 133 const selection = getSelection(); 134 selection.selectAllChildren(element); 135 const selectionText = selection.toString().trim(); 136 const textContent = element.textContent.trim(); 137 if (textContent === "inert") { 138 assert_equals(selectionText, ""); 139 } else { 140 assert_equals(selectionText, "non-inert"); 141 } 142 }, li.innerHTML.trim()); 143 } 144 </script>