lengths-vi-vb-units.html (2154B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>MathML lengths (vi, vb)</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values"> 8 <link rel="help" href="https://www.w3.org/TR/css-values-4/#relative-lengths"> 9 <link rel="help" href="https://www.w3.org/TR/css-values-4/#viewport-relative-units"> 10 <meta name="assert" content="Verify that vi and vb correctly take this element's inline and block axes/writing mode into consideration in MathML."> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/mathml/support/feature-detection.js"></script> 14 </head> 15 <body> 16 <div id="log"></div> 17 <iframe id="iframe" width="800" height="500"></iframe> 18 <script> 19 const epsilon = 0.5; 20 const percent = 8; 21 22 const doc = document.querySelector("#iframe").contentDocument; 23 const win = document.querySelector("#iframe").contentWindow; 24 const vw = win.innerWidth*percent*0.01; 25 const vh = win.innerHeight*percent*0.01; 26 ["horizontal-tb", "vertical-rl"].forEach(wm => { 27 test(function(t) { 28 t.add_cleanup(() => { doc.body.innerHTML = ""; }); 29 doc.body.innerHTML = ` 30 <style>html { writing-mode: ${wm}; }</style> 31 <math> 32 <mspace id="unitVi" width="${percent}vi"/> 33 <mspace id="unitVb" width="${percent}vb"/> 34 </math> 35 `.trim(); 36 const vi = doc.querySelector("#unitVi").getBoundingClientRect().width; 37 const vb = doc.querySelector("#unitVb").getBoundingClientRect().width; 38 39 if (wm === "horizontal-tb") { 40 assert_approx_equals(vi, vw, epsilon, "vi in horizontal writing modes"); 41 assert_approx_equals(vb, vh, epsilon, "vb in horizontal writing modes"); 42 } else if (wm === "vertical-rl") { 43 assert_approx_equals(vi, vh, epsilon, "vi in vertical writing modes"); 44 assert_approx_equals(vb, vw, epsilon, "vb in vertical writing modes"); 45 } 46 }, `vi/vb in ${wm} writing modes`); 47 }); 48 </script> 49 </body> 50 </html>