legacy-orthogonal-pseudo-units.html (3161B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Legacy mpadded pseudo-units relying on orthogonal metrics</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> 7 <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mpadded"> 8 <meta name="assert" content="Legacy pseudo-units depending on orthogonal metrics"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/mathml/support/feature-detection.js"></script> 12 <script src="/mathml/support/layout-comparison.js"></script> 13 <style> 14 .testedElement { 15 background: red; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="log"></div> 21 22 <p> 23 <math> 24 <mpadded id="reference"> 25 <mspace width="10px" height="20px" depth="30px" 26 style="background: blue"/> 27 </mpadded> 28 </math> 29 </p> 30 31 <p> 32 <!-- width cannot use vertical pseudo-units --> 33 <math> 34 <mpadded class="testedElement" width="200%height"> 35 <mspace width="10px" height="20px" depth="30px" 36 style="background: blue"/> 37 </mpadded> 38 </math> 39 <math> 40 <mpadded class="testedElement" width="200%depth"> 41 <mspace width="10px" height="20px" depth="30px" 42 style="background: blue"/> 43 </mpadded> 44 </math> 45 </p> 46 47 <p> 48 <!-- lspace cannot use vertical pseudo-units --> 49 <math> 50 <mpadded class="testedElement" lspace="200%height"> 51 <mspace width="10px" height="20px" depth="30px" 52 style="background: blue"/> 53 </mpadded> 54 </math> 55 <math> 56 <mpadded class="testedElement" lspace="200%depth"> 57 <mspace width="10px" height="20px" depth="30px" 58 style="background: blue"/> 59 </mpadded> 60 </math> 61 </p> 62 <p> 63 <!-- height cannot use horizontal pseudo-units --> 64 <math> 65 <mpadded class="testedElement" height="200%width"> 66 <mspace width="10px" height="20px" depth="30px" 67 style="background: blue"/> 68 </mpadded> 69 </math> 70 </p> 71 <p> 72 <!-- depth cannot use horizontal pseudo-units --> 73 <math> 74 <mpadded class="testedElement" depth="200%width"> 75 <mspace width="10px" height="20px" depth="30px" 76 style="background: blue"/> 77 </mpadded> 78 </math> 79 </p> 80 <p> 81 <!-- voffset cannot use horizontal pseudo-units --> 82 <math> 83 <mpadded class="testedElement" voffset="200%width"> 84 <mspace width="10px" height="20px" depth="30px" 85 style="background: blue"/> 86 </mpadded> 87 </math> 88 </p> 89 <script type="text/javascript"> 90 Array.from(document.getElementsByClassName("testedElement")).forEach(mpadded => { 91 var reference = document.getElementById("reference"); 92 const name = ["width", "depth", "height", "lspace", "voffset"].find(attr => mpadded.hasAttribute(attr)); 93 const epsilon = 1; 94 test(function() { 95 assert_true(MathMLFeatureDetection.has_mspace()); 96 compareLayout(mpadded, reference, epsilon); 97 }, `${mpadded.getAttribute(name)} is not allowed on ${name}`); 98 }); 99 </script> 100 </body> 101 </html>