diff options
Diffstat (limited to 'layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht')
-rw-r--r-- | layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht new file mode 100644 index 000000000..1331724f8 --- /dev/null +++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht @@ -0,0 +1,102 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multi-column element with child block (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0091.html" title="[css3-multicol] Nested multicolumn elements rendering" /> + <link rel="match" href="multicol-height-block-child-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a nested multi-column element's inline content could be clipped horizontally." /> +<style type="text/css"><![CDATA[ +@font-face { + font-family: Ahem; + src: url("../../../fonts/Ahem.ttf"); +} +]]></style> + <style type="text/css"><![CDATA[ + div + { + background-color: blue; + font: 20px/1 Ahem; + height: 8em; + width: 14em; + + -moz-column-count: 2; + -moz-column-gap: 2em; + + /* + + N == 2; + + W == 6em; + + H == 8em; + + */ + } + + div#outer + { + color: black; + -moz-column-fill: auto; + } + + div#inner + { + color: orange; + -moz-column-fill: balance; + } + ]]></style> + </head> + <body> + + <div id="outer"> + bla bla bla bla bla + + <div id="inner">orn orn orn zzz zzz zzz</div> + + </div> + + <!-- + Both column boxes of div#inner start in the 1st + column box of div#outer multi-column element. + The first 3 lines boxes of 1st + column box of div#inner will be rendered inside the + 1st column box of div#outer but not its 2nd. + Because 1st column box of div#outer is + 6em wide while the div#inner multi-column element + is 14em wide, this makes the first 3 line boxes + (with the 'z' trios) of 2nd column box of div#inner + clipped. + + Then, at this point, the div#inner multi-column + element should be fragmented in order to continue to + render the 5 empty line boxes it has into the + 2nd column box of div#outer. Since those 5 line + boxes are empty, we only see the extension it + creates horizontally, which is + 14em - 6em == 8em horizontally and + 5 lines boxes == 5em tall + + + Expected results: + + 0em 14em 22em + v v v +0 ********************************************* + * bla | * + * bla | * + * bla | * + * bla | * +5 * bla | * +6 * orn |**************** +7 * orn | +8 * orn | + ***************************** + + --> + + </body> +</html> |