approved/css2.1/src/positioning/position-relative-013.xht

changeset 4026
f89d69b15f88
parent 2077
8d4596c4c604
     1.1 --- a/approved/css2.1/src/positioning/position-relative-013.xht	Sat Jul 07 23:06:14 2012 -0400
     1.2 +++ b/approved/css2.1/src/positioning/position-relative-013.xht	Mon Jul 09 16:36:02 2012 -0400
     1.3 @@ -3,15 +3,18 @@
     1.4      <head>
     1.5          <title>CSS Test: Relative positioning with top and bottom do not change element dimensions</title>
     1.6          <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
     1.7 -        <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme" />
     1.8 +		<link rel="reviewer" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-09 -->
     1.9 +        <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" title="9.4.3 Relative positioning" />
    1.10 +		<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
    1.11 +
    1.12          <meta name="flags" content="" />
    1.13 -        <meta name="assert" content="Relatively positioned element dimensions are not changed with top/bottom applied." />
    1.14 +        <meta name="assert" content="Relatively positioned element dimensions are not changed with top/bottom applied. If 'top' is 'auto' and if 'bottom' is '100px', then top's used value becomes the negative of bottom. If both 'top' and 'bottom' are specified (like for #div3 in this test), then 'bottom' is ignored and the used value of 'bottom' becomes minus the value of 'top')." />
    1.15          <style type="text/css">
    1.16              div
    1.17              {
    1.18 -                height: 1in;
    1.19 +                height: 100px;
    1.20                  position: relative;
    1.21 -                width: 1in;
    1.22 +                width: 100px;
    1.23              }
    1.24              #div1
    1.25              {
    1.26 @@ -20,17 +23,19 @@
    1.27              #div2
    1.28              {
    1.29                  background-color: red;
    1.30 -                bottom: 1in;
    1.31 +                bottom: 100px;
    1.32 +                top: auto;
    1.33              }
    1.34              #div3
    1.35              {
    1.36 -                background-color: green;
    1.37 -                top: -2in;
    1.38 +                background-color: green;
    1.39 +                bottom: 0px;
    1.40 +                top: -200px;
    1.41              }
    1.42          </style>
    1.43      </head>
    1.44      <body>
    1.45 -        <p>Test passes if there is no red visible on the page.</p>
    1.46 +        <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
    1.47          <div id="div1"></div>
    1.48          <div id="div2"></div>
    1.49          <div id="div3"></div>

mercurial