diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/reftests/webkit-box | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/webkit-box')
35 files changed, 3218 insertions, 0 deletions
diff --git a/layout/reftests/webkit-box/reftest-stylo.list b/layout/reftests/webkit-box/reftest-stylo.list new file mode 100644 index 000000000..a230fc8c1 --- /dev/null +++ b/layout/reftests/webkit-box/reftest-stylo.list @@ -0,0 +1,43 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# This directory contains tests for "display: -webkit-box" and associated +# CSS properties. These tests require webkit prefix support to be enabled. +default-preferences pref(layout.css.prefixes.webkit,true) + +# Tests for anonymous flex item formation inside of a "-webkit-box": +# Note: some of these tests are marked as failing, because we don't match +# WebKit/Blink on them. (The reference case represents the WebKit/Blink +# rendering.) We could probably make them pass by implementing some quirks, if +# it turns out that the web depends on WebKit/Blink's behavior in these cases. +== webkit-box-anon-flex-items-1.html webkit-box-anon-flex-items-1.html +== webkit-box-anon-flex-items-2.html webkit-box-anon-flex-items-2.html +== webkit-box-anon-flex-items-3.html webkit-box-anon-flex-items-3.html + +# Tests for "-webkit-box" & "-webkit-inline-box" as display values: +== webkit-display-values-1.html webkit-display-values-1.html + +# Tests for "-webkit-box-align" (cross-axis alignment): +== webkit-box-align-horiz-1a.html webkit-box-align-horiz-1a.html +== webkit-box-align-horiz-1b.html webkit-box-align-horiz-1b.html +== webkit-box-align-vert-1.html webkit-box-align-vert-1.html + +# Tests for "-webkit-box-direction": +== webkit-box-direction-1.html webkit-box-direction-1.html +== webkit-box-direction-2.html webkit-box-direction-2.html + +# Tests for "-webkit-box-flex" (flexibility of items) +== webkit-box-flex-1.html webkit-box-flex-1.html + +# Tests for "-webkit-box-ordinal-group" +== webkit-box-ordinal-group-1.html webkit-box-ordinal-group-1.html +# XXXdholbert The following test fails because we accept "0" as a valid value +# for -webkit-box-ordinal-group (unlike Chrome/Blink), because that's simply +# how its aliased property (-moz-box-ordinal-group) behaves. This shouldn't +# matter in practice; it could only cause trouble if sites accidentally depend +# on the "0" value being rejected. +== webkit-box-ordinal-group-2.html webkit-box-ordinal-group-2.html +== webkit-box-ordinal-group-3.html webkit-box-ordinal-group-3.html + +# Tests for "-webkit-box-pack" (main-axis alignment): +== webkit-box-pack-horiz-1a.html webkit-box-pack-horiz-1a.html +== webkit-box-pack-horiz-1b.html webkit-box-pack-horiz-1b.html +== webkit-box-pack-vert-1.html webkit-box-pack-vert-1.html diff --git a/layout/reftests/webkit-box/reftest.list b/layout/reftests/webkit-box/reftest.list new file mode 100644 index 000000000..a3d51ab62 --- /dev/null +++ b/layout/reftests/webkit-box/reftest.list @@ -0,0 +1,46 @@ +# This directory contains tests for "display: -webkit-box" and associated +# CSS properties. These tests require webkit prefix support to be enabled. +default-preferences pref(layout.css.prefixes.webkit,true) + +# Tests for abspos children inside of a -webkit-box: +== webkit-box-abspos-children-1.html webkit-box-abspos-children-1-ref.html + +# Tests for anonymous flex item formation inside of a "-webkit-box": +# Note: some of these tests are marked as failing, because we don't match +# WebKit/Blink on them. (The reference case represents the WebKit/Blink +# rendering.) We could probably make them pass by implementing some quirks, if +# it turns out that the web depends on WebKit/Blink's behavior in these cases. +== webkit-box-anon-flex-items-1a.html webkit-box-anon-flex-items-1-ref.html +== webkit-box-anon-flex-items-1b.html webkit-box-anon-flex-items-1-ref.html +fails == webkit-box-anon-flex-items-2.html webkit-box-anon-flex-items-2-ref.html +fails == webkit-box-anon-flex-items-3.html webkit-box-anon-flex-items-3-ref.html + +# Tests for "-webkit-box" & "-webkit-inline-box" as display values: +== webkit-display-values-1.html webkit-display-values-1-ref.html + +# Tests for "-webkit-box-align" (cross-axis alignment): +== webkit-box-align-horiz-1a.html webkit-box-align-horiz-1-ref.html +== webkit-box-align-horiz-1b.html webkit-box-align-horiz-1-ref.html +== webkit-box-align-vert-1.html webkit-box-align-vert-1-ref.html + +# Tests for "-webkit-box-direction": +== webkit-box-direction-1.html webkit-box-direction-1-ref.html +== webkit-box-direction-2.html webkit-box-direction-2-ref.html + +# Tests for "-webkit-box-flex" (flexibility of items) +== webkit-box-flex-1.html webkit-box-flex-1-ref.html + +# Tests for "-webkit-box-ordinal-group" +== webkit-box-ordinal-group-1.html webkit-box-ordinal-group-1-ref.html +# XXXdholbert The following test fails because we accept "0" as a valid value +# for -webkit-box-ordinal-group (unlike Chrome/Blink), because that's simply +# how its aliased property (-moz-box-ordinal-group) behaves. This shouldn't +# matter in practice; it could only cause trouble if sites accidentally depend +# on the "0" value being rejected. +fails == webkit-box-ordinal-group-2.html webkit-box-ordinal-group-2-ref.html +== webkit-box-ordinal-group-3.html webkit-box-ordinal-group-3-ref.html + +# Tests for "-webkit-box-pack" (main-axis alignment): +== webkit-box-pack-horiz-1a.html webkit-box-pack-horiz-1-ref.html +== webkit-box-pack-horiz-1b.html webkit-box-pack-horiz-1-ref.html +== webkit-box-pack-vert-1.html webkit-box-pack-vert-1-ref.html diff --git a/layout/reftests/webkit-box/webkit-box-abspos-children-1-ref.html b/layout/reftests/webkit-box/webkit-box-abspos-children-1-ref.html new file mode 100644 index 000000000..2bc8596de --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-abspos-children-1-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- NOTE: This reference case uses the same markup as the testcase, except: + (1) This reference case uses modern flexbox CSS instead of -webkit-box. + (2) In the 2nd and 4th containers here (where the testcase makes the + *2nd* flex item abspos), this reference case simply uses no absolute + positioning at all, to produce the correct expected rendering + (with the 2nd flex item being positioned after the 1st, rather than + being superimposed on top of it). +--> +<html> +<head> + <title>Reference: simple positioning of abspos children in -webkit-box</title> + <style> + .container { + border: 1px solid black; + width: 200px; + } + .box { display: flex } + .inline-box { display: inline-flex } + .abs { position: absolute } + .a { border: 3px solid purple } + .b { border: 3px solid orange } +</style> +</head> +<body> + <!-- Test abspos child in -webkit-box: --> + <div class="container box"> + <div class="a abs">aa</div> + <div class="b">bbbb</div> + </div> + <div class="container box"> + <div class="a">aa</div> + <div class="b">bbbb</div> + </div> + + <!-- Test abspos child in -webkit-inline-box: --> + <div class="container inline-box"> + <div class="a abs">aa</div> + <div class="b">bbbb</div> + </div> + <div class="container inline-box"> + <div class="a">aa</div> + <div class="b">bbbb</div> + </div> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-abspos-children-1.html b/layout/reftests/webkit-box/webkit-box-abspos-children-1.html new file mode 100644 index 000000000..ed448174c --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-abspos-children-1.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <title>Testcase: simple positioning of abspos children in -webkit-box</title> + <style> + .container { + border: 1px solid black; + width: 200px; + } + .box { display: -webkit-box } + .inline-box { display: -webkit-inline-box } + .abs { position: absolute } + .a { border: 3px solid purple } + .b { border: 3px solid orange } +</style> +</head> +<body> + <!-- Test abspos child in -webkit-box: --> + <div class="container box"> + <div class="a abs">aa</div> + <div class="b">bbbb</div> + </div> + <div class="container box"> + <div class="a">aa</div> + <div class="b abs">bbbb</div> + </div> + + <!-- Test abspos child in -webkit-inline-box: --> + <div class="container inline-box"> + <div class="a abs">aa</div> + <div class="b">bbbb</div> + </div> + + <div class="container inline-box" + style="vertical-align: top"> + <!-- XXXdholbert 'vertical-align' here is a hackaround for bug 1328792 --> + <div class="a">aa</div> + <div class="b abs">bbbb</div> + </div> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html b/layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html new file mode 100644 index 000000000..2ee021a63 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html @@ -0,0 +1,172 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Reference + </title> + <style> + .box { + display: flex; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + /* auto width */ + height: 1em; + } + .box > *:nth-child(2) { + background: salmon; + font-size: 50%; + width: 2em; + /* auto height */ + } + + .bastart { align-items: flex-start; } + .bacenter { align-items: center; } + .baend { align-items: flex-end; } + .babaseline { align-items: baseline; } + .bastretch { align-items: stretch; } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-align --> + <!-- intrinsically sized --> + <div class="box"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- SECOND ROW: -webkit-box-align: start --> + <!-- intrinsically sized --> + <div class="box bastart"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bastart" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bastart" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bastart" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- THIRD ROW: -webkit-box-align: center --> + <!-- intrinsically sized --> + <div class="box bacenter"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bacenter" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bacenter" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bacenter" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FOURTH ROW: -webkit-box-align: end --> + <!-- intrinsically sized --> + <div class="box baend"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box baend" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box baend" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box baend" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FIFTH ROW: -webkit-box-align: baseline --> + <!-- intrinsically sized --> + <div class="box babaseline"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box babaseline" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box babaseline" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box babaseline" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + <!-- SIXTH ROW: -webkit-box-align: stretch --> + <!-- intrinsically sized --> + <div class="box bastretch"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bastretch" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bastretch" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bastretch" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-align-horiz-1a.html b/layout/reftests/webkit-box/webkit-box-align-horiz-1a.html new file mode 100644 index 000000000..eb2dc06f7 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-align-horiz-1a.html @@ -0,0 +1,173 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: horizontally-oriented "display: -webkit-box" container, + with all the various -webkit-box-align values. + </title> + <style> + .box { + display: -webkit-box; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + /* auto width */ + height: 1em; + } + .box > *:nth-child(2) { + background: salmon; + font-size: 50%; + width: 2em; + /* auto height */ + } + + .bastart { -webkit-box-align: start; } + .bacenter { -webkit-box-align: center; } + .baend { -webkit-box-align: end; } + .babaseline { -webkit-box-align: baseline; } + .bastretch { -webkit-box-align: stretch; } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-align --> + <!-- intrinsically sized --> + <div class="box"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- SECOND ROW: -webkit-box-align: start --> + <!-- intrinsically sized --> + <div class="box bastart"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bastart" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bastart" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bastart" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- THIRD ROW: -webkit-box-align: center --> + <!-- intrinsically sized --> + <div class="box bacenter"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bacenter" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bacenter" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bacenter" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FOURTH ROW: -webkit-box-align: end --> + <!-- intrinsically sized --> + <div class="box baend"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box baend" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box baend" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box baend" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FIFTH ROW: -webkit-box-align: baseline --> + <!-- intrinsically sized --> + <div class="box babaseline"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box babaseline" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box babaseline" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box babaseline" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + <!-- SIXTH ROW: -webkit-box-align: stretch --> + <!-- intrinsically sized --> + <div class="box bastretch"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bastretch" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bastretch" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bastretch" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-align-horiz-1b.html b/layout/reftests/webkit-box/webkit-box-align-horiz-1b.html new file mode 100644 index 000000000..9d200346d --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-align-horiz-1b.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: horizontally-oriented "display: -webkit-box" container, + with all the various -webkit-box-align values. + </title> + <style> + .box { + display: -webkit-box; + -webkit-box-orient: horizontal; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + /* auto width */ + height: 1em; + } + .box > *:nth-child(2) { + background: salmon; + font-size: 50%; + width: 2em; + /* auto height */ + } + + .bastart { -webkit-box-align: start; } + .bacenter { -webkit-box-align: center; } + .baend { -webkit-box-align: end; } + .babaseline { -webkit-box-align: baseline; } + .bastretch { -webkit-box-align: stretch; } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-align --> + <!-- intrinsically sized --> + <div class="box"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- SECOND ROW: -webkit-box-align: start --> + <!-- intrinsically sized --> + <div class="box bastart"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bastart" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bastart" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bastart" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- THIRD ROW: -webkit-box-align: center --> + <!-- intrinsically sized --> + <div class="box bacenter"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bacenter" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bacenter" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bacenter" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FOURTH ROW: -webkit-box-align: end --> + <!-- intrinsically sized --> + <div class="box baend"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box baend" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box baend" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box baend" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FIFTH ROW: -webkit-box-align: baseline --> + <!-- intrinsically sized --> + <div class="box babaseline"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box babaseline" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box babaseline" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box babaseline" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + <!-- SIXTH ROW: -webkit-box-align: stretch --> + <!-- intrinsically sized --> + <div class="box bastretch"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bastretch" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bastretch" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bastretch" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-align-vert-1-ref.html b/layout/reftests/webkit-box/webkit-box-align-vert-1-ref.html new file mode 100644 index 000000000..f71af621b --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-align-vert-1-ref.html @@ -0,0 +1,173 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Reference + </title> + <style> + .box { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + /* auto width */ + height: 1em; + } + .box > *:nth-child(2) { + background: salmon; + font-size: 50%; + width: 2em; + /* auto height */ + } + + .bastart { align-items: flex-start; } + .bacenter { align-items: center; } + .baend { align-items: flex-end; } + .babaseline { align-items: baseline; } + .bastretch { align-items: stretch; } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-align --> + <!-- intrinsically sized --> + <div class="box"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- SECOND ROW: -webkit-box-align: start --> + <!-- intrinsically sized --> + <div class="box bastart"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bastart" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bastart" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bastart" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- THIRD ROW: -webkit-box-align: center --> + <!-- intrinsically sized --> + <div class="box bacenter"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bacenter" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bacenter" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bacenter" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FOURTH ROW: -webkit-box-align: end --> + <!-- intrinsically sized --> + <div class="box baend"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box baend" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box baend" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box baend" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FIFTH ROW: -webkit-box-align: baseline --> + <!-- intrinsically sized --> + <div class="box babaseline"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box babaseline" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box babaseline" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box babaseline" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + <!-- SIXTH ROW: -webkit-box-align: stretch --> + <!-- intrinsically sized --> + <div class="box bastretch"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bastretch" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bastretch" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bastretch" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-align-vert-1.html b/layout/reftests/webkit-box/webkit-box-align-vert-1.html new file mode 100644 index 000000000..63d4ff0b4 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-align-vert-1.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: vertically-oriented "display: -webkit-box" container, + with all the various -webkit-box-align values. + </title> + <style> + .box { + display: -webkit-box; + -webkit-box-orient: vertical; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + /* auto width */ + height: 1em; + } + .box > *:nth-child(2) { + background: salmon; + font-size: 50%; + width: 2em; + /* auto height */ + } + + .bastart { -webkit-box-align: start; } + .bacenter { -webkit-box-align: center; } + .baend { -webkit-box-align: end; } + .babaseline { -webkit-box-align: baseline; } + .bastretch { -webkit-box-align: stretch; } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-align --> + <!-- intrinsically sized --> + <div class="box"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- SECOND ROW: -webkit-box-align: start --> + <!-- intrinsically sized --> + <div class="box bastart"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bastart" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bastart" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bastart" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- THIRD ROW: -webkit-box-align: center --> + <!-- intrinsically sized --> + <div class="box bacenter"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bacenter" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bacenter" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bacenter" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FOURTH ROW: -webkit-box-align: end --> + <!-- intrinsically sized --> + <div class="box baend"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box baend" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box baend" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box baend" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FIFTH ROW: -webkit-box-align: baseline --> + <!-- intrinsically sized --> + <div class="box babaseline"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box babaseline" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box babaseline" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box babaseline" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + <!-- SIXTH ROW: -webkit-box-align: stretch --> + <!-- intrinsically sized --> + <div class="box bastretch"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bastretch" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bastretch" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bastretch" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-1-ref.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1-ref.html new file mode 100644 index 000000000..cab3cc4cd --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <title> + Reference Case + </title> + <style> + .container { + display: flex; + justify-content: space-between; + width: 300px; + border: 1px solid black; + font: 10px sans-serif; + margin-bottom: 10px; + } + .container > * { + background: lightgray; + } + + .fakeAnonWrapper { + background: none; + } + .fakeAnonWrapper > * { + background: lightgray; + } + .table { + display: table; + } + </style> +</head> +<body> +<!-- We use an explicit div (with class "fakeAnonWrapper") here, to match the + anonymous div that the testcase is expected to generate around contiguous + runs of inline content. --> +<div class="container"> + <div class="fakeAnonWrapper"> + a + <i>i</i><img src="bogus"><img src="bogus" alt="alt"> + <canvas height="5" width="5"></canvas> + <video height="5" width="5"></video> + <div style="display:inline-block">ib</div> + <div style="display:inline-table">it</div> + z + </div> + <div>block</div> + <div>block</div> +</div> + +<div class="container"> + <div>block</div> + <div class="fakeAnonWrapper"> + a + <i>i</i><img src="bogus"><img src="bogus" alt="alt"> + <canvas height="5" width="5"></canvas> + <video height="5" width="5"></video> + <div style="display:inline-block">ib</div> + <div style="display:inline-table">it</div> + z + </div> + <div>block</div> +</div> + +<div class="container"> + <div>block</div> + <div>block</div> + <div class="fakeAnonWrapper"> + a + <i>i</i><img src="bogus"><img src="bogus" alt="alt"> + <canvas height="5" width="5"></canvas> + <video height="5" width="5"></video> + <div style="display:inline-block">ib</div> + <div style="display:inline-table">it</div> + z + </div> +</div> + +<!-- We use explicit divs here for each anonymous wrapper-box that the testcase + is expected to produce (with class "fakeAnonWrapper", and also "table" if + it's expected to be a table wrapper) --> +<div class="container"> + <div class="fakeAnonWrapper">a</div> + <div class="fakeAnonWrapper table"> + <div style="display: table-cell">tc</div> + <div style="display: table-cell">tc</div> + </div> + <div class="fakeAnonWrapper">b</div> + <div class="fakeAnonWrapper table"> + <div style="display: table-row">tr</div> + <div style="display: table-cell">tc</div> + </div> + <div class="fakeAnonWrapper">c</div> + <div class="fakeAnonWrapper table"> + <div style="display: table-row">tr</div> + <div style="display: table-row-group">trg</div> + </div> + <div class="fakeAnonWrapper">d</div> + <table><tbody><tr><td>t</td></tr></tbody></table> + <div class="fakeAnonWrapper">e</div> +</div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-1a.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1a.html new file mode 100644 index 000000000..cb6d2c8d3 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1a.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> +<head> + <title> + Test for contiguous inline content getting wrapped in a single block, + inside of -webkit-box. + </title> + <style> + .container { + display: -webkit-box; + -webkit-box-pack: justify; + width: 300px; + border: 1px solid black; + font: 10px sans-serif; + margin-bottom: 10px; + } + .container > * { + background: lightgray; + } + </style> +</head> +<body> +<!-- The following containers each have a bunch of contiguous inline-level + content. In each case, all of the inline content ("a" through "z") should + get wrapped into a single anonymous block. --> +<div class="container"> + a + <i>i</i><img src="bogus"><img src="bogus" alt="alt"> + <canvas height="5" width="5"></canvas> + <video height="5" width="5"></video> + <div style="display:inline-block">ib</div> + <div style="display:inline-table">it</div> + z + <div>block</div> + <div>block</div> +</div> + +<div class="container"> + <div>block</div> + a + <i>i</i><img src="bogus"><img src="bogus" alt="alt"> + <canvas height="5" width="5"></canvas> + <video height="5" width="5"></video> + <div style="display:inline-block">ib</div> + <div style="display:inline-table">it</div> + z + <div>block</div> +</div> + +<div class="container"> + <div>block</div> + <div>block</div> + a + <i>i</i><img src="bogus"><img src="bogus" alt="alt"> + <canvas height="5" width="5"></canvas> + <video height="5" width="5"></video> + <div style="display:inline-block">ib</div> + <div style="display:inline-table">it</div> + z +</div> + +<!-- This container tests how flex items are formed when table parts are placed + directly inside of a -webkit-box, alongside inline-level content. + (Table-fixup should produce an anonymous table around each contiguous run + of table-parts, and we should get an anonymous block around each piece of + raw text.) --> +<div class="container"> + a + <div style="display: table-cell">tc</div> + <div style="display: table-cell">tc</div> + b + <div style="display: table-row">tr</div> + <div style="display: table-cell">tc</div> + c + <div style="display: table-row">tr</div> + <div style="display: table-row-group">trg</div> + d + <table><tbody><tr><td>t</td></tr></tbody></table> + e +</div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-1b.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1b.html new file mode 100644 index 000000000..2a700e61e --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-1b.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> +<head> + <title> + Test for contiguous inline content getting wrapped in a single block, + inside of -webkit-box with "overflow:hidden". + </title> + <style> + .container { + display: -webkit-box; + overflow: hidden; + -webkit-box-pack: justify; + width: 300px; + border: 1px solid black; + font: 10px sans-serif; + margin-bottom: 10px; + } + .container > * { + background: lightgray; + } + </style> +</head> +<body> +<!-- The following containers each have a bunch of contiguous inline-level + content. In each case, all of the inline content ("a" through "z") should + get wrapped into a single anonymous block. --> +<div class="container"> + a + <i>i</i><img src="bogus"><img src="bogus" alt="alt"> + <canvas height="5" width="5"></canvas> + <video height="5" width="5"></video> + <div style="display:inline-block">ib</div> + <div style="display:inline-table">it</div> + z + <div>block</div> + <div>block</div> +</div> + +<div class="container"> + <div>block</div> + a + <i>i</i><img src="bogus"><img src="bogus" alt="alt"> + <canvas height="5" width="5"></canvas> + <video height="5" width="5"></video> + <div style="display:inline-block">ib</div> + <div style="display:inline-table">it</div> + z + <div>block</div> +</div> + +<div class="container"> + <div>block</div> + <div>block</div> + a + <i>i</i><img src="bogus"><img src="bogus" alt="alt"> + <canvas height="5" width="5"></canvas> + <video height="5" width="5"></video> + <div style="display:inline-block">ib</div> + <div style="display:inline-table">it</div> + z +</div> + +<!-- This container tests how flex items are formed when table parts are placed + directly inside of a -webkit-box, alongside inline-level content. + (Table-fixup should produce an anonymous table around each contiguous run + of table-parts, and we should get an anonymous block around each piece of + raw text.) --> +<div class="container"> + a + <div style="display: table-cell">tc</div> + <div style="display: table-cell">tc</div> + b + <div style="display: table-row">tr</div> + <div style="display: table-cell">tc</div> + c + <div style="display: table-row">tr</div> + <div style="display: table-row-group">trg</div> + d + <table><tbody><tr><td>t</td></tr></tbody></table> + e +</div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-2-ref.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-2-ref.html new file mode 100644 index 000000000..d220271d5 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-2-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title> + Reference Case + </title> + <style> + .container { + display: flex; + justify-content: space-between; + width: 300px; + border: 1px solid black; + font: 10px sans-serif; + } + span { + background: lightgray; + } + </style> +</head> +<body> +<!-- We use an explicit div here, to match the anonymous div that the testcase + is expected to generate around contiguous runs of inline content. --> +<div class="container"> + <div> + raw text + <span>start</span> + </div> + <div>BLOCK</div> + <div> + <span>end</span> + raw text + </div> +</div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-2.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-2.html new file mode 100644 index 000000000..1684a60b6 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-2.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title> + Test for how block-in-inline splits behave inside of -webkit-box. + </title> + <style> + .container { + display: -webkit-box; + -webkit-box-pack: justify; + width: 300px; + border: 1px solid black; + font: 10px sans-serif; + } + .container > * { + background: lightgray; + } + </style> +</head> +<body> +<div class="container"> + raw text + <span>start<div>BLOCK</div>end</span> + raw text +</div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-3-ref.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-3-ref.html new file mode 100644 index 000000000..7e098f9ec --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-3-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title> + Reference Case + </title> + <style> + .container { + display: flex; + justify-content: space-between; + width: 300px; + border: 1px solid black; + } + .wspWrapper { + white-space: pre; + } + </style> +</head> +<body> +<!-- We use an explicit div here, to match the anonymous div that the testcase + is expected to generate around the whitespace. --> +<div class="container"> + <div>a</div> + <div class="wspWrapper"> </div> + <div>b</div> + <div>c</div> +</div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-anon-flex-items-3.html b/layout/reftests/webkit-box/webkit-box-anon-flex-items-3.html new file mode 100644 index 000000000..9a355f146 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-anon-flex-items-3.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title> + Test for whether whitespace gets wrapped in an anonymous box, + inside of -webkit-box. + </title> + <style> + .container { + display: -webkit-box; + -webkit-box-pack: justify; + width: 300px; + border: 1px solid black; + white-space: pre; + } + </style> +</head> +<body> + <!-- Note the space characters between the first and second divs here: --> + <div class="container"><div>a</div> <div>b</div><div>c</div></div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-direction-1-ref.html b/layout/reftests/webkit-box/webkit-box-direction-1-ref.html new file mode 100644 index 000000000..4ef84affa --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-direction-1-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Reference + </title> + <style> + .box { + display: flex; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + } + .box > *:nth-child(2) { + background: salmon; + } + + .rtl { direction: rtl; } + + .horizNormal { + flex-direction: row; + } + .horizReverse { + flex-direction: row-reverse; + } + .vertNormal { + flex-direction: column; + } + .vertReverse { + flex-direction: column-reverse; + } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' --> + <div class="box horizNormal"> + <div>a</div><div>b</div> + </div> + <div class="box horizReverse"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' --> + <div class="box horizNormal rtl"> + <div>a</div><div>b</div> + </div> + <div class="box horizReverse rtl"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' --> + <div class="box vertNormal"> + <div>a</div><div>b</div> + </div> + <div class="box vertReverse"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' --> + <div class="box vertNormal rtl"> + <div>a</div><div>b</div> + </div> + <div class="box vertReverse rtl"> + <div>a</div><div>b</div> + </div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-direction-1.html b/layout/reftests/webkit-box/webkit-box-direction-1.html new file mode 100644 index 000000000..ca45019be --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-direction-1.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: "-webkit-box-direction" property + in a -webkit-box with default writing-mode + </title> + <style> + .box { + display: -webkit-box; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + } + .box > *:nth-child(2) { + background: salmon; + } + + .rtl { direction: rtl; } + + .horizNormal { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + } + .horizReverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + } + .vertNormal { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + } + .vertReverse { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' --> + <div class="box horizNormal"> + <div>a</div><div>b</div> + </div> + <div class="box horizReverse"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' --> + <div class="box horizNormal rtl"> + <div>a</div><div>b</div> + </div> + <div class="box horizReverse rtl"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' --> + <div class="box vertNormal"> + <div>a</div><div>b</div> + </div> + <div class="box vertReverse"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' --> + <div class="box vertNormal rtl"> + <div>a</div><div>b</div> + </div> + <div class="box vertReverse rtl"> + <div>a</div><div>b</div> + </div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-direction-2-ref.html b/layout/reftests/webkit-box/webkit-box-direction-2-ref.html new file mode 100644 index 000000000..8a2a0f6a1 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-direction-2-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Reference + </title> + <style> + .box { + display: flex; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + margin: 2px 4px 6px 8px; + border: 1px solid blue; + padding: 4px 3px 2px 1px; + } + .box > *:nth-child(2) { + background: salmon; + margin: 9px 3px 7px 5px; + border: 2px solid purple; + padding: 6px 7px 8px 9px; + } + + .rtl { direction: rtl; } + + .horizNormal { + flex-direction: row; + } + .horizReverse { + flex-direction: row-reverse; + } + .vertNormal { + flex-direction: column; + } + .vertReverse { + flex-direction: column-reverse; + } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' --> + <div class="box horizNormal"> + <div>a</div><div>b</div> + </div> + <div class="box horizReverse"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' --> + <div class="box horizNormal rtl"> + <div>a</div><div>b</div> + </div> + <div class="box horizReverse rtl"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' --> + <div class="box vertNormal"> + <div>a</div><div>b</div> + </div> + <div class="box vertReverse"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' --> + <div class="box vertNormal rtl"> + <div>a</div><div>b</div> + </div> + <div class="box vertReverse rtl"> + <div>a</div><div>b</div> + </div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-direction-2.html b/layout/reftests/webkit-box/webkit-box-direction-2.html new file mode 100644 index 000000000..287e5e1e2 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-direction-2.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: "-webkit-box-direction" property + in a -webkit-box with default writing-mode + and some margin/border/padding on flex items + </title> + <style> + .box { + display: -webkit-box; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + margin: 2px 4px 6px 8px; + border: 1px solid blue; + padding: 4px 3px 2px 1px; + } + .box > *:nth-child(2) { + background: salmon; + margin: 9px 3px 7px 5px; + border: 2px solid purple; + padding: 6px 7px 8px 9px; + } + + .rtl { direction: rtl; } + + .horizNormal { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + } + .horizReverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + } + .vertNormal { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + } + .vertReverse { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' --> + <div class="box horizNormal"> + <div>a</div><div>b</div> + </div> + <div class="box horizReverse"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' --> + <div class="box horizNormal rtl"> + <div>a</div><div>b</div> + </div> + <div class="box horizReverse rtl"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' --> + <div class="box vertNormal"> + <div>a</div><div>b</div> + </div> + <div class="box vertReverse"> + <div>a</div><div>b</div> + </div> + + <br> + + <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' --> + <div class="box vertNormal rtl"> + <div>a</div><div>b</div> + </div> + <div class="box vertReverse rtl"> + <div>a</div><div>b</div> + </div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-flex-1-ref.html b/layout/reftests/webkit-box/webkit-box-flex-1-ref.html new file mode 100644 index 000000000..646d6a54b --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-flex-1-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> + <title> + CSS Reference + </title> + <style> + .box { + display: flex; + border: 1px solid black; + margin: 5px 20px; + width: 100px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > * { + /* Modern flexbox (used in this reference case) allows everything to + shrink by default, but -webkit-box does not, so we have to turn that + feature off to make an accurate reference case. */ + flex-shrink: 0; + } + + .box > *:nth-child(1) { background: turquoise; } + .box > *:nth-child(2) { background: salmon; } + .box > *:nth-child(3) { background: yellow; } + + .huge { width: 120px } + .bf1 { flex: 1 1 auto } + .bf3 { flex: 3 3 auto } + + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-flex --> + <div class="box"> + <div>a</div> + </div> + + <div class="box"> + <div>a</div><div>b</div> + </div> + + <div class="box"> + <div class="huge">a</div> + </div> + + <br> + + <!-- SECOND ROW: One item has nonzero -webkit-box-flex --> + <div class="box"> + <div class="bf1">a</div> + </div> + + <div class="box"> + <div>a</div><div class="bf1">b</div> + </div> + + <div class="box"> + <div class="huge bf1">a</div> + </div> + + <br> + + <!-- THIRD ROW: Two items have nonzero (equal) -webkit-box-flex --> + <div class="box"> + <div class="bf1">a</div><div class="bf1">b</div> + </div> + + <div class="box"> + <div class="bf1">a</div><div>b</div><div class="bf1">c</div> + </div> + + <div class="box"> + <div class="huge bf1">a</div> + <div>b</div> + <div class="huge bf1">c</div> + </div> + + <br> + + <!-- FOURTH ROW: Non-equal nonzero -webkit-box-flex values --> + <div class="box"> + <div class="bf1">a</div><div class="bf3">b</div> + </div> + + <div class="box"> + <div class="bf3">a</div><div class="bf1">b</div> + </div> + + <div class="box"> + <div class="huge bf1">a</div> + <div class="huge bf3">b</div> + </div> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-flex-1.html b/layout/reftests/webkit-box/webkit-box-flex-1.html new file mode 100644 index 000000000..10f2c63e3 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-flex-1.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: "-webkit-box-flex" in a "display: -webkit-box" container + </title> + <style> + .box { + display: -webkit-box; + border: 1px solid black; + margin: 5px 20px; + width: 100px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { background: turquoise; } + .box > *:nth-child(2) { background: salmon; } + .box > *:nth-child(3) { background: yellow; } + + .huge { width: 120px } + .bf1 { -webkit-box-flex: 1 } + .bf3 { -webkit-box-flex: 3 } + + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-flex --> + <div class="box"> + <div>a</div> + </div> + + <div class="box"> + <div>a</div><div>b</div> + </div> + + <div class="box"> + <div class="huge">a</div> + </div> + + <br> + + <!-- SECOND ROW: One item has nonzero -webkit-box-flex --> + <div class="box"> + <div class="bf1">a</div> + </div> + + <div class="box"> + <div>a</div><div class="bf1">b</div> + </div> + + <div class="box"> + <div class="huge bf1">a</div> + </div> + + <br> + + <!-- THIRD ROW: Two items have nonzero (equal) -webkit-box-flex --> + <div class="box"> + <div class="bf1">a</div><div class="bf1">b</div> + </div> + + <div class="box"> + <div class="bf1">a</div><div>b</div><div class="bf1">c</div> + </div> + + <div class="box"> + <div class="huge bf1">a</div> + <div>b</div> + <div class="huge bf1">c</div> + </div> + + <br> + + <!-- FOURTH ROW: Non-equal nonzero -webkit-box-flex values --> + <div class="box"> + <div class="bf1">a</div><div class="bf3">b</div> + </div> + + <div class="box"> + <div class="bf3">a</div><div class="bf1">b</div> + </div> + + <div class="box"> + <div class="huge bf1">a</div> + <div class="huge bf3">b</div> + </div> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-1-ref.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-1-ref.html new file mode 100644 index 000000000..e69c4d37a --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-1-ref.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 Reference + </title> + <style> + .box { + display: flex; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .box > * { + border: 1px dotted purple; + } + </style> +</head> +<body> + <!-- First row: initial value mixed with single specified values --> + <div class="box"> + <div>*</div> + <div class="bogOne">1a</div> + <div>*</div> + <div class="bogOne">1b</div> + <div>*</div> + </div> + + <div class="box"> + <div>*</div> + <div>*</div> + <div>*</div> + <div class="bogTwo">2a</div> + <div class="bogTwo">2b</div> + </div> + + <div class="box"> + <div>*</div> + <div>*</div> + <div>*</div> + <div class="bogNine">9a</div> + <div class="bogNine">9b</div> + </div> + + <br> + + <!-- Second row: various mixes of specified values --> + <div class="box"> + <div>*</div> + <div class="bogOne">1</div> + <div class="bogTwo">2</div> + <div class="bogNine">9</div> + </div> + + <div class="box"> + <div class="bogOne">1</div> + <div>*</div> + <div class="bogTwo">2</div> + <div class="bogNine">9</div> + </div> + + <div class="box"> + <div class="bogOne">1</div> + <div>*</div> + <div class="bogTwo">2a</div> + <div class="bogTwo">2b</div> + <div class="bogNine">9</div> + </div> + + <div class="box"> + <div class="bogOne">1</div> + <div class="bogTwo">2a</div> + <div class="bogTwo">2b</div> + <div class="bogNine">9a</div> + <div class="bogNine">9b</div> + </div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-1.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-1.html new file mode 100644 index 000000000..5b48dfe83 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-1.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-box-orient inside a -webkit-box + </title> + <style> + .box { + display: -webkit-box; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .box > * { + border: 1px dotted purple; + } + + .bogOne { -webkit-box-ordinal-group: 1; } + .bogTwo { -webkit-box-ordinal-group: 2; } + .bogNine { -webkit-box-ordinal-group: 9; } + </style> +</head> +<body> + <!-- First row: initial value mixed with single specified values --> + <div class="box"> + <div>*</div> + <div class="bogOne">1a</div> + <div>*</div> + <div class="bogOne">1b</div> + <div>*</div> + </div> + + <div class="box"> + <div>*</div> + <div class="bogTwo">2a</div> + <div>*</div> + <div class="bogTwo">2b</div> + <div>*</div> + </div> + + <div class="box"> + <div>*</div> + <div class="bogNine">9a</div> + <div>*</div> + <div class="bogNine">9b</div> + <div>*</div> + </div> + + <br> + + <!-- Second row: various mixes of specified values --> + <div class="box"> + <div>*</div> + <div class="bogOne">1</div> + <div class="bogTwo">2</div> + <div class="bogNine">9</div> + </div> + + <div class="box"> + <div class="bogNine">9</div> + <div class="bogTwo">2</div> + <div class="bogOne">1</div> + <div>*</div> + </div> + + <div class="box"> + <div class="bogTwo">2a</div> + <div class="bogNine">9</div> + <div class="bogTwo">2b</div> + <div class="bogOne">1</div> + <div>*</div> + </div> + + <div class="box"> + <div class="bogTwo">2a</div> + <div class="bogNine">9a</div> + <div class="bogNine">9b</div> + <div class="bogTwo">2b</div> + <div class="bogOne">1</div> + </div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-2-ref.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-2-ref.html new file mode 100644 index 000000000..c548d5e2d --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-2-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Reference + </title> + <style> + .box { + display: flex; + border: 1px solid black; + margin: 5px 20px; + } + + .box > * { + border: 1px dotted purple; + } + </style> +</head> +<body> + <div class="box"> + <div>1</div> + <div>0</div> + </div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-2.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-2.html new file mode 100644 index 000000000..418555037 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-box-orient:0 inside a -webkit-box + </title> + <style> + .box { + display: -webkit-box; + border: 1px solid black; + margin: 5px 20px; + } + + .box > * { + border: 1px dotted purple; + } + + .bogZero { -webkit-box-ordinal-group: 0; } + .bogOne { -webkit-box-ordinal-group: 1; } + </style> +</head> +<body> + <!-- -webkit-box-ordinal-group is strictly positive in Blink & WebKit. 0 is + rejected as an invalid value. So, the bogZero element below should + end up with the initial value (1) and should *not* be sorted out of its + DOM position in the final rendering. --> + <div class="box"> + <div class="bogOne">1</div> + <div class="bogZero">0</div> + </div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-3-ref.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-3-ref.html new file mode 100644 index 000000000..2129070ac --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-3-ref.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 Reference + </title> + <style> + .box { + display: flex; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .box > * { + border: 1px dotted purple; + } + </style> +</head> +<body> + <div class="box"> + <div>*</div> + <div>10</div> + <div>A</div> + </div> + <div class="box"> + <div>*</div> + <div>10</div> + <div>B</div> + </div> + <div class="box"> + <div>*</div> + <div>10</div> + <div>C</div> + </div> + + <br> + + <div class="box"> + <div>*</div> + <div>10</div> + <div>D</div> + </div> + <div class="box"> + <div>*</div> + <div>10</div> + <div>E</div> + </div> + <div class="box"> + <div>*</div> + <div>10</div> + <div>F</div> + </div> + + <br> + + <div class="box"> + <div>A</div> + <div>B</div> + </div> + <div class="box"> + <div>A</div> + <div>C</div> + </div> + <div class="box"> + <div>A</div> + <div>D</div> + </div> + <div class="box"> + <div>A</div> + <div>E</div> + </div> + <div class="box"> + <div>A</div> + <div>F</div> + </div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-ordinal-group-3.html b/layout/reftests/webkit-box/webkit-box-ordinal-group-3.html new file mode 100644 index 000000000..15246bc68 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-ordinal-group-3.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 Test: -webkit-box-orient with huge values inside a -webkit-box + </title> + <style> + .box { + display: -webkit-box; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + } + br { clear: both; } + + .box > * { + border: 1px dotted purple; + } + + .bogTen { -webkit-box-ordinal-group: 10; } + .bogHugeA { -webkit-box-ordinal-group: 2147483646; /* 2^31 - 2 */ } + .bogHugeB { + /* NOTE: This is INT32_MAX, so we may not be able to distinguish this + from anything larger than it (if we represent it internally in a + 32-bit signed integer). However, it's still worth testing larger + values against e.g. 10 to be sure they don't overflow into + negative territory. */ + -webkit-box-ordinal-group: 2147483647; /* 2^31 - 1 */ } + + .bogHugeC { -webkit-box-ordinal-group: 4294967294; /* 2^32 - 2 */ } + .bogHugeD { -webkit-box-ordinal-group: 4294967295; /* 2^32 - 1 */ } + .bogHugeE { -webkit-box-ordinal-group: 4294967296; /* 2^32 */ } + .bogHugeF { -webkit-box-ordinal-group: 8589934592; /* 2^33 */ } + </style> +</head> +<body> + <!-- Test each huge value to see if it sorts after smaller values. + (The divs with huge values should sort to the right.) --> + <div class="box"> + <div class="bogHugeA">A</div> + <div class="bogTen">10</div> + <div>*</div> + </div> + <div class="box"> + <div class="bogHugeB">B</div> + <div class="bogTen">10</div> + <div>*</div> + </div> + <div class="box"> + <div class="bogHugeC">C</div> + <div class="bogTen">10</div> + <div>*</div> + </div> + + <br> + + <div class="box"> + <div class="bogHugeD">D</div> + <div class="bogTen">10</div> + <div>*</div> + </div> + <div class="box"> + <div class="bogHugeE">E</div> + <div class="bogTen">10</div> + <div>*</div> + </div> + <div class="box"> + <div class="bogHugeE">F</div> + <div class="bogTen">10</div> + <div>*</div> + </div> + + <br> + + <!-- Test that 'bogHugeA' sorts to the left of larger huge values. It's + less than INT32_MAX, so it's reasonable to expect that it can be + compared correctly against (possibly-clamped) larger values) --> + <div class="box"> + <div class="bogHugeB">B</div> + <div class="bogHugeA">A</div> + </div> + <div class="box"> + <div class="bogHugeC">C</div> + <div class="bogHugeA">A</div> + </div> + <div class="box"> + <div class="bogHugeD">D</div> + <div class="bogHugeA">A</div> + </div> + <div class="box"> + <div class="bogHugeE">E</div> + <div class="bogHugeA">A</div> + </div> + <div class="box"> + <div class="bogHugeF">F</div> + <div class="bogHugeA">A</div> + </div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html b/layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html new file mode 100644 index 000000000..1fe5090af --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html @@ -0,0 +1,150 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Reference + </title> + <style> + .box { + display: flex; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + /* auto width */ + height: 1em; + } + .box > *:nth-child(2) { + background: salmon; + font-size: 50%; + width: 2em; + /* auto height */ + } + + .bpstart { justify-content: flex-start; } + .bpcenter { justify-content: center; } + .bpend { justify-content: flex-end; } + .bpjustify { justify-content: space-between; } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-pack --> + <!-- intrinsically sized --> + <div class="box"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- SECOND ROW: -webkit-box-pack: start --> + <!-- intrinsically sized --> + <div class="box bpstart"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpstart" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpstart" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpstart" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- THIRD ROW: -webkit-box-pack: center --> + <!-- intrinsically sized --> + <div class="box bpcenter"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpcenter" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpcenter" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpcenter" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FOURTH ROW: -webkit-box-pack: end --> + <!-- intrinsically sized --> + <div class="box bpend"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpend" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpend" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpend" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FIFTH ROW: -webkit-box-pack: justify --> + <!-- intrinsically sized --> + <div class="box bpjustify"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpjustify" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpjustify" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpjustify" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-pack-horiz-1a.html b/layout/reftests/webkit-box/webkit-box-pack-horiz-1a.html new file mode 100644 index 000000000..8a1330154 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-pack-horiz-1a.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: horizontally-oriented "display: -webkit-box" container, + with all the various -webkit-box-pack values. + </title> + <style> + .box { + display: -webkit-box; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + /* auto width */ + height: 1em; + } + .box > *:nth-child(2) { + background: salmon; + font-size: 50%; + width: 2em; + /* auto height */ + } + + .bpstart { -webkit-box-pack: start; } + .bpcenter { -webkit-box-pack: center; } + .bpend { -webkit-box-pack: end; } + .bpjustify { -webkit-box-pack: justify; } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-pack --> + <!-- intrinsically sized --> + <div class="box"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- SECOND ROW: -webkit-box-pack: start --> + <!-- intrinsically sized --> + <div class="box bpstart"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpstart" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpstart" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpstart" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- THIRD ROW: -webkit-box-pack: center --> + <!-- intrinsically sized --> + <div class="box bpcenter"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpcenter" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpcenter" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpcenter" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FOURTH ROW: -webkit-box-pack: end --> + <!-- intrinsically sized --> + <div class="box bpend"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpend" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpend" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpend" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FIFTH ROW: -webkit-box-pack: justify --> + <!-- intrinsically sized --> + <div class="box bpjustify"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpjustify" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpjustify" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpjustify" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-pack-horiz-1b.html b/layout/reftests/webkit-box/webkit-box-pack-horiz-1b.html new file mode 100644 index 000000000..0332ab12e --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-pack-horiz-1b.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: horizontally-oriented "display: -webkit-box" container, + with all the various -webkit-box-pack values. + </title> + <style> + .box { + display: -webkit-box; + -webkit-box-orient: horizontal; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + /* auto width */ + height: 1em; + } + .box > *:nth-child(2) { + background: salmon; + font-size: 50%; + width: 2em; + /* auto height */ + } + + .bpstart { -webkit-box-pack: start; } + .bpcenter { -webkit-box-pack: center; } + .bpend { -webkit-box-pack: end; } + .bpjustify { -webkit-box-pack: justify; } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-pack --> + <!-- intrinsically sized --> + <div class="box"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- SECOND ROW: -webkit-box-pack: start --> + <!-- intrinsically sized --> + <div class="box bpstart"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpstart" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpstart" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpstart" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- THIRD ROW: -webkit-box-pack: center --> + <!-- intrinsically sized --> + <div class="box bpcenter"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpcenter" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpcenter" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpcenter" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FOURTH ROW: -webkit-box-pack: end --> + <!-- intrinsically sized --> + <div class="box bpend"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpend" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpend" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpend" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FIFTH ROW: -webkit-box-pack: justify --> + <!-- intrinsically sized --> + <div class="box bpjustify"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpjustify" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpjustify" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpjustify" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-pack-vert-1-ref.html b/layout/reftests/webkit-box/webkit-box-pack-vert-1-ref.html new file mode 100644 index 000000000..ed8fe20b3 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-pack-vert-1-ref.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Reference + </title> + <style> + .box { + display: flex; + flex-direction: column; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + /* auto width */ + height: 1em; + } + .box > *:nth-child(2) { + background: salmon; + font-size: 50%; + width: 2em; + /* auto height */ + } + + .bpstart { justify-content: flex-start; } + .bpcenter { justify-content: center; } + .bpend { justify-content: flex-end; } + .bpjustify { justify-content: space-between; } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-pack --> + <!-- intrinsically sized --> + <div class="box"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- SECOND ROW: -webkit-box-pack: start --> + <!-- intrinsically sized --> + <div class="box bpstart"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpstart" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpstart" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpstart" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- THIRD ROW: -webkit-box-pack: center --> + <!-- intrinsically sized --> + <div class="box bpcenter"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpcenter" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpcenter" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpcenter" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FOURTH ROW: -webkit-box-pack: end --> + <!-- intrinsically sized --> + <div class="box bpend"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpend" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpend" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpend" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FIFTH ROW: -webkit-box-pack: justify --> + <!-- intrinsically sized --> + <div class="box bpjustify"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpjustify" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpjustify" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpjustify" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-box-pack-vert-1.html b/layout/reftests/webkit-box/webkit-box-pack-vert-1.html new file mode 100644 index 000000000..41b527343 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-box-pack-vert-1.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: vertically-oriented "display: -webkit-box" container, + with all the various -webkit-box-pack values. + </title> + <style> + .box { + display: -webkit-box; + -webkit-box-orient: vertical; + border: 1px solid black; + margin: 5px 20px; + float: left; /* For testing in "rows" */ + font: 10px serif; + } + .box > *:nth-child(1) { + background: turquoise; + /* auto width */ + height: 1em; + } + .box > *:nth-child(2) { + background: salmon; + font-size: 50%; + width: 2em; + /* auto height */ + } + + .bpstart { -webkit-box-pack: start; } + .bpcenter { -webkit-box-pack: center; } + .bpend { -webkit-box-pack: end; } + .bpjustify { -webkit-box-pack: justify; } + br { clear: both; } + </style> +</head> +<body> + <!-- FIRST ROW: Default -webkit-box-pack --> + <!-- intrinsically sized --> + <div class="box"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- SECOND ROW: -webkit-box-pack: start --> + <!-- intrinsically sized --> + <div class="box bpstart"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpstart" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpstart" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpstart" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- THIRD ROW: -webkit-box-pack: center --> + <!-- intrinsically sized --> + <div class="box bpcenter"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpcenter" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpcenter" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpcenter" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FOURTH ROW: -webkit-box-pack: end --> + <!-- intrinsically sized --> + <div class="box bpend"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpend" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpend" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpend" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + + <!-- FIFTH ROW: -webkit-box-pack: justify --> + <!-- intrinsically sized --> + <div class="box bpjustify"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra width --> + <div class="box bpjustify" style="width: 36px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height --> + <div class="box bpjustify" style="height: 40px"> + <div>a</div><div>b</div> + </div> + + <!-- explicit size, extra height and width --> + <div class="box bpjustify" style="width: 36px; height: 40px"> + <div>a</div><div>b</div> + </div> + <br> + +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-display-values-1-ref.html b/layout/reftests/webkit-box/webkit-display-values-1-ref.html new file mode 100644 index 000000000..b3cb4b443 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-display-values-1-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Reference + </title> + <style> + div { + border: 1px solid black; + width: 50px; + height: 20px; + justify-content: center; + } + </style> +</head> +<body> + <div style="display: flex;">a</div> + <div style="display: flex;">b</div> + <div style="display: flex;">c</div> + <br> + <div style="display: inline-flex;">d</div> + <div style="display: inline-flex;">e</div> + <div style="display: inline-flex;">f</div> +</body> +</html> diff --git a/layout/reftests/webkit-box/webkit-display-values-1.html b/layout/reftests/webkit-box/webkit-display-values-1.html new file mode 100644 index 000000000..f2477b361 --- /dev/null +++ b/layout/reftests/webkit-box/webkit-display-values-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title> + CSS Test: -webkit-box & -webkit-inline-box as "display" values + </title> + <style> + div { + border: 1px solid black; + width: 50px; + height: 20px; + /* Lets us see whether 'display:-webkit-box' styling worked:*/ + -webkit-box-pack: center; + } + </style> +</head> +<body> + <!-- -webkit-box, possibly mixed with -moz-box: --> + <div style="display: -webkit-box;">a</div> + + <div style="display: -webkit-box; + display: -moz-box;">b</div> + + <div style="display: -moz-box; + display: -webkit-box;">c</div> + <br> + + <!-- -webkit-inline-box, possibly mixed with -moz-inline-box: --> + <div style="display: -webkit-inline-box;">d</div> + + <div style="display: -webkit-inline-box; + display: -moz-inline-box;">e</div> + + <div style="display: -moz-inline-box; + display: -webkit-inline-box;">f</div> +</body> +</html> |