| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Ignored CSS properties</title> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling"> |
| <meta name="assert" content="Verify style with ignored properties does not affect MathML layout."> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/mathml/support/feature-detection.js"></script> |
| <script src="/mathml/support/layout-comparison.js"></script> |
| <script src="/mathml/support/mathml-fragments.js"></script> |
| <script> |
| var epsilon = 1; |
| |
| setup({ explicit_done: true }); |
| window.addEventListener("load", runTests); |
| |
| function runTests() { |
| |
| for (tag in MathMLFragments) { |
| if (!FragmentHelper.isValidChildOfMrow(tag)) |
| continue; |
| |
| var ignoredProperties = [ |
| "writing-mode: vertical-rl;", |
| "white-space: normal;", |
| "float: right;", |
| "align-content: end; justify-content: end;", |
| "align-self: end; justify-self: end;", |
| ]; |
| if (tag !== "mtable") { |
| ignoredProperties.push("width: 100px !important; height: 200px !important;"); |
| } |
| |
| ignoredProperties.forEach(ignoredStyle => { |
| document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\ |
| <div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ |
| <div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\ |
| </div>`); |
| var div = document.body.lastElementChild; |
| |
| // Create MathML structure with ignored style properties. |
| var elementContainer = div.firstElementChild; |
| var elementContainerWidth = elementContainer.getBoundingClientRect().width; |
| var element = FragmentHelper.element(elementContainer); |
| if (!FragmentHelper.isEmpty(tag)) |
| FragmentHelper.forceNonEmptyDescendants(element); |
| element.setAttribute("style", ignoredStyle); |
| Array.from(element.getElementsByTagNameNS("*", FragmentHelper.mathml_namespace)).forEach(descendant => { |
| descendant.setAttribute("style", ignoredStyle); |
| }); |
| |
| var referenceContainer = div.lastElementChild; |
| var referenceContainerWidth = referenceContainer.getBoundingClientRect().width; |
| var reference = FragmentHelper.element(referenceContainer); |
| if (!FragmentHelper.isEmpty(tag)) |
| FragmentHelper.forceNonEmptyDescendants(reference); |
| |
| test(function() { |
| assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); |
| assert_approx_equals(elementContainerWidth, referenceContainerWidth, epsilon); |
| }, `${tag} preferred width calculation is not affected by ${ignoredStyle}`); |
| |
| test(function() { |
| assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); |
| compareLayout(element, reference, epsilon); |
| }, `${tag} layout is not affected by ${ignoredStyle}`); |
| |
| div.style = "display: none;"; // Hide the div after measurement. |
| }); |
| } |
| |
| done(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="log"></div> |
| </body> |
| </html> |
