line-height-100

Line-height with a minimum minus one value, -1

WeasyPrint

This browser

Flags
ahem, invalid, should
Assertion
The 'line-height' property sets a minimum minus one number value.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <title>CSS Test: Line-height with a minimum minus one value, -1</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height">
 7         <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading">
 8         <meta name="flags" content="ahem invalid should">
 9         <meta name="assert" content="The 'line-height' property sets a minimum minus one number value.">
10         <style type="text/css">
11             div
12             {
13                 font: 1in Ahem;
14                 position: relative;
15                 width: 1em;
16             }
17             #div2, #div3, #div4
18             {
19                 position: absolute;
20                 top: 0;
21             }
22             #div2, #div4
23             {
24                 background: black;
25             }
26             #div2
27             {
28                 height: 1.2em;
29                 left: 0;
30             }
31             #div3
32             {
33                 background: blue;
34                 color: blue;
35                 left: 1em;
36                 line-height: -1;
37             }
38             #div4
39             {
40                 height: 1em;
41                 left: 2em;
42             }
43         </style>
44     </head>
45     <body>
46         <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p>
47         <div id="div1">
48             <div id="div2"></div>
49             <div id="div3">X</div>
50             <div id="div4"></div>
51         </div>
52     </body>
53 </html>