LayoutTests/css2.1/20110323/empty-inline-003.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3
   4  <head>
   5
   6   <title>CSS Test: Line height calculations: the 'line-height' and 'vertical-align' properties - Empty inline elements influence</title>
   7
   8   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
   9   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  10   <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
  11   <meta content="The line-height of an empty inline element influences the height of a line containing it with some other content" name="assert">
  12   <meta content="" name="flags">
  13
  14   <style type="text/css">
  15   #test
  16   {
  17   background-color: lime;
  18   line-height: 1;
  19   }
  20
  21   #empty-inline-element
  22   {
  23   line-height: 5;
  24   }
  25
  26   #reference-overlapped-red
  27   {
  28   background-color: red;
  29   left: 0;
  30   line-height: 5;
  31   position: absolute;
  32   top: 0;
  33   width: 100%;
  34   z-index: -1;
  35   }
  36
  37   #relatively-positioned-wrapper
  38   {
  39   position: relative;
  40   }
  41   </style>
  42
  43  </head>
  44
  45  <body>
  46  <p>Test passes if there is a wide bright green rectangle below with one "X" in it and if there is no red.</p>
  47
  48   <div id="relatively-positioned-wrapper">
  49    <div id="test"><span id="empty-inline-element"></span>X</div>
  50    <div id="reference-overlapped-red">X</div>
  51  </body>
  52 </html>