transform-transformed-tr-percent-height-child.html (1160B)
1 <!doctype HTML> 2 3 <title>CSS Test (Transforms): Transformed tr with percent height abspos child.</title> 4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 5 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> 6 <meta name="assert" content="This test ensures that transformed tr's percent height abspos child uses tr's height as reference."> 7 <link rel="match" href="transform-transformed-tr-percent-height-child-ref.html"> 8 <style> 9 table, td, tr { 10 margin: 0px; 11 padding: 0px; 12 border-spacing: 0px; 13 } 14 table { 15 background-color: lightblue; 16 } 17 td { 18 width: 50px; 19 height: 50px; 20 background-color: lightgrey; 21 } 22 .contblock { 23 transform: translateX(10px); 24 width: 200px; 25 height: 200px; 26 background-color: lightyellow; 27 } 28 .abspos { 29 position: absolute; 30 top: 20px; 31 left: 20px; 32 width: 100%; 33 height: 100%; 34 background-color: blue; 35 } 36 </style> 37 38 <div class="contblock"> 39 <table> 40 <tr> 41 <td></td> 42 </tr> 43 <tr style="transform: translateX(10px)"> 44 <td></td> 45 <td><div class="abspos"></div></td> 46 </tr> 47 </table> 48 </div>