not-floating-001.html (2667B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>float property in math layout</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> 7 <meta name="assert" content="Assert that float property is ignored for most math layout"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/mathml-fragments.js"></script> 11 <script src="/mathml/support/layout-comparison.js"></script> 12 <style> 13 /* .element class defined in mathml-fragments.js */ 14 .element > * { 15 padding: 10px; 16 background: black; 17 } 18 /* override display: none on children of maction/semantics */ 19 maction > *, semantics > * { 20 display: math; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="log"></div> 26 <div id="container"></div> 27 28 <script> 29 let container = document.getElementById("container"); 30 for (tag in MathMLFragments) { 31 if (!FragmentHelper.isValidChildOfMrow(tag) || 32 FragmentHelper.isEmpty(tag)) 33 continue; 34 35 // Skip mtable since it does not use display: math. 36 if (tag == "mtable") 37 continue; 38 39 document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\ 40 <div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ 41 <div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ 42 </div>`); 43 let div = document.body.lastElementChild; 44 let element = 45 FragmentHelper.element(div.firstElementChild); 46 let reference = 47 FragmentHelper.element(div.lastElementChild); 48 [element, reference].forEach(parent => { 49 if (parent.classList.contains("mathml-container") || 50 parent.classList.contains("foreign-container")) { 51 FragmentHelper.appendChild(parent); 52 FragmentHelper.appendChild(parent); 53 FragmentHelper.appendChild(parent); 54 } 55 }); 56 57 // Try to use float to invert the order in which children are normally 58 // laid out. 59 function layoutChildrenFromLeftToRight(tag) { tag != 'mroot'; } 60 element.firstElementChild.style = 61 `float: ${layoutChildrenFromLeftToRight(tag) ? 'right' : 'left'};`; 62 element.lastElementChild.style = 63 `float: ${layoutChildrenFromLeftToRight(tag) ? 'left' : 'right'};`; 64 65 test(function () { 66 let epsilon = 1; 67 compareLayout(element, reference, epsilon); 68 }, `float child ignored in ${tag}`); 69 70 div.style = "display: none;"; // Hide the div after measurement. 71 } 72 </script> 73 </body> 74 </html>