position-relative-010

Over-constrained situation with position 'right' property

WeasyPrint

This browser

Assertion
If the 'direction' property of the containing block is 'rtl', the value of 'right' wins and 'left' becomes negative 'right'.

Source

 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: Over-constrained situation with position 'right' property</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#positioning-scheme">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="If the 'direction' property of the containing block is 'rtl', the value of 'right' wins and 'left' becomes negative 'right'.">
 9         <style type="text/css">
10             #div1
11             {
12                 background: blue;
13                 direction: rtl;
14                 width: 2in;
15             }
16             div div
17             {
18                 background: orange;
19                 height: 1in;
20                 left: 1in;
21                 position: relative;
22                 right: 1in;
23                 width: 1in;
24             }
25         </style>
26     </head>
27     <body>
28         <p>Test passes if the blue box is to the right of the orange box.</p>
29         <div id="div1">
30             <div></div>
31         </div>
32     </body>
33 </html>