| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "
http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> |
| 2 <html xmlns="http://www.w3.org/1999/xhtml"> |
| 3 <head> |
| 4 <title>CSS Test: Absolute replaced elements with 'direction' as left-to-
right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and i
ntrinsic height</title> |
| 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> |
| 6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtal
bot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> |
| 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-repla
ced-width" /> |
| 8 <link rel="match" href="absolute-replaced-width-002-ref.xht" /> |
| 9 |
| 10 <meta name="flags" content="nonHTML svg" /> |
| 11 <meta name="assert" content="If an absolutely positioned inline replaced
element (like the svg element in this test) has no intrinsic width and no
intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both le
ft and right values are 'auto' and the 'direction' property of the element estab
lishing the static-position containing block is 'ltr', then set 'left' to the st
atic position. If 'left' or 'right' are 'auto' (like in this test), then replace
any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there
is an 'auto' left (like in this test: right is 'auto'), solve the equation for t
hat value." /> |
| 12 <style type="text/css"> |
| 13 #div1 |
| 14 { |
| 15 border: solid black; |
| 16 direction: ltr; |
| 17 height: 3in; |
| 18 position: relative; |
| 19 width: 3in; |
| 20 } |
| 21 svg |
| 22 { |
| 23 margin-left: auto; |
| 24 margin-right: auto; |
| 25 left: auto; |
| 26 position: absolute; |
| 27 right: auto; |
| 28 } |
| 29 |
| 30 /* |
| 31 |
| 32 In this test, the svg's containing block is div#div1. |
| 33 |
| 34 The contraining equation should be balanced in the follo
wing manner: |
| 35 |
| 36 left: will take the static position within its ltr conta
ining block |
| 37 margin-left: will become 0 |
| 38 width: will become 300px |
| 39 margin-right: will become 0 |
| 40 right: will be the width of div#div1 minus 300px (288px
minus 300px == -12px) |
| 41 |
| 42 */ |
| 43 |
| 44 div div |
| 45 { |
| 46 background: orange; |
| 47 height: 50px; |
| 48 margin-top: 50px; |
| 49 width: 200px; |
| 50 } |
| 51 </style> |
| 52 </head> |
| 53 <body> |
| 54 <p>Test passes if the blue and orange rectangles have the same width and
the blue rectangle is in the upper-left corner of an hollow black square.</p> |
| 55 <div id="div1"> |
| 56 <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height
="50" baseProfile="full"> |
| 57 <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> |
| 58 </svg:svg> |
| 59 <div></div> |
| 60 </div> |
| 61 </body> |
| 62 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2824603002:
Import css21/positioning W3C CSS Test Suite (Closed)
