inline--position-absolute--02.xhtml (1475B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head> 7 8 <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=342532 --> 9 10 <title>Test: percentage height on absolutely positioned SVG</title> 11 12 <!-- 13 This testcase checks that percentage values for height on absolutely 14 positioned SVG will be computed relative to their containing block, and 15 not relative to the content area of the user agent. 16 --> 17 18 <style type="text/css"> 19 20 html, body { 21 padding: 0; 22 border: 0; 23 margin: 0; 24 height: 100%; 25 background: lime; 26 } 27 28 </style> 29 </head> 30 <body> 31 32 <!-- create containing block for absolutely positioned children --> 33 <div style="position:relative;"> 34 35 <!-- div to expand parent div to a computed height of 20px --> 36 <div style="height:20px; background:red;"/> 37 38 <!-- absolutely positioned SVG - the explicit 100% percentage height 39 should compute as a percentage of the parent div's computed height, 40 not as a percentage of the body's height! I.e. no red should show. 41 --> 42 <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; top:0; width: 100%; height: 100%"> 43 <rect width="100%" height="100%" fill="red"/> 44 <rect width="100%" height="20px" fill="lime"/> 45 </svg> 46 47 </div> 48 49 </body> 50 </html>