dynamic-radical-paint-invalidation-001.html (6181B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Dynamic radical: paint invalidation</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> 7 <meta name="assert" content=""> 8 <link rel="match" href="dynamic-radical-paint-invalidation-001-ref.html"> 9 <style> 10 @font-face { 11 font-family: RadicalFont; 12 src: url("/fonts/math/radical-displaystyleverticalgap7000-rulethickness1000.woff"); 13 } 14 @font-face { 15 font-family: RadicalFont2; 16 src: url("/fonts/math/radical-kernbeforedegree4000-rulethickness1000.woff"); 17 } 18 math { 19 font-family: RadicalFont; 20 font-size: 10px; 21 } 22 #container > div { 23 height: 80px; 24 border-top: solid; 25 } 26 .withPaddingBorderAndMargin { 27 padding: 5px; 28 border: 5px solid yellow; 29 margin: 5px; 30 } 31 </style> 32 <script src="/mathml/support/fonts.js"></script> 33 <script> 34 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 35 function runTests() { 36 // force initial layout so we're sure what we're testing against 37 document.documentElement.getBoundingClientRect(); 38 39 var mroot = document.getElementsByTagName("mroot"); 40 var msqrt = document.getElementsByTagName("msqrt"); 41 42 // Modify base's width. 43 msqrt[0].firstElementChild.setAttribute("width", "60px") 44 mroot[0].firstElementChild.setAttribute("width", "60px") 45 46 // Modify base's ascent. 47 msqrt[1].firstElementChild.setAttribute("height", "20px") 48 mroot[1].firstElementChild.setAttribute("height", "20px") 49 50 // Modify base's descent. 51 msqrt[2].firstElementChild.setAttribute("depth", "40px") 52 mroot[2].firstElementChild.setAttribute("depth", "40px") 53 54 // Modify the radical's font family. 55 msqrt[3].parentNode.removeAttribute("style"); 56 mroot[3].parentNode.removeAttribute("style"); 57 58 // Modify radical's margin/border/padding 59 msqrt[4].setAttribute("class", "withPaddingBorderAndMargin"); 60 mroot[4].setAttribute("class", "withPaddingBorderAndMargin"); 61 62 document.documentElement.classList.remove('reftest-wait'); 63 }; 64 </script> 65 </head> 66 <body> 67 <div id="container"> 68 <div> 69 <math> 70 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 71 <msqrt> 72 <mspace width="20px" height="10px" depth="10px" style="background: blue"/> 73 </msqrt> 74 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 75 </math> 76 </div> 77 <div> 78 <math> 79 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 80 <mroot> 81 <mspace width="20px" height="10px" depth="10px" style="background: blue"/> 82 <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/> 83 </mroot> 84 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 85 </math> 86 </div> 87 <div> 88 <math> 89 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 90 <msqrt> 91 <mspace width="20px" height="10px" depth="10px" style="background: blue"/> 92 </msqrt> 93 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 94 </math> 95 </div> 96 <div> 97 <math> 98 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 99 <mroot> 100 <mspace width="20px" height="10px" depth="10px" style="background: blue"/> 101 <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/> 102 </mroot> 103 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 104 </math> 105 </div> 106 <div> 107 <math> 108 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 109 <msqrt> 110 <mspace width="20px" height="10px" depth="10px" style="background: blue"/> 111 </msqrt> 112 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 113 </math> 114 </div> 115 <div> 116 <math> 117 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 118 <mroot> 119 <mspace width="20px" height="10px" depth="10px" style="background: blue"/> 120 <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/> 121 </mroot> 122 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 123 </math> 124 </div> 125 <div> 126 <math style="font-family: RadicalFont2"> 127 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 128 <msqrt> 129 <mspace width="20px" height="10px" depth="10px" style="background: blue"/> 130 </msqrt> 131 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 132 </math> 133 </div> 134 <div> 135 <math style="font-family: RadicalFont2"> 136 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 137 <mroot> 138 <mspace width="20px" height="10px" depth="10px" style="background: blue"/> 139 <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/> 140 </mroot> 141 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 142 </math> 143 </div> 144 <div> 145 <math> 146 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 147 <msqrt> 148 <mspace width="20px" height="10px" depth="10px" style="background: blue"/> 149 </msqrt> 150 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 151 </math> 152 </div> 153 <div> 154 <math> 155 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 156 <mroot> 157 <mspace width="20px" height="10px" depth="10px" style="background: blue"/> 158 <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/> 159 </mroot> 160 <mspace width="20px" height="10px" depth="10px" style="background: gray"/> 161 </math> 162 </div> 163 </div> 164 <script src="/mathml/support/feature-detection.js"></script> 165 <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script> 166 </body> 167 </html>