diff options
| author | Moonchild <moonchild@palemoon.org> | 2022-09-27 20:03:42 +0000 |
|---|---|---|
| committer | Moonchild <moonchild@palemoon.org> | 2022-09-27 20:03:42 +0000 |
| commit | 4bf2bf74b15772ca9c63188cd1d6c6fc046c0ed0 (patch) | |
| tree | d07ea07bc201d9576e33d5c61551b27c2c2b4bae | |
| parent | b575f4a51645fe050f76420609eb8c8d585e2626 (diff) | |
| download | uxp-4bf2bf74b15772ca9c63188cd1d6c6fc046c0ed0.tar.gz | |
Revert "Issue #1986 - Add in reftests for new behavior."
This reverts commit 2fc5e3ad7d2b09a32e79cb201e405f57329c297e.
24 files changed, 0 insertions, 2415 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 deleted file mode 100644 index f1dfdfdb86..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml +++ /dev/null @@ -1,73 +0,0 @@ -<?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 deleted file mode 100644 index da943dfc56..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml +++ /dev/null @@ -1,75 +0,0 @@ -<?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 deleted file mode 100644 index ad623d77f7..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml +++ /dev/null @@ -1,105 +0,0 @@ -<?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 deleted file mode 100644 index 057f63ae62..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml +++ /dev/null @@ -1,107 +0,0 @@ -<?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 deleted file mode 100644 index 4cc910b9e2..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html +++ /dev/null @@ -1,128 +0,0 @@ -<!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 deleted file mode 100644 index 0df92f9954..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html +++ /dev/null @@ -1,128 +0,0 @@ -<!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 deleted file mode 100644 index cb9275fd8c..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html +++ /dev/null @@ -1,128 +0,0 @@ -<!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 deleted file mode 100644 index 01c5271c45..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html +++ /dev/null @@ -1,128 +0,0 @@ -<!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 deleted file mode 100644 index ed1dcace0f..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html +++ /dev/null @@ -1,129 +0,0 @@ -<!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 deleted file mode 100644 index 8c12fad8c7..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html +++ /dev/null @@ -1,129 +0,0 @@ -<!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 deleted file mode 100644 index a02e3406c9..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml +++ /dev/null @@ -1,86 +0,0 @@ -<?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 deleted file mode 100644 index 8baef30227..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml +++ /dev/null @@ -1,88 +0,0 @@ -<?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 deleted file mode 100644 index e488416412..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html +++ /dev/null @@ -1,94 +0,0 @@ -<!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 deleted file mode 100644 index 55c50e850f..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html +++ /dev/null @@ -1,88 +0,0 @@ -<!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 deleted file mode 100644 index 8b926490b6..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html +++ /dev/null @@ -1,97 +0,0 @@ -<!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 deleted file mode 100644 index 6114e19275..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html +++ /dev/null @@ -1,89 +0,0 @@ -<!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 deleted file mode 100644 index c03358be42..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html +++ /dev/null @@ -1,97 +0,0 @@ -<!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 deleted file mode 100644 index a7b05f178d..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html +++ /dev/null @@ -1,90 +0,0 @@ -<!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 deleted file mode 100644 index 2a27003a5c..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html +++ /dev/null @@ -1,98 +0,0 @@ -<!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 deleted file mode 100644 index a5d483c442..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html +++ /dev/null @@ -1,89 +0,0 @@ -<!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 deleted file mode 100644 index 4e4f5904a1..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html +++ /dev/null @@ -1,96 +0,0 @@ -<!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 deleted file mode 100644 index 1a5443279a..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html +++ /dev/null @@ -1,88 +0,0 @@ -<!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 deleted file mode 100644 index a236ca11d5..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html +++ /dev/null @@ -1,96 +0,0 @@ -<!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 deleted file mode 100644 index af1f9b8456..0000000000 --- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html +++ /dev/null @@ -1,89 +0,0 @@ -<!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> |