rlh-unit-001.html (978B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Values and Units Test: using rlh in calc</title> 4 <link rel="help" href="https://drafts.csswg.org/css-values-4/#font-relative-lengths"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <meta name="assert" content="The rlh unit resolves against the root when used in calc."> 7 <style> 8 :root { 9 line-height: 50px; 10 } 11 12 p { 13 line-height: normal; 14 } 15 16 .container { 17 position: relative; 18 width: 100px; 19 height: 100px; 20 } 21 22 .contents { 23 position: absolute; 24 top: 0; 25 left: 0; 26 } 27 28 .div1 { 29 background-color: green; 30 width: 100px; 31 height: 100px; 32 } 33 34 .div2 { 35 line-height: 10px; 36 block-size: 100px; 37 background-color: red; 38 inline-size: calc(1rlh - 1rlh); 39 } 40 </style> 41 42 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 43 44 <div class="container"> 45 <div class="div1 contents"></div> 46 <div class="div2 contents"></div> 47 </div>