| <!doctype html> |
| <style> |
| @font-face { |
| font-family: AhemNoXHeight; |
| src: url("../../resources/AhemNoXHeight.ttf"); |
| } |
| .em { height: .5em; width: .5em; } |
| .ex { height: 1ex; width: 1ex; } |
| .cover { background: green; } |
| .back { background: red; } |
| .one { left: 10px; } |
| .two { left: 70px; } |
| #test > div { font-family: AhemNoXHeight; font-size: 100px; position: absolute; top: 10px; } |
| #description { margin-top: 70px; } |
| </style> |
| |
| <div id='test'> |
| <div class='back em one'></div> |
| <div class='cover ex one' id='ex'></div> |
| |
| <div class='back ex two'></div> |
| <div class='cover em two'></div> |
| </div> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| // Need to wait for fonts to load. |
| window.jsTestIsAsync = true; |
| |
| function measureExBox() { |
| return parseInt(getComputedStyle(document.getElementById('ex')).width); |
| } |
| |
| window.onload = function() { |
| description("This test ensures that the CSS 'ex' unit is treated as half the size of the CSS 'em' unit when a font has no x-height information, or an x-height is synthesized."); |
| |
| // We should either synthesize an xHeight or use half of the 'em' unit, but not 0. |
| // http://dev.w3.org/csswg/css-values-3/#font-relative-lengths |
| shouldBeGreaterThan("measureExBox()", "0"); |
| finishJSTest(); |
| } |
| </script> |
