layout/reftests/svg/sizing/inline--position-absolute--02.xhtml

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/layout/reftests/svg/sizing/inline--position-absolute--02.xhtml	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,50 @@
     1.4 +<!--
     1.5 +     Any copyright is dedicated to the Public Domain.
     1.6 +     http://creativecommons.org/publicdomain/zero/1.0/
     1.7 +-->
     1.8 +<html xmlns="http://www.w3.org/1999/xhtml">
     1.9 +  <head>
    1.10 +
    1.11 +    <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=342532 -->
    1.12 +
    1.13 +    <title>Test: percentage height on absolutely positioned SVG</title>
    1.14 +
    1.15 +    <!--
    1.16 +    This testcase checks that percentage values for height on absolutely
    1.17 +    positioned SVG will be computed relative to their containing block, and
    1.18 +    not relative to the content area of the user agent.
    1.19 +    -->
    1.20 +
    1.21 +    <style type="text/css">
    1.22 +
    1.23 +html, body {
    1.24 +  padding: 0;
    1.25 +  border: 0;
    1.26 +  margin: 0;
    1.27 +  height: 100%;
    1.28 +  background: lime;
    1.29 +}
    1.30 +
    1.31 +    </style>
    1.32 +  </head>
    1.33 +  <body>
    1.34 +
    1.35 +    <!-- create containing block for absolutely positioned children -->
    1.36 +    <div style="position:relative;">
    1.37 +
    1.38 +      <!-- div to expand parent div to a computed height of 20px -->
    1.39 +      <div style="height:20px; background:red;"/>
    1.40 +
    1.41 +      <!-- absolutely positioned SVG - the explicit 100% percentage height
    1.42 +           should compute as a percentage of the parent div's computed height,
    1.43 +           not as a percentage of the body's height! I.e. no red should show.
    1.44 +      -->
    1.45 +      <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; top:0; width: 100%; height: 100%">
    1.46 +        <rect width="100%" height="100%" fill="red"/>
    1.47 +        <rect width="100%" height="20px" fill="lime"/>
    1.48 +      </svg>
    1.49 +
    1.50 +    </div>
    1.51 +
    1.52 +  </body>
    1.53 +</html>

mercurial