third_party/WebKit/LayoutTests/fast/css/ex-unit-with-no-x-height.html

   1 <!doctype html>
   2 <style>
   3 @font-face {
   4   font-family: AhemNoXHeight;
   5   src: url("../../resources/AhemNoXHeight.ttf");
   6 }
   7 .em { height: .5em; width: .5em; }
   8 .ex { height: 1ex; width: 1ex; }
   9 .cover { background: green; }
  10 .back { background: red; }
  11 .one { left: 10px; }
  12 .two { left: 70px; }
  13 #test > div { font-family: AhemNoXHeight; font-size: 100px; position: absolute; top: 10px; }
  14 #description { margin-top: 70px; }
  15 </style>
  16
  17 <div id='test'>
  18   <div class='back em one'></div>
  19   <div class='cover ex one' id='ex'></div>
  20
  21   <div class='back ex two'></div>
  22   <div class='cover em two'></div>
  23 </div>
  24 <script src="../../resources/js-test.js"></script>
  25 <script>
  26 // Need to wait for fonts to load.
  27 window.jsTestIsAsync = true;
  28
  29 function measureExBox() {
  30   return parseInt(getComputedStyle(document.getElementById('ex')).width);
  31 }
  32
  33 window.onload = function() {
  34   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.");
  35
  36   // We should either synthesize an xHeight or use half of the 'em' unit, but not 0.
  37   // http://dev.w3.org/csswg/css-values-3/#font-relative-lengths
  38   shouldBeGreaterThan("measureExBox()", "0");
  39   finishJSTest();
  40 }
  41 </script>