embellished-operator-dynamic-001.html (3933B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Embellished operators - tree change and relayout</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#embellished-operators"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#definition-of-space-like-elements"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow"> 10 <script src="/mathml/support/mathml-fragments.js"></script> 11 <meta name="assert" content="Verify relayout of an mrow with a child that has a deeply nested <mo> element."> 12 <link rel="match" href="embellished-operator-dynamic-001-ref.html"> 13 <style> 14 math, math * { 15 font: 25px/1 Ahem; 16 } 17 mn { 18 color: black; 19 } 20 mo { 21 color: blue; 22 } 23 </style> 24 </head> 25 <body> 26 <p>There should be the five 1em squares on the same line, with colors 27 black, orange, blue, orange, black:</p> 28 <math display="block"> 29 <mrow style="background: yellow"> 30 <mn>1</mn> 31 <mrow style="background: orange"> 32 <mrow id="change_to_not_embellished_operator"> 33 <mrow> 34 <mo lspace="1em" rspace="1em">X</mo> 35 </mrow> 36 </mrow> 37 </mrow> 38 <mn>2</mn> 39 </mrow> 40 </math> 41 42 <p>There should be the five 1em squares on the same line, with colors 43 black, yellow, blue, yellow, black:</p> 44 <math display="block"> 45 <mrow style="background: yellow"> 46 <mn>3</mn> 47 <mrow style="background: orange"> 48 <mrow id="change_to_embellished_operator"> 49 <mrow> 50 <mo lspace="1em" rspace="1em">X</mo> 51 </mrow> 52 <mn></mn> 53 </mrow> 54 </mrow> 55 <mn>4</mn> 56 </mrow> 57 </math> 58 59 <p>There should be the five 1em squares on the same line, with colors 60 black, orange, blue, orange, black:</p> 61 <math display="block"> 62 <mrow style="background: yellow"> 63 <mn>5</mn> 64 <mrow style="background: orange"> 65 <mrow> 66 <mrow> 67 <mo lspace="1em" rspace="1em">X</mo> 68 </mrow> 69 </mrow> 70 <mrow id="change_to_not_space_like"> 71 <mspace></mspace> 72 <mtext></mtext> 73 </mrow> 74 </mrow> 75 <mn>6</mn> 76 </mrow> 77 </math> 78 79 <p>There should be the five 1em squares on the same line, with colors 80 black, yellow, blue, yellow, black:</p> 81 <math display="block"> 82 <mrow style="background: yellow"> 83 <mn>7</mn> 84 <mrow style="background: orange"> 85 <mrow> 86 <mrow> 87 <mo lspace="1em" rspace="1em">X</mo> 88 </mrow> 89 <mrow id="change_to_space_like"> 90 <mspace></mspace> 91 <mtext></mtext> 92 <mn></mn> 93 </mrow> 94 </mrow> 95 </mrow> 96 <mn>8</mn> 97 </mrow> 98 </math> 99 100 <script src="/mathml/support/feature-detection.js"></script> 101 <script> 102 MathMLFeatureDetection.ensure_for_match_reftest("has_operator_spacing"); 103 104 // After adding a not space-like element to mrow1, it is no longer an 105 // embellished operator : lspace/rspace should be around its mrow child. 106 let mrow1 = document.getElementById("change_to_not_embellished_operator"); 107 mrow1.appendChild(FragmentHelper.createElement("mn")); 108 109 // Removing the not space-like element from mrow2 makes its orange parent 110 // an embellished operator. lspace/rspace should be around this parent. 111 let mrow2 = document.getElementById("change_to_embellished_operator"); 112 mrow2.removeChild(mrow2.lastElementChild); 113 114 // Same as above, but changing the space-like nature of one child. 115 let mrow3 = document.getElementById("change_to_not_space_like"); 116 mrow3.appendChild(FragmentHelper.createElement("mn")); 117 let mrow4 = document.getElementById("change_to_space_like"); 118 mrow4.removeChild(mrow4.lastElementChild); 119 120 document.documentElement.classList.remove('reftest-wait'); 121 </script> 122 </body> 123 </html>