| <!doctype html> |
| <html> |
| <head> |
| <title>display math overflow</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| setup({ "explicit_done": true }); |
| |
| function run() { |
| test(function() { |
| let math = document.getElementById('inline-100'); |
| assert_equals(math.clientWidth, 100); |
| }, "inline math, 100px content, 200px container"); |
| |
| test(function() { |
| let math = document.getElementById('display-100'); |
| assert_equals(math.clientWidth, 200); |
| |
| let mspace = document.getElementById('space-100'); |
| |
| let mathBox = math.getBoundingClientRect(); |
| let mspaceBox = mspace.getBoundingClientRect(); |
| assert_equals(mspaceBox.left - mathBox.left, mathBox.right - mspaceBox.right); |
| }, "display math, 100px content, 200px container"); |
| |
| test(function() { |
| let math = document.getElementById('inline-400'); |
| assert_equals(math.clientWidth, 400); |
| }, "inline math, 400px content, 200px container"); |
| |
| test(function() { |
| let math = document.getElementById('display-400'); |
| assert_equals(math.clientWidth, 400); |
| }, "display math, 400px content, 200px container"); |
| done(); |
| } |
| </script> |
| |
| <style> |
| #test-area div { |
| width: 200px; |
| overflow: hidden; |
| border-style: solid; |
| /* Make sure inline <math> will fill the whole <div> vertically. */ |
| line-height: 0; |
| } |
| </style> |
| </head> |
| <body onload="run()"> |
| |
| <div id="test-area"> |
| <p>Inline math of 100px content in a 200px container. The test passes if the bar is to the left of the container.</p> |
| <div> |
| <math id="inline-100" xmlns="http://www.w3.org/1998/Math/MathML"> |
| <mspace width="100px" height="50px" style="background: linear-gradient(to right, red, green)"></mspace> |
| </math> |
| </div> |
| |
| <p>Display math of 100px content in a 200px container. The test passes if the bar is in the middle of the container.</p> |
| <div> |
| <math id="display-100" display="block" xmlns="http://www.w3.org/1998/Math/MathML"> |
| <mspace id="space-100" width="100px" height="50px" style="background: linear-gradient(to right, red, green)"></mspace> |
| </math> |
| </div> |
| |
| <p>Inline math of 400px content in a 200px container. The test passes if the bar can be scrolled horizontally to see the full content.</p> |
| <div> |
| <math id="inline-400" xmlns="http://www.w3.org/1998/Math/MathML"> |
| <mspace width="400px" height="50px" style="background: linear-gradient(to right, red, green)"></mspace> |
| </math> |
| </div> |
| |
| <p>Display math of 400px content in a 200px container. The test passes if the bar behaves exactly the same as the previous one.</p> |
| <div> |
| <math id="display-400" display="block" xmlns="http://www.w3.org/1998/Math/MathML"> |
| <mspace width="400px" height="50px" style="background: linear-gradient(to right, red, green)"></mspace> |
| </math> |
| </div> |
| </div> |
| </body> |
| </html> |
