1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Position 'right' property defines the offset from the right of the box itself for relative positioning</title>
5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props">
8 <meta name="flags" content="">
9 <meta name="assert" content="The 'right' property, for relative positioning, specifies the offset of the box itself from the right toward the left. If 'left' is 'auto', then its computed value is minus the value of 'right' in which case the box will move from the right toward the left by the value of 'right'.">
10 <style type="text/css">
11 #div1
12 {
13 background: blue;
14 height: 1in;
15 position: relative;
16 width: 1in;
17 }
18 div div
19 {
20 background: white;
21 height: 0.5in;
22 position: relative;
23 right: -0.5in;
24 /* In this testcase, right offset is -0.5in; so, it will move toward the right from its normal in-flow position by a value of 0.5in. */
25 width: 0.5in;
26 }
27 </style>
28 </head>
29 <body>
30 <p>Test passes if there is a box below with top-right corner missing.</p>
31 <div id="div1">
32 <div></div>
33 </div>
34 </body>
35 </html>