layout/reftests/w3c-css/submitted/multicol3/multicol-height-002.xht@141e0f1194b1 (annotated)
layout/reftests/w3c-css/submitted/multicol3/multicol-height-002.xht
Wed, 31 Dec 2014 07:16:47 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 07:16:47 +0100
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
- permissions
- -rw-r--r--
Revert simplistic fix pending revisit of Mozilla integration attempt.
| michael@0 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| michael@0 | 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| michael@0 | 3 | <head class="reftest-print"> |
| michael@0 | 4 | <title>CSS Test: Percentage Computed Height on Multicol Child (Definite Multicol Height)</title> |
| michael@0 | 5 | <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> |
| michael@0 | 6 | <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" /> |
| michael@0 | 7 | <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/> |
| michael@0 | 8 | <meta name="flags" content="" /> |
| michael@0 | 9 | <meta name="assert" content="Percentage heights with a multi-column element are relative to the computed height of the multicolumn box, and this works even when the multi-column element is paginated." /> |
| michael@0 | 10 | <link rel="match" href="reference/multicol-height-002.xht" /> |
| michael@0 | 11 | <style type="text/css"><![CDATA[ |
| michael@0 | 12 | html, body { height: 100%; } |
| michael@0 | 13 | * { margin: 0; } |
| michael@0 | 14 | div { |
| michael@0 | 15 | border: double blue 12px; |
| michael@0 | 16 | -moz-column-count:2; |
| michael@0 | 17 | -moz-column-gap:0; |
| michael@0 | 18 | -moz-column-fill: balance; |
| michael@0 | 19 | height: 150%; |
| michael@0 | 20 | } |
| michael@0 | 21 | div > p { |
| michael@0 | 22 | border-right: solid orange 12px; |
| michael@0 | 23 | width: 0; |
| michael@0 | 24 | margin: 0 auto; |
| michael@0 | 25 | height: 200%; |
| michael@0 | 26 | } |
| michael@0 | 27 | blockquote { |
| michael@0 | 28 | border: solid thick yellow; |
| michael@0 | 29 | } |
| michael@0 | 30 | ]]></style> |
| michael@0 | 31 | </head> |
| michael@0 | 32 | <body> |
| michael@0 | 33 | <p>Test passes if even when printed:</p> |
| michael@0 | 34 | <ul> |
| michael@0 | 35 | <li>Two vertical orange stripes stretch exactly |
| michael@0 | 36 | from the inner top edge to the inner bottom edge of the blue box below.</li> |
| michael@0 | 37 | <li>There is a yellow stripe immediately below the blue box.</li> |
| michael@0 | 38 | </ul> |
| michael@0 | 39 | <div> |
| michael@0 | 40 | <p></p> |
| michael@0 | 41 | </div> |
| michael@0 | 42 | <blockquote></blockquote> |
| michael@0 | 43 | </body> |
| michael@0 | 44 | </html> |
