diff options
Diffstat (limited to 'layout/reftests/w3c-css/submitted/align3')
140 files changed, 14105 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html new file mode 100644 index 000000000..f96f07c38 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html new file mode 100644 index 000000000..3e1819193 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row wrap; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html new file mode 100644 index 000000000..93a027b09 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html new file mode 100644 index 000000000..ad3437473 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html new file mode 100644 index 000000000..383d181c9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html new file mode 100644 index 000000000..4ed94d087 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-003-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row-reverse wrap; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html new file mode 100644 index 000000000..3702330bc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html new file mode 100644 index 000000000..d859af211 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-004-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row-reverse wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html new file mode 100644 index 000000000..d2d5a99a8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html new file mode 100644 index 000000000..ec491ffe8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-005-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column wrap; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html new file mode 100644 index 000000000..880f25836 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html new file mode 100644 index 000000000..1ce890a99 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-006-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html new file mode 100644 index 000000000..aaac464cd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-top: 4px; } + .small > .container > * { margin-top: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html new file mode 100644 index 000000000..9964af698 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-007-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column-reverse wrap; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html new file mode 100644 index 000000000..14166e151 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-top: 4px; } + .small > .container > * { margin-top: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html new file mode 100644 index 000000000..2a8fa4b7c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-008-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column-reverse wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html new file mode 100644 index 000000000..383d181c9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html new file mode 100644 index 000000000..f45b5371a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-rtl-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row wrap; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html new file mode 100644 index 000000000..c1f117e2b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { margin-left: 8px } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { /* nothing special */ } + .small .alignStart { margin-left: -4px } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { /* nothing special */ } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html new file mode 100644 index 000000000..755db6cec --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-rtl-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column wrap; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html new file mode 100644 index 000000000..f952c8daa --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { margin-left: 8px } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { /* nothing special */ } + .small .alignStart { margin-left: -4px } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { /* nothing special */ } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html new file mode 100644 index 000000000..5fa7f7722 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-vertWM-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row wrap; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html new file mode 100644 index 000000000..492924567 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignCenter"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html new file mode 100644 index 000000000..254403282 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-content-vertWM-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column wrap; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + /* This "align-self" only gets a chance to take effect when our container + has "align-content: stretch". In that case, it helps us verify that + the container's "align-content: stretch" is actually taking effect + and stretching the flex line (and giving us space to center in). */ + align-self: center; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="align-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="align-content: baseline"><div></div></div> + <div class="container" style="align-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="align-content: center"><div></div></div> + <div class="container" style="align-content: start"><div></div></div> + <div class="container" style="align-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="align-content: flex-start"><div></div></div> + <div class="container" style="align-content: flex-end"><div></div></div> + <div class="container" style="align-content: left"><div></div></div> + <div class="container" style="align-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html new file mode 100644 index 000000000..e85089fc9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html new file mode 100644 index 000000000..ea05c96b0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.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 Test: Static position of abspos children in a row flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html new file mode 100644 index 000000000..c6398ca52 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html new file mode 100644 index 000000000..a45c61d31 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.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 Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html new file mode 100644 index 000000000..6d08814e3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.html new file mode 100644 index 000000000..5af8077ba --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.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 Test: Static position of abspos children in a row-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-003-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html new file mode 100644 index 000000000..7065861dc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html new file mode 100644 index 000000000..6f00b15fd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.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 Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-004-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row-reverse wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html new file mode 100644 index 000000000..08501e841 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html new file mode 100644 index 000000000..c5d1f5b61 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.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 Test: Static position of abspos children in a column flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-005-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html new file mode 100644 index 000000000..8ad129114 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html new file mode 100644 index 000000000..ee1979608 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.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 Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-006-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html new file mode 100644 index 000000000..25609fc3c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-top: 4px; } + .small > .container > * { margin-top: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html new file mode 100644 index 000000000..b7b1d8a9d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.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 Test: Static position of abspos children in a column-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-007-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html new file mode 100644 index 000000000..3feea0b31 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-top: 4px; } + .small > .container > * { margin-top: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html new file mode 100644 index 000000000..b1fdc9220 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.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 Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-008-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column-reverse wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html new file mode 100644 index 000000000..4e395aa66 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.html new file mode 100644 index 000000000..6c8bc5c78 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.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 Test: Static position of abspos children in a RTL row flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-rtl-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html new file mode 100644 index 000000000..4e395aa66 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html new file mode 100644 index 000000000..99e171a0f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos LTR children in a RTL row flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-rtl-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + direction: ltr; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html new file mode 100644 index 000000000..b773df598 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { margin-left: 8px } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { /* nothing special */ } + .small .alignStart { margin-left: -4px } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { /* nothing special */ } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.html new file mode 100644 index 000000000..3bac61b68 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.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 Test: Static position of abspos children in a RTL column flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-rtl-003-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html new file mode 100644 index 000000000..3fb584268 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { margin-left: 8px } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { /* nothing special */ } + .small .alignStart { margin-left: -4px } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { /* nothing special */ } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html new file mode 100644 index 000000000..5588bee71 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos LTR children in a RTL column flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-rtl-004-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + direction: ltr; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html new file mode 100644 index 000000000..e9b697062 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { margin-left: 8px } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { /* nothing special */ } + .small .alignStart { margin-left: -4px } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { /* nothing special */ } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.html new file mode 100644 index 000000000..e2fe739a0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.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 Test: Static position of abspos children in a vertical-rl row flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html new file mode 100644 index 000000000..4459c1a03 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { margin-left: 8px } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { /* nothing special */ } + .small .alignStart { margin-left: -4px } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { /* nothing special */ } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html new file mode 100644 index 000000000..03f1a1291 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl row flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html new file mode 100644 index 000000000..9cd5fb6e8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.html new file mode 100644 index 000000000..a54c7d5f2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.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 Test: Static position of abspos children in a vertical-rl column flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-003-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html new file mode 100644 index 000000000..7787fba08 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004.html new file mode 100644 index 000000000..c0ccc9bb7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos vertical-lr + RTL children in a vertical-rl column flex container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-004-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + writing-mode: vertical-lr; + direction: rtl; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html new file mode 100644 index 000000000..24935ee0a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- <content-distribution> with implied fallback --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <div class="container"><div class="alignEnd"><!--space-between--></div></div> + <div class="container"><div class="alignEnd"><!--space-around--></div></div> + <div class="container"><div class="alignEnd"><!--space-evenly--></div></div> + <div class="container"><div class="alignEnd"><!--stretch--></div></div> + <br> + </div> + <div class="small"> + <!-- <content-distribution> with implied fallback --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <div class="container"><div class="alignEnd"><!--space-between--></div></div> + <div class="container"><div class="alignEnd"><!--space-around--></div></div> + <div class="container"><div class="alignEnd"><!--space-evenly--></div></div> + <div class="container"><div class="alignEnd"><!--stretch--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html new file mode 100644 index 000000000..e1de7af3b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values with explicit fallback values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-fallback-align-content-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row wrap; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- <content-distribution> with implied fallback --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <div class="container" style="align-content: space-between flex-end"><div></div></div> + <div class="container" style="align-content: space-around flex-end"><div></div></div> + <div class="container" style="align-content: space-evenly flex-end"><div></div></div> + <div class="container" style="align-content: stretch flex-end"><div></div></div> + <br> + </div> + <div class="small"> + <!-- <content-distribution> with implied fallback --> + <div class="container" style="align-content: space-between"><div></div></div> + <div class="container" style="align-content: space-around"><div></div></div> + <div class="container" style="align-content: space-evenly"><div></div></div> + <div class="container" style="align-content: stretch"><div></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <div class="container" style="align-content: space-between flex-end"><div></div></div> + <div class="container" style="align-content: space-around flex-end"><div></div></div> + <div class="container" style="align-content: space-evenly flex-end"><div></div></div> + <div class="container" style="align-content: stretch flex-end"><div></div></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html new file mode 100644 index 000000000..21185bcb2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- <content-distribution> with implied fallback --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <div class="container"><div class="alignEnd"><!--space-between--></div></div> + <div class="container"><div class="alignEnd"><!--space-around--></div></div> + <div class="container"><div class="alignEnd"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + </div> + <div class="small"> + <!-- <content-distribution> with implied fallback --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <div class="container"><div class="alignEnd"><!--space-between--></div></div> + <div class="container"><div class="alignEnd"><!--space-around--></div></div> + <div class="container"><div class="alignEnd"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html new file mode 100644 index 000000000..d90dc7597 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values with explicit fallback values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-fallback-justify-content-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- <content-distribution> with implied fallback --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <div class="container" style="justify-content: space-between flex-end"><div></div></div> + <div class="container" style="justify-content: space-around flex-end"><div></div></div> + <div class="container" style="justify-content: space-evenly flex-end"><div></div></div> + <div class="container" style="justify-content: stretch flex-end"><div></div></div> + <!-- Note: specifically for flex containers, in the justify-content axis, + "stretch behaves as flex-start (ignoring the specified fallback + alignment, if any." https://drafts.csswg.org/css-align-3/#distribution-flex --> + <br> + </div> + <div class="small"> + <!-- <content-distribution> with implied fallback --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-distribution> with explicit "flex-end" fallback --> + <div class="container" style="justify-content: space-between flex-end"><div></div></div> + <div class="container" style="justify-content: space-around flex-end"><div></div></div> + <div class="container" style="justify-content: space-evenly flex-end"><div></div></div> + <div class="container" style="justify-content: stretch flex-end"><div></div></div> + <!-- As noted above, the explicit fallback for "stretch" is ignored here. --> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html new file mode 100644 index 000000000..fc450981e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html new file mode 100644 index 000000000..1d571360a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html new file mode 100644 index 000000000..fc450981e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002.html new file mode 100644 index 000000000..09073d4fb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html new file mode 100644 index 000000000..d49626975 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignEnd"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignEnd"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignEnd"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignEnd"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html new file mode 100644 index 000000000..f2801ebdd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-003-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row-reverse wrap; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html new file mode 100644 index 000000000..d49626975 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { margin-left: 8px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { margin-left: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignEnd"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignEnd"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignEnd"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignEnd"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html new file mode 100644 index 000000000..0f8d330ba --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-004-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row-reverse wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html new file mode 100644 index 000000000..807f16124 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html new file mode 100644 index 000000000..729ca9732 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-005-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html new file mode 100644 index 000000000..807f16124 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html new file mode 100644 index 000000000..83da7de4f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-006-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html new file mode 100644 index 000000000..04979dfa7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignEnd"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignEnd"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignEnd"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignEnd"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html new file mode 100644 index 000000000..ad97ac3ce --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-007-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column-reverse wrap; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html new file mode 100644 index 000000000..04979dfa7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignEnd"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignEnd"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignEnd"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignEnd"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignEnd"><!--flex-start--></div></div> + <div class="container"><div class="alignStart"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html new file mode 100644 index 000000000..d6a4074e3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-008-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column-reverse wrap-reverse; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html new file mode 100644 index 000000000..2ccb6b157 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { margin-left: 8px } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { /* nothing special */ } + .small .alignStart { margin-left: -4px } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { /* nothing special */ } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html new file mode 100644 index 000000000..94df40c0e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-rtl-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html new file mode 100644 index 000000000..4cf947164 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html new file mode 100644 index 000000000..f85c7d051 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-rtl-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html new file mode 100644 index 000000000..dc9b6da9b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 8px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { /* nothing special */ } + .big .alignCenter { margin-top: 2px } + .big .alignEnd { margin-top: 4px } + .small .alignStart { /* nothing special */ } + .small .alignCenter { margin-top: -2px } + .small .alignEnd { margin-top: -4px } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html new file mode 100644 index 000000000..db4b5b691 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-vertWM-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html new file mode 100644 index 000000000..d4fd90e35 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { margin-left: 8px } + .big .alignCenter { margin-left: 4px } + .big .alignEnd { /* nothing special */ } + .small .alignStart { margin-left: -4px } + .small .alignCenter { margin-left: -2px } + .small .alignEnd { /* nothing special */ } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <content-distribution> --> + <div class="container"><div class="alignStart"><!--space-between--></div></div> + <div class="container"><div class="alignCenter"><!--space-around--></div></div> + <div class="container"><div class="alignCenter"><!--space-evenly--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <content-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <br> + <!-- <content-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html new file mode 100644 index 000000000..1eb456d6e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "justify-content" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-justify-content-vertWM-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: column; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-content values, from + https://www.w3.org/TR/css-align-3/#propdef-align-content --> + <!-- normal --> + <div class="container" style="justify-content: normal"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container" style="justify-content: baseline"><div></div></div> + <div class="container" style="justify-content: last baseline"><div></div></div> + <br> + <!-- <content-distribution> --> + <div class="container" style="justify-content: space-between"><div></div></div> + <div class="container" style="justify-content: space-around"><div></div></div> + <div class="container" style="justify-content: space-evenly"><div></div></div> + <div class="container" style="justify-content: stretch"><div></div></div> + <br> + <!-- <content-position>, part 1 --> + <div class="container" style="justify-content: center"><div></div></div> + <div class="container" style="justify-content: start"><div></div></div> + <div class="container" style="justify-content: end"><div></div></div> + <br> + <!-- <content-position>, part 2 --> + <div class="container" style="justify-content: flex-start"><div></div></div> + <div class="container" style="justify-content: flex-end"><div></div></div> + <div class="container" style="justify-content: left"><div></div></div> + <div class="container" style="justify-content: right"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-ref.html new file mode 100644 index 000000000..d4f75a036 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-ref.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.html new file mode 100644 index 000000000..90f328e3a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.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 Test: Static position of abspos children in a row flex container, with various "justify-self" values (which shouldn't have any effect) </title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-flex"> + <link rel="match" href="flex-abspos-staticpos-justify-self-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 10px; + width: 16px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001-ref.html new file mode 100644 index 000000000..428aeae64 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001-ref.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 10px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 14px; + width: 20px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div></div></div> + <br> + </div> + <div class="small"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <div class="container"><div></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001.html new file mode 100644 index 000000000..7a42e0def --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various margins applied</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-margin-001-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 10px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 14px; + width: 20px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin-top: auto"></div></div> + <div class="container"><div style="margin-right: auto"></div></div> + <div class="container"><div style="margin-bottom: auto"></div></div> + <div class="container"><div style="margin-left: auto"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: auto"></div></div> + <br> + </div> + <div class="small"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin-top: auto"></div></div> + <div class="container"><div style="margin-right: auto"></div></div> + <div class="container"><div style="margin-bottom: auto"></div></div> + <div class="container"><div style="margin-left: auto"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: auto"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002-ref.html new file mode 100644 index 000000000..38cfdff07 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002-ref.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <meta charset="utf-8"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 10px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 14px; + width: 20px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin: 3px 0 0 12px"></div></div> + <div class="container"><div style="margin: 0 0 0 9px"></div></div> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 0 0 10px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: 0 0 0 12px"></div></div> + <br> + </div> + <div class="small"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin: 3px 0 0 -4px"></div></div> + <div class="container"><div style="margin: 0 0 0 -7px"></div></div> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 0 0 -6px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: 0 0 0 -4px"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002.html new file mode 100644 index 000000000..51b70d691 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Test: Static position of abspos children in a row flex container, with various margins applied, and "justify-content: flex-end"</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="flex-abspos-staticpos-margin-002-ref.html"> + <meta charset="utf-8"> + <style> + .container { + display: flex; + flex-flow: row; + justify-content: flex-end; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 10px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 14px; + width: 20px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin-top: auto"></div></div> + <div class="container"><div style="margin-right: auto"></div></div> + <div class="container"><div style="margin-bottom: auto"></div></div> + <div class="container"><div style="margin-left: auto"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: auto"></div></div> + <br> + </div> + <div class="small"> + <!-- Margin just on one side: --> + <div class="container"><div style="margin-top: 3px"></div></div> + <div class="container"><div style="margin-right: 3px"></div></div> + <div class="container"><div style="margin-bottom: 3px"></div></div> + <div class="container"><div style="margin-left: 3px"></div></div> + <!-- Margin on all sides: --> + <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> + <br> + + <!-- "auto" margin on just one side (should be treated as 0): --> + <div class="container"><div style="margin-top: auto"></div></div> + <div class="container"><div style="margin-right: auto"></div></div> + <div class="container"><div style="margin-bottom: auto"></div></div> + <div class="container"><div style="margin-left: auto"></div></div> + <!-- "auto" margin on all sides (should be treated as 0): --> + <div class="container"><div style="margin: auto"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001-ref.html new file mode 100644 index 000000000..e519f2d7a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001-ref.html @@ -0,0 +1,100 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + margin-left: 3px; + } + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.html new file mode 100644 index 000000000..02b7a136a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.html @@ -0,0 +1,101 @@ +<!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: Static position of abspos children in a grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-001-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html new file mode 100644 index 000000000..eaa1c712d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-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> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 32px; + width: 26px; + } + .small > .container { + height: 4px; + width: 8px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 13px; } + .big .alignEnd { margin-top: 26px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -1px; } + .small .alignEnd { margin-top: -2px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002.html new file mode 100644 index 000000000..32f90939b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002.html @@ -0,0 +1,100 @@ +<!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: Static position of abspos children in a static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-002-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001-ref.html new file mode 100644 index 000000000..a14d63068 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001-ref.html @@ -0,0 +1,127 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + margin-left: 3px; + display: block; + } + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -7px; } + .small .alignEnd { margin-top: -14px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--right--></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--right--></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001.html new file mode 100644 index 000000000..fa4a56d40 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001.html @@ -0,0 +1,126 @@ +<!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: Static position of abspos replaced children in a grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-img-001-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + grid: 2px 30px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: baseline"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: last baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: right"></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: baseline"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: last baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: right"></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html new file mode 100644 index 000000000..cba35db99 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html @@ -0,0 +1,125 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 42px; + width: 26px; + } + .small > .container { + height: 4px; + width: 8px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + display: block; + } + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 13px; } + .big .alignEnd { margin-top: 26px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -6px; } + .small .alignEnd { margin-top: -12px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--right--></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--right--></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002.html new file mode 100644 index 000000000..5fca4c308 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002.html @@ -0,0 +1,125 @@ +<!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: Static position of abspos replaced children in a static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-img-002-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + grid: 2px 30px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: baseline"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: last baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: right"></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: baseline"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: last baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: right"></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001-ref.html new file mode 100644 index 000000000..671b315a1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001-ref.html @@ -0,0 +1,102 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001.html new file mode 100644 index 000000000..1e7a125d9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001.html @@ -0,0 +1,101 @@ +<!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: Static position of abspos children in a RTL grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-001-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002-ref.html new file mode 100644 index 000000000..671b315a1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002-ref.html @@ -0,0 +1,102 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002.html new file mode 100644 index 000000000..7274c116f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002.html @@ -0,0 +1,102 @@ +<!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: Static position of abspos LTR children in a RTL grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-002-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html new file mode 100644 index 000000000..dc3d2bc46 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html @@ -0,0 +1,101 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 32px; + width: 26px; + } + .small > .container { + height: 4px; + width: 8px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 18px; } + .small > .container > * { margin-left: 0px; } + + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 13px; } + .big .alignEnd { margin-top: 26px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -1px; } + .small .alignEnd { margin-top: -2px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003.html new file mode 100644 index 000000000..f8539f8b9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003.html @@ -0,0 +1,100 @@ +<!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: Static position of abspos children in a RTL static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-003-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html new file mode 100644 index 000000000..dc3d2bc46 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html @@ -0,0 +1,101 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 32px; + width: 26px; + } + .small > .container { + height: 4px; + width: 8px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 18px; } + .small > .container > * { margin-left: 0px; } + + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 13px; } + .big .alignEnd { margin-top: 26px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -1px; } + .small .alignEnd { margin-top: -2px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004.html new file mode 100644 index 000000000..b891d5415 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004.html @@ -0,0 +1,101 @@ +<!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: Static position of abspos LTR children in a RTL static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-004-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001-ref.html new file mode 100644 index 000000000..37575f03e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001-ref.html @@ -0,0 +1,101 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001.html new file mode 100644 index 000000000..273abb150 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001.html @@ -0,0 +1,102 @@ +<!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: Static position of abspos children in a vertical-rl grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-001-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002-ref.html new file mode 100644 index 000000000..ce217e7ff --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002-ref.html @@ -0,0 +1,101 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002.html new file mode 100644 index 000000000..2156f4bbf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002.html @@ -0,0 +1,103 @@ +<!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: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-002-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html new file mode 100644 index 000000000..8877789be --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html @@ -0,0 +1,99 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 32px; + height: 26px; + } + .small > .container { + width: 4px; + height: 8px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignStart { margin-left: 26px; } + .big .alignCenter { margin-left: 13px; } + .big .alignEnd { margin-left: 0px; } + .small .alignStart { margin-left: -2px; } + .small .alignCenter { margin-left: -1px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003.html new file mode 100644 index 000000000..b727d3b37 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003.html @@ -0,0 +1,101 @@ +<!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: Static position of abspos children in a vertical-rl static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-003-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html new file mode 100644 index 000000000..54d6d46f8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html @@ -0,0 +1,99 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 32px; + height: 26px; + } + .small > .container { + width: 4px; + height: 8px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignStart { margin-left: 26px; } + .big .alignCenter { margin-left: 13px; } + .big .alignEnd { margin-left: 0px; } + .small .alignStart { margin-left: -2px; } + .small .alignCenter { margin-left: -1px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004.html new file mode 100644 index 000000000..f350ef8ce --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004.html @@ -0,0 +1,102 @@ +<!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: Static position of abspos horizontal-tb children in a static-pos vertical-rl grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-004-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <div class="container"><div style="align-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001-ref.html new file mode 100644 index 000000000..6d197e490 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001-ref.html @@ -0,0 +1,101 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 2px; } + .big .alignCenter { margin-left: 9px; } + .big .alignEnd { margin-left: 16px; } + .small .alignStart { margin-left: 0px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html new file mode 100644 index 000000000..99cfcbb9b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html @@ -0,0 +1,102 @@ +<!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: Static position of abspos children in a grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-001-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + justify-items: center; /* To exercise 'justify-self: auto' on children */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html new file mode 100644 index 000000000..741a795f2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html @@ -0,0 +1,99 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 32px; + height: 26px; + } + .small > .container { + width: 4px; + height: 8px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignStart { margin-left: 0px; } + .big .alignCenter { margin-left: 13px; } + .big .alignEnd { margin-left: 26px; } + .small .alignStart { margin-left: 0px; } + .small .alignCenter { margin-left: -1px; } + .small .alignEnd { margin-left: -2px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002.html new file mode 100644 index 000000000..b82d308af --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002.html @@ -0,0 +1,101 @@ +<!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: Static position of abspos children in a static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-002-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + justify-items: center; /* To exercise 'justify-self: auto' on children */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001-ref.html new file mode 100644 index 000000000..78d621219 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001-ref.html @@ -0,0 +1,127 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + margin-top: 3px; + display: block; + } + .big .alignStart { margin-left: 2px; } + .big .alignCenter { margin-left: 13px; } + .big .alignEnd { margin-left: 24px; } + .small .alignStart { margin-left: 0px; } + .small .alignCenter { margin-left: -3px; } + .small .alignEnd { margin-left: -6px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--right--></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--right--></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001.html new file mode 100644 index 000000000..fdd4f6220 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001.html @@ -0,0 +1,126 @@ +<!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: Static position of abspos replaced children in a grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-img-001-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + grid: 3px 14px 3px / 2px 30px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: baseline"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: last baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: right"></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: baseline"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: last baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: right"></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html new file mode 100644 index 000000000..a1d4e8163 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html @@ -0,0 +1,125 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 42px; + height: 26px; + } + .small > .container { + width: 4px; + height: 8px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + display: block; + } + .big .alignStart { margin-left: 0px; } + .big .alignCenter { margin-left: 17px; } + .big .alignEnd { margin-left: 34px; } + .small .alignStart { margin-left: 0px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--right--></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--right--></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002.html new file mode 100644 index 000000000..61c1b97b5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002.html @@ -0,0 +1,125 @@ +<!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: Static position of abspos replaced children in a static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-img-002-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + grid: 3px 14px 3px / 2px 30px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: baseline"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: last baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: right"></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: baseline"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: last baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: right"></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001-ref.html new file mode 100644 index 000000000..8e5db1efc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001-ref.html @@ -0,0 +1,101 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001.html new file mode 100644 index 000000000..18e024bf2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001.html @@ -0,0 +1,102 @@ +<!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: Static position of abspos children in a RTL grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-001-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002-ref.html new file mode 100644 index 000000000..c7176a7c2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002-ref.html @@ -0,0 +1,101 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002.html new file mode 100644 index 000000000..d7e510e1b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002.html @@ -0,0 +1,103 @@ +<!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: Static position of abspos LTR children in a RTL grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-002-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html new file mode 100644 index 000000000..b38590c80 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html @@ -0,0 +1,99 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 32px; + height: 26px; + } + .small > .container { + width: 4px; + height: 8px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignStart { margin-left: 26px; } + .big .alignCenter { margin-left: 13px; } + .big .alignEnd { margin-left: 0px; } + .small .alignStart { margin-left: -2px; } + .small .alignCenter { margin-left: -1px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003.html new file mode 100644 index 000000000..2224ff684 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003.html @@ -0,0 +1,101 @@ +<!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: Static position of abspos children in a RTL static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-003-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html new file mode 100644 index 000000000..1ebc9e62c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html @@ -0,0 +1,99 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 32px; + height: 26px; + } + .small > .container { + width: 4px; + height: 8px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignStart { margin-left: 26px; } + .big .alignCenter { margin-left: 13px; } + .big .alignEnd { margin-left: 0px; } + .small .alignStart { margin-left: -2px; } + .small .alignCenter { margin-left: -1px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004.html new file mode 100644 index 000000000..a22fdc24f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004.html @@ -0,0 +1,102 @@ +<!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: Static position of abspos LTR children in a RTL static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-004-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001-ref.html new file mode 100644 index 000000000..9fff3eabc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001-ref.html @@ -0,0 +1,103 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + margin-top: 3px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001.html new file mode 100644 index 000000000..1bc2a5c33 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001.html @@ -0,0 +1,101 @@ +<!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: Static position of abspos children in a vertical-rl grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-001-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002-ref.html new file mode 100644 index 000000000..9fff3eabc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002-ref.html @@ -0,0 +1,103 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + margin-top: 3px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002.html new file mode 100644 index 000000000..7b72c6aae --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002.html @@ -0,0 +1,102 @@ +<!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: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-002-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html new file mode 100644 index 000000000..155078456 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html @@ -0,0 +1,101 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 32px; + width: 26px; + } + .small > .container { + height: 4px; + width: 8px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 18px; } + .small > .container > * { margin-left: 0px; } + + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 13px; } + .big .alignEnd { margin-top: 26px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -1px; } + .small .alignEnd { margin-top: -2px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003.html new file mode 100644 index 000000000..582262bd3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003.html @@ -0,0 +1,100 @@ +<!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: Static position of abspos children in a vertical-rl static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-003-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html new file mode 100644 index 000000000..155078456 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html @@ -0,0 +1,101 @@ +<!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 Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 32px; + width: 26px; + } + .small > .container { + height: 4px; + width: 8px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 18px; } + .small > .container > * { margin-left: 0px; } + + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 13px; } + .big .alignEnd { margin-top: 26px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -1px; } + .small .alignEnd { margin-top: -2px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004.html new file mode 100644 index 000000000..63c893b6c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004.html @@ -0,0 +1,101 @@ +<!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: Static position of abspos horizontal-tb children in a vertical-rl static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-004-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <div class="container"><div style="justify-self: last baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/align3/reftest.list b/layout/reftests/w3c-css/submitted/align3/reftest.list new file mode 100644 index 000000000..02f842278 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/reftest.list @@ -0,0 +1,77 @@ +# Tests for static position of absolutely positioned flex children. +== flex-abspos-staticpos-align-content-001.html flex-abspos-staticpos-align-content-001-ref.html +== flex-abspos-staticpos-align-content-002.html flex-abspos-staticpos-align-content-002-ref.html +== flex-abspos-staticpos-align-content-003.html flex-abspos-staticpos-align-content-003-ref.html +== flex-abspos-staticpos-align-content-004.html flex-abspos-staticpos-align-content-004-ref.html +== flex-abspos-staticpos-align-content-005.html flex-abspos-staticpos-align-content-005-ref.html +== flex-abspos-staticpos-align-content-006.html flex-abspos-staticpos-align-content-006-ref.html +== flex-abspos-staticpos-align-content-007.html flex-abspos-staticpos-align-content-007-ref.html +== flex-abspos-staticpos-align-content-008.html flex-abspos-staticpos-align-content-008-ref.html +== flex-abspos-staticpos-align-content-rtl-001.html flex-abspos-staticpos-align-content-rtl-001-ref.html +== flex-abspos-staticpos-align-content-rtl-002.html flex-abspos-staticpos-align-content-rtl-002-ref.html +== flex-abspos-staticpos-align-content-vertWM-001.html flex-abspos-staticpos-align-content-vertWM-001-ref.html +== flex-abspos-staticpos-align-content-vertWM-002.html flex-abspos-staticpos-align-content-vertWM-002-ref.html + +== flex-abspos-staticpos-align-self-001.html flex-abspos-staticpos-align-self-001-ref.html +== flex-abspos-staticpos-align-self-002.html flex-abspos-staticpos-align-self-002-ref.html +== flex-abspos-staticpos-align-self-003.html flex-abspos-staticpos-align-self-003-ref.html +== flex-abspos-staticpos-align-self-004.html flex-abspos-staticpos-align-self-004-ref.html +== flex-abspos-staticpos-align-self-005.html flex-abspos-staticpos-align-self-005-ref.html +== flex-abspos-staticpos-align-self-006.html flex-abspos-staticpos-align-self-006-ref.html +== flex-abspos-staticpos-align-self-007.html flex-abspos-staticpos-align-self-007-ref.html +== flex-abspos-staticpos-align-self-008.html flex-abspos-staticpos-align-self-008-ref.html +== flex-abspos-staticpos-align-self-rtl-001.html flex-abspos-staticpos-align-self-rtl-001-ref.html +== flex-abspos-staticpos-align-self-rtl-002.html flex-abspos-staticpos-align-self-rtl-002-ref.html +== flex-abspos-staticpos-align-self-rtl-003.html flex-abspos-staticpos-align-self-rtl-003-ref.html +== flex-abspos-staticpos-align-self-rtl-004.html flex-abspos-staticpos-align-self-rtl-004-ref.html +== flex-abspos-staticpos-align-self-vertWM-001.html flex-abspos-staticpos-align-self-vertWM-001-ref.html +== flex-abspos-staticpos-align-self-vertWM-002.html flex-abspos-staticpos-align-self-vertWM-002-ref.html +== flex-abspos-staticpos-align-self-vertWM-003.html flex-abspos-staticpos-align-self-vertWM-003-ref.html +== flex-abspos-staticpos-align-self-vertWM-004.html flex-abspos-staticpos-align-self-vertWM-004-ref.html + +== flex-abspos-staticpos-fallback-align-content-001.html flex-abspos-staticpos-fallback-align-content-001-ref.html +== flex-abspos-staticpos-fallback-justify-content-001.html flex-abspos-staticpos-fallback-justify-content-001-ref.html + +== flex-abspos-staticpos-justify-content-001.html flex-abspos-staticpos-justify-content-001-ref.html +== flex-abspos-staticpos-justify-content-002.html flex-abspos-staticpos-justify-content-002-ref.html +== flex-abspos-staticpos-justify-content-003.html flex-abspos-staticpos-justify-content-003-ref.html +== flex-abspos-staticpos-justify-content-004.html flex-abspos-staticpos-justify-content-004-ref.html +== flex-abspos-staticpos-justify-content-005.html flex-abspos-staticpos-justify-content-005-ref.html +== flex-abspos-staticpos-justify-content-006.html flex-abspos-staticpos-justify-content-006-ref.html +== flex-abspos-staticpos-justify-content-007.html flex-abspos-staticpos-justify-content-007-ref.html +== flex-abspos-staticpos-justify-content-008.html flex-abspos-staticpos-justify-content-008-ref.html +== flex-abspos-staticpos-justify-content-rtl-001.html flex-abspos-staticpos-justify-content-rtl-001-ref.html +== flex-abspos-staticpos-justify-content-rtl-002.html flex-abspos-staticpos-justify-content-rtl-002-ref.html +== flex-abspos-staticpos-justify-content-vertWM-001.html flex-abspos-staticpos-justify-content-vertWM-001-ref.html +== flex-abspos-staticpos-justify-content-vertWM-002.html flex-abspos-staticpos-justify-content-vertWM-002-ref.html + +== flex-abspos-staticpos-justify-self-001.html flex-abspos-staticpos-justify-self-001-ref.html + +== flex-abspos-staticpos-margin-001.html flex-abspos-staticpos-margin-001-ref.html +== flex-abspos-staticpos-margin-002.html flex-abspos-staticpos-margin-002-ref.html + +== grid-abspos-staticpos-align-self-001.html grid-abspos-staticpos-align-self-001-ref.html +== grid-abspos-staticpos-align-self-002.html grid-abspos-staticpos-align-self-002-ref.html +== grid-abspos-staticpos-align-self-img-001.html grid-abspos-staticpos-align-self-img-001-ref.html +== grid-abspos-staticpos-align-self-img-002.html grid-abspos-staticpos-align-self-img-002-ref.html +== grid-abspos-staticpos-align-self-rtl-001.html grid-abspos-staticpos-align-self-rtl-001-ref.html +== grid-abspos-staticpos-align-self-rtl-002.html grid-abspos-staticpos-align-self-rtl-002-ref.html +== grid-abspos-staticpos-align-self-rtl-003.html grid-abspos-staticpos-align-self-rtl-003-ref.html +== grid-abspos-staticpos-align-self-rtl-004.html grid-abspos-staticpos-align-self-rtl-004-ref.html +== grid-abspos-staticpos-align-self-vertWM-001.html grid-abspos-staticpos-align-self-vertWM-001-ref.html +== grid-abspos-staticpos-align-self-vertWM-002.html grid-abspos-staticpos-align-self-vertWM-002-ref.html +== grid-abspos-staticpos-align-self-vertWM-003.html grid-abspos-staticpos-align-self-vertWM-003-ref.html +== grid-abspos-staticpos-align-self-vertWM-004.html grid-abspos-staticpos-align-self-vertWM-004-ref.html + +== grid-abspos-staticpos-justify-self-001.html grid-abspos-staticpos-justify-self-001-ref.html +== grid-abspos-staticpos-justify-self-002.html grid-abspos-staticpos-justify-self-002-ref.html +== grid-abspos-staticpos-justify-self-img-001.html grid-abspos-staticpos-justify-self-img-001-ref.html +== grid-abspos-staticpos-justify-self-img-002.html grid-abspos-staticpos-justify-self-img-002-ref.html +== grid-abspos-staticpos-justify-self-rtl-001.html grid-abspos-staticpos-justify-self-rtl-001-ref.html +== grid-abspos-staticpos-justify-self-rtl-002.html grid-abspos-staticpos-justify-self-rtl-002-ref.html +== grid-abspos-staticpos-justify-self-rtl-003.html grid-abspos-staticpos-justify-self-rtl-003-ref.html +== grid-abspos-staticpos-justify-self-rtl-004.html grid-abspos-staticpos-justify-self-rtl-004-ref.html +== grid-abspos-staticpos-justify-self-vertWM-001.html grid-abspos-staticpos-justify-self-vertWM-001-ref.html +== grid-abspos-staticpos-justify-self-vertWM-002.html grid-abspos-staticpos-justify-self-vertWM-002-ref.html +== grid-abspos-staticpos-justify-self-vertWM-003.html grid-abspos-staticpos-justify-self-vertWM-003-ref.html +== grid-abspos-staticpos-justify-self-vertWM-004.html grid-abspos-staticpos-justify-self-vertWM-004-ref.html diff --git a/layout/reftests/w3c-css/submitted/align3/support/colors-8x16.png b/layout/reftests/w3c-css/submitted/align3/support/colors-8x16.png Binary files differnew file mode 100644 index 000000000..596fdb389 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/align3/support/colors-8x16.png |
