diff options
24 files changed, 2415 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml new file mode 100644 index 0000000000..f1dfdfdb86 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with blocks as flex items in a horizontal flex container, with + various "flex" values and various combinations of the items + and with various writing-modes on the items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container + (with various writing-modes on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 30px; + background: lightgreen; + writing-mode: vertical-lr; + } + div.b { + flex: 2 0 20px; + background: yellow; + writing-mode: vertical-rl; + } + div.c { + flex: 3 0 40px; + background: orange; + writing-mode: sideways-lr; + } + div.flexNone { + flex: none; + background: pink; + writing-mode: vertical-lr; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + writing-mode: sideways-rl; + } + div.spacer { + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml new file mode 100644 index 0000000000..da943dfc56 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml @@ -0,0 +1,75 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with blocks as flex items in a vertical flex container, with + various "flex" values and various combinations of the items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container + (with various writing-modes on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/> + <style> + div { width: 50px; } + div.flexbox { + float: left; + border: 1px dashed blue; + height: 200px; + font-size: 10px; + display: flex; + flex-direction: column; + } + div.a { + flex: 1 0 30px; + background: lightgreen; + writing-mode: vertical-lr; + } + div.b { + flex: 2 0 20px; + background: yellow; + writing-mode: vertical-rl; + } + div.c { + flex: 3 0 40px; + background: orange; + writing-mode: sideways-lr; + } + div.flexNone { + flex: none; + background: pink; + writing-mode: vertical-lr; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + writing-mode: sideways-rl; + } + div.spacer { + display: inline-block; + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml new file mode 100644 index 0000000000..ad623d77f7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml @@ -0,0 +1,105 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that canvas elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container + (with a vertical writing-mode on the canvas flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + line-height: 8px; + } + canvas { + min-width: 0; + width: 10px; + height: 20px; + border: 1px dotted green; + writing-mode: vertical-lr; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <canvas/> + </div> + + <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + some words <canvas/> + </div> + + <!-- C) Two canvas elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <canvas style="flex: 5"/> + <canvas style="flex: 3"/> + </div> + + <!-- D) Two canvas elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <canvas style="width: 150px; flex: 1 4 auto"/> + <canvas style="width: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-width --> + <!-- Same as (D), except we've added a max-width on the second element. + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-width --> + <!-- Same as (C), except we've added a min-width on the second element. + --> + <div class="flexbox"> + <canvas style="width: 33px; flex: 2 auto"/> + <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml new file mode 100644 index 0000000000..057f63ae62 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml @@ -0,0 +1,107 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test checks that canvas elements behave correctly as flex items. +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container + (with a vertical writing-mode on the canvas flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/> + <style> + div.flexbox { + height: 200px; + background: lightgreen; + display: flex; + justify-content: space-between; + flex-direction: column; + float: left; + margin-right: 10px; + font: 8px monospace; + } + canvas { + width: 20px; + height: 10px; + min-height: 0; + border: 1px dotted green; + writing-mode: vertical-lr; + } + </style> + </head> + <body> + + <!-- A) One flex item --> + <div class="flexbox"> + <canvas/> + </div> + + <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> + <div class="flexbox"> + a b <canvas/> + </div> + + <!-- C) Two canvas elements, getting stretched by different ratios, from 0. + + Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) + = 196px + + 1st element gets 5/8 of space: 5/8 * 196px = 122.5px + 1st element gets 3/8 of space: 3/8 * 196px = 73.5px + --> + <div class="flexbox"> + <canvas style="flex: 5"/> + <canvas style="flex: 3"/> + </div> + + <!-- D) Two canvas elements, getting stretched by different ratios, from + different flex bases. + + Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px + 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px + 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; flex: 3 auto"/> + </div> + + <!-- E) Two flex items, getting shrunk by different amounts. + + Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px + First element scaled flex ratio = 4 * 150 = 600 + Second element scaled flex ratio = 3 * 100 = 300 + * So, total flexibility is 600 + 300 = 900 + + 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px + 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px + --> + <div class="flexbox"> + <canvas style="height: 150px; flex: 1 4 auto"/> + <canvas style="height: 100px; flex: 1 3 auto"/> + </div> + + <!-- F) Making sure we don't grow past max-height --> + <!-- Same as (D), except we've added a max-height on the second element. + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/> + </div> + + <!-- G) Making sure we grow at least as large as min-height --> + <!-- Same as (C), except we've added a min-height on the second element. + --> + <div class="flexbox"> + <canvas style="height: 33px; flex: 2 auto"/> + <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/> + </div> + + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html new file mode 100644 index 0000000000..4cc910b9e2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + writing-mode: vertical-lr; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html new file mode 100644 index 0000000000..0df92f9954 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + writing-mode: vertical-lr; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html new file mode 100644 index 0000000000..cb9275fd8c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on stretched flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-003-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: stretch; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + writing-mode: vertical-rl; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html new file mode 100644 index 0000000000..01c5271c45 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on stretched flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-004-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: stretch; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + writing-mode: vertical-rl; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 0 0 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html new file mode 100644 index 0000000000..ed1dcace0f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flexible flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-005-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: row; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + flex: 1; + writing-mode: vertical-lr; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 1 1 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html new file mode 100644 index 0000000000..8c12fad8c7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title> + CSS Test: Testing how explicit main-size & cross-size constraints + influence sizing on non-stretched flexible flex item w/ intrinsic ratio + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size"> + <link rel="match" href="flexbox-intrinsic-ratio-006-ref.html"> + <style> + .flexbox { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */ + width: 40px; + height: 40px; + + justify-content: flex-start; + align-items: flex-start; + + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .flexbox > * { + flex: 1; + writing-mode: vertical-lr; + + /* Disable "min-width:auto"/"min-height:auto" to focus purely on + later channels of influence. */ + min-width: 0; + min-height: 0; + } + </style> + </head> + <body> + <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. --> + + <!-- Row 1: no special sizing: --> + <div class="flexbox"> + <img src="support/solidblue.png"> + </div> + <br> + + <!-- Row 2: Specified main-size, cross-size, or flex-basis: --> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="flex: 1 1 30px"> + </div> + <br> + + <!-- Row 3: min main-size OR min cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + min-height: 34px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 34px; + min-height: 30px"> + </div> + <br> + + <!-- Row 4: max main-size OR max cross-size, or both --> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + max-height: 6px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 6px; + max-height: 10px"> + </div> + <br> + + <!-- Row 5: min main-size vs. max cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + min-height: 30px"> + </div> + <br> + + <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa --> + <div class="flexbox"> + <img src="support/solidblue.png" style="min-width: 30px; + height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 30px; + max-height: 10px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="max-width: 10px; + height: 30px"> + </div> + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 10px; + min-height: 30px"> + </div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml new file mode 100644 index 0000000000..a02e3406c9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml @@ -0,0 +1,86 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with margin/border/padding on flex items + and with various writing-modes on the items. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + font-size: 10px; + display: flex; + } + div.a { + flex: 1 0 9px; + background: lightgreen; + margin-left: 1px; + margin-right: 3px; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + padding-left: 5px; + padding-right: 6px; + writing-mode: vertical-lr; + } + div.b { + flex: 2 0 1px; + background: yellow; + margin-left: 2px; + margin-right: 4px; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + padding-left: 1px; + padding-right: 2px; + writing-mode: vertical-rl; + } + div.c { + flex: 3 0 40px; + background: orange; + writing-mode: sideways-lr; + } + div.flexNone { + flex: none; + background: pink; + writing-mode: vertical-lr; + } + div.flexBasis { + flex: 0 0 20px; + background: gray; + writing-mode: sideways-rl; + } + div.spacer { + width: 15px; + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"><div class="a"></div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div class="c"/></div> + <div class="flexbox"><div class="a"/> + <div class="flexNone"><div class="spacer"/></div> + </div> + <div class="flexbox"><div class="b"/><div class="c"/></div> + <div class="flexbox"><div class="b"/> + <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> + </div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml new file mode 100644 index 0000000000..8baef30227 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml @@ -0,0 +1,88 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Testcase with border/padding on a flex container and on its children --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title> + CSS Test: Testing borders and padding on a horizontal flex container and its flex items + (with a vertical writing-mode on the flex items). + </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> + <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + } + + <!-- customizations for flex container border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + flex: 1 0 24px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + writing-mode: vertical-rl; + } + div.child2 { + flex: 2 0 10px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + writing-mode: vertical-lr; + } + </style> + </head> + <body> + <div class="flexbox borderA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingB" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingA" + ><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingB" + ><div class="child1"/><div class="child2"/></div> + </body> +</html> + diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html new file mode 100644 index 0000000000..e488416412 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: block; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + .container > .hl, .container > .hr { + /* In the testcase, these items are stretched vertically + via the default "align-self:stretch" behavior, and because + they have a height of "auto". + (The rest of the items have a non-auto height from "inline-size" + and their vertical writing-mode, so those ones do not stretch.) */ + height: 118px; + } + + .container.hl > * { float: left; } + .container.hr > * { float: right; } + + </style> +</head> +<body> + +<div class="container hl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container hl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> +<div class="container hr"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container hr"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html new file mode 100644 index 0000000000..55c50e850f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a horizontal row-oriented flex container. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-010-ref.html"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: flex; + flex-direction: row; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container hl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container hl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> +<div class="container hr"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container hr"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html new file mode 100644 index 0000000000..8b926490b6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: block; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + + /* This really floats to top ('logical left'), since all the containers + have a vertical writing mode. */ + float: left; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + + .container > .vl, .container > .vr, + .container > .vl_rtl, .container > .vr_rtl { + /* In the testcase, these items are stretched horizontally + via the default "align-self:stretch" behavior, and because + they have a width of "auto". + (The rest of the items have a non-auto width from "inline-size" + and their horizontal writing-mode, so those ones do not stretch.) */ + width: 126px; + } + </style> +</head> +<body> + +<div class="container vl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> +<div class="container vr"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vr"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html new file mode 100644 index 0000000000..6114e19275 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical row-oriented flex container. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-011-ref.html"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: flex; + flex-direction: row; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container vl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> +<div class="container vr"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vr"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html new file mode 100644 index 0000000000..c03358be42 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: block; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + + /* This really floats to top ('logical left'), since all the containers + have a vertical writing mode. */ + float: right; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + + .container > .vl, .container > .vr, + .container > .vl_rtl, .container > .vr_rtl { + /* In the testcase, these items are stretched horizontally + via the default "align-self:stretch" behavior, and because + they have a width of "auto". + (The rest of the items have a non-auto width from "inline-size" + and their horizontal writing-mode, so those ones do not stretch.) */ + width: 126px; + } + </style> +</head> +<body> + +<div class="container vl_rtl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vl_rtl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> +<div class="container vr_rtl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vr_rtl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html new file mode 100644 index 0000000000..a7b05f178d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical row-oriented flex container + with 'direction' flipped. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-012-ref.html"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: flex; + flex-direction: row; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container vl_rtl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vl_rtl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> +<div class="container vr_rtl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vr_rtl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html new file mode 100644 index 0000000000..2a27003a5c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: block; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + nocollapse { + /* special element to disable margin-collapsing */ + display: block; + overflow: hidden; + height: 0; + } + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + .container > .vl, .container > .vr, + .container > .vl_rtl, .container > .vr_rtl { + /* In the testcase, these items are stretched horizontally + via the default "align-self:stretch" behavior, and because + they have a width of "auto". + (The rest of the items have a non-auto width from "inline-size" + and their horizontal writing-mode, so those ones do not stretch.) */ + width: 126px; + } + </style> +</head> +<body> + +<div class="container hl"> + <span class="hl small">a b c</span> <nocollapse></nocollapse> + <span class="hl big">d e</span> <nocollapse></nocollapse> + <span class="hr small">a b c</span> <nocollapse></nocollapse> + <span class="hr big">d e</span> <nocollapse></nocollapse> + <span class="vl small">a b c</span> <nocollapse></nocollapse> + <span class="vl big">d e</span> <nocollapse></nocollapse> +</div> +<div class="container hl"> + <span class="vr small">a b c</span> <nocollapse></nocollapse> + <span class="vr big">d e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> +</div> +<div class="container hr"> + <span class="hl small">a b c</span> <nocollapse></nocollapse> + <span class="hl big">d e</span> <nocollapse></nocollapse> + <span class="hr small">a b c</span> <nocollapse></nocollapse> + <span class="hr big">d e</span> <nocollapse></nocollapse> + <span class="vl small">a b c</span> <nocollapse></nocollapse> + <span class="vl big">d e</span> <nocollapse></nocollapse> +</div> +<div class="container hr"> + <span class="vr small">a b c</span> <nocollapse></nocollapse> + <span class="vr big">d e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html new file mode 100644 index 0000000000..a5d483c442 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a horizontal column-oriented flex container. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-013-ref.html"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: flex; + flex-direction: column; + float: left; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 500px; + width: 150px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container hl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container hl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> +<div class="container hr"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container hr"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html new file mode 100644 index 0000000000..4e4f5904a1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: block; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + nocollapse { + /* special element to disable margin-collapsing */ + display: block; + overflow: hidden; + height: 0; + } + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + .container > .hl, .container > .hr { + /* In the testcase, these items are stretched vertically + via the default "align-self:stretch" behavior, and because + they have a height of "auto". + (The rest of the items have a non-auto height from "inline-size" + and their vertical writing-mode, so those ones do not stretch.) */ + height: 118px; + } + </style> +</head> +<body> + +<div class="container vl"> + <span class="hl small">a b c</span> <nocollapse></nocollapse> + <span class="hl big">d e</span> <nocollapse></nocollapse> + <span class="hr small">a b c</span> <nocollapse></nocollapse> + <span class="hr big">d e</span> <nocollapse></nocollapse> + <span class="vl small">a b c</span> <nocollapse></nocollapse> + <span class="vl big">d e</span> <nocollapse></nocollapse> +</div> +<div class="container vl"> + <span class="vr small">a b c</span> <nocollapse></nocollapse> + <span class="vr big">d e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> +</div> +<div class="container vr"> + <span class="hl small">a b c</span> <nocollapse></nocollapse> + <span class="hl big">d e</span> <nocollapse></nocollapse> + <span class="hr small">a b c</span> <nocollapse></nocollapse> + <span class="hr big">d e</span> <nocollapse></nocollapse> + <span class="vl small">a b c</span> <nocollapse></nocollapse> + <span class="vl big">d e</span> <nocollapse></nocollapse> +</div> +<div class="container vr"> + <span class="vr small">a b c</span> <nocollapse></nocollapse> + <span class="vr big">d e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html new file mode 100644 index 0000000000..1a5443279a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical column-oriented flex container. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-014-ref.html"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: flex; + flex-direction: column; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container vl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> +<div class="container vr"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vr"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html new file mode 100644 index 0000000000..a236ca11d5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: block; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + nocollapse { + /* special element to disable margin-collapsing */ + display: block; + overflow: hidden; + height: 0; + } + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + + .container > .hl, .container > .hr { + /* In the testcase, these items are stretched vertically + via the default "align-self:stretch" behavior, and because + they have a height of "auto". + (The rest of the items have a non-auto height from "inline-size" + and their vertical writing-mode, so those ones do not stretch.) */ + height: 118px; + } + </style> +</head> +<body> + +<div class="container vl_rtl"> + <span class="hl small">a b c</span> <nocollapse></nocollapse> + <span class="hl big">d e</span> <nocollapse></nocollapse> + <span class="hr small">a b c</span> <nocollapse></nocollapse> + <span class="hr big">d e</span> <nocollapse></nocollapse> + <span class="vl small">a b c</span> <nocollapse></nocollapse> + <span class="vl big">d e</span> <nocollapse></nocollapse> +</div> +<div class="container vl_rtl"> + <span class="vr small">a b c</span> <nocollapse></nocollapse> + <span class="vr big">d e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> +</div> +<div class="container vr_rtl"> + <span class="hl small">a b c</span> <nocollapse></nocollapse> + <span class="hl big">d e</span> <nocollapse></nocollapse> + <span class="hr small">a b c</span> <nocollapse></nocollapse> + <span class="hr big">d e</span> <nocollapse></nocollapse> + <span class="vl small">a b c</span> <nocollapse></nocollapse> + <span class="vl big">d e</span> <nocollapse></nocollapse> +</div> +<div class="container vr_rtl"> + <span class="vr small">a b c</span> <nocollapse></nocollapse> + <span class="vr big">d e</span> <nocollapse></nocollapse> + <span class="vl_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vl_rtl big">d e</span> <nocollapse></nocollapse> + <span class="vr_rtl small">a b c</span><nocollapse></nocollapse> + <span class="vr_rtl big">d e</span> <nocollapse></nocollapse> +</div> + +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html new file mode 100644 index 0000000000..af1f9b8456 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical column-oriented flex container + with 'direction' flipped. + </title> + <meta charset="utf-8"> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> + <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> + <link rel="match" href="flexbox-writing-mode-015-ref.html"> + <link rel="stylesheet" type="text/css" href="support/ahem.css"> + <style> + .container { + display: flex; + flex-direction: column; + border: 2px solid purple; + padding: 2px; + margin-bottom: 2em; + height: 150px; + width: 500px; + } + + span { + display: block; + background: lightgrey; + border: 2px solid black; + /* If browser supports it, signal the inline direction with border color: */ + border-block-start-color: orange; + border-inline-start-color: lime; + + margin: 11px 13px 17px 7px; + inline-size: 6px; + } + + .small { font: 12px Ahem; } + .big { font: 20px Ahem; } + + .hl { writing-mode: horizontal-tb; direction: ltr; } + .hr { writing-mode: horizontal-tb; direction: rtl; } + .vl { writing-mode: vertical-lr; direction: ltr; } + .vr { writing-mode: vertical-rl; direction: ltr; } + .vl_rtl { writing-mode: vertical-lr; direction: rtl; } + .vr_rtl { writing-mode: vertical-rl; direction: rtl; } + </style> +</head> +<body> + +<div class="container vl_rtl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vl_rtl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> +<div class="container vr_rtl"> + <span class="hl small">a b c</span> + <span class="hl big">d e</span> + <span class="hr small">a b c</span> + <span class="hr big">d e</span> + <span class="vl small">a b c</span> + <span class="vl big">d e</span> +</div> +<div class="container vr_rtl"> + <span class="vr small">a b c</span> + <span class="vr big">d e</span> + <span class="vl_rtl small">a b c</span> + <span class="vl_rtl big">d e</span> + <span class="vr_rtl small">a b c</span> + <span class="vr_rtl big">d e</span> +</div> + +</body> +</html> |