WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
[patch]
Patch
bug-221484-20210205185120.patch (text/plain), 2.31 MB, created by
Sergio Villar Senin
on 2021-02-05 09:51:48 PST
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Sergio Villar Senin
Created:
2021-02-05 09:51:48 PST
Size:
2.31 MB
patch
obsolete
>Subversion Revision: 272408 >diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog >index 42e1085b49c8abad71d0f3117df4f4001b060674..71f6316de641bf912388cfde01d035a34380134c 100644 >--- a/LayoutTests/ChangeLog >+++ b/LayoutTests/ChangeLog >@@ -1,3 +1,15 @@ >+2021-02-05 Sergio Villar Senin <svillar@igalia.com> >+ >+ [css-flexbox] Import & update latest WPT flexbox tests >+ https://bugs.webkit.org/show_bug.cgi?id=221484 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ Sync'ed our local copy to latest upstream data. >+ >+ * TestExpectations: Added new failing tests with bugs. >+ * platform/glib/TestExpectations: Removed a couple of tests that are working fine after import. >+ > 2021-02-05 Devin Rousso <drousso@apple.com> > > Add intermediate volume icon states between "mute" and "max" >diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog >index 7aac667daf731915c3d6270b8908fe871c8de3af..22199d01197e7f15091416b7120b3f4814d4a23e 100644 >--- a/LayoutTests/imported/w3c/ChangeLog >+++ b/LayoutTests/imported/w3c/ChangeLog >@@ -1,3 +1,703 @@ >+2021-02-05 Sergio Villar Senin <svillar@igalia.com> >+ >+ [css-flexbox] Import & update latest WPT flexbox tests >+ https://bugs.webkit.org/show_bug.cgi?id=221484 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ * resources/import-expectations.json: >+ * resources/resource-files.json: >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr.html. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-rtl-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-rtl.html. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-ltr.html. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-rtl-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-rtl.html. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-ltr.html. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-rtl-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-rtl.html. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-descendent-001-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-descendent-001-expected.txt. >+ * web-platform-tests/css/css-flexbox/abspos/abspos-descendent-001.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-descendent-001.html. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/flexbox_absolute-atomic-expected.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_absolute-atomic-expected.html. >+ * web-platform-tests/css/css-flexbox/abspos/flexbox_absolute-atomic.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_absolute-atomic.html. >+ * web-platform-tests/css/css-flexbox/abspos/flexbox_inline-abspos-expected.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-abspos-expected.html. >+ * web-platform-tests/css/css-flexbox/abspos/flexbox_inline-abspos.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-abspos.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-001-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-001-expected.txt. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-001.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-001.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-002-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-002-expected.txt. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-002.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-002.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-003-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-003-expected.txt. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-003.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-003.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-004-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-004-expected.txt. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-004.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-004.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-005-expected.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-005-expected.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-005.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-005.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-006-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-006-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-006.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-006.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-007-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-007-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-007.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-007.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-008-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-008-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-008.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-008.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-009-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-009-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-009.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-009.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-010-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-010-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-010.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-010.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-011-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-011-expected.xht. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-011.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-011.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-012-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-012-expected.txt. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-012.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-012.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-013-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-013-expected.txt. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-013.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-013.html. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-014-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-014.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-015.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-001.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-002.html: Added. >+ * web-platform-tests/css/css-flexbox/abspos/w3c-import.log: Added. >+ * web-platform-tests/css/css-flexbox/align-baseline-expected.html: >+ * web-platform-tests/css/css-flexbox/align-content-horiz-001a-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/align-content-horiz-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/align-content-horiz-001b-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/align-content-horiz-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/align-content-horiz-002-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/align-content-horiz-002.html: Added. >+ * web-platform-tests/css/css-flexbox/align-content-vert-001a-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/align-content-vert-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/align-content-vert-001b-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/align-content-vert-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/align-content-vert-002-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/align-content-vert-002.html: Added. >+ * web-platform-tests/css/css-flexbox/align-content-wmvert-001-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/align-content-wmvert-001.html: Added. >+ * web-platform-tests/css/css-flexbox/align-content_center-expected.html: >+ * web-platform-tests/css/css-flexbox/align-content_flex-end-expected.html: >+ * web-platform-tests/css/css-flexbox/align-content_flex-start-expected.html: >+ * web-platform-tests/css/css-flexbox/align-content_space-around-expected.html: >+ * web-platform-tests/css/css-flexbox/align-content_space-between-expected.html: >+ * web-platform-tests/css/css-flexbox/align-content_stretch-expected.html: >+ * web-platform-tests/css/css-flexbox/align-items-007.html: >+ * web-platform-tests/css/css-flexbox/align-self-015-expected.html: >+ * web-platform-tests/css/css-flexbox/auto-margins-003-expected.html: >+ * web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-001-print-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-001-print.html: Added. >+ * web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-002-print-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-002-print.html: Added. >+ * web-platform-tests/css/css-flexbox/canvas-dynamic-change-001.html: >+ * web-platform-tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html: Added. >+ * web-platform-tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/css-flexbox-img-expand-evenly-expected.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-expected.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-expected.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-expected.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse-expected.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-reverse.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-expected.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse-expected.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row-wrap.html: >+ * web-platform-tests/css/css-flexbox/css-flexbox-row.html: >+ * web-platform-tests/css/css-flexbox/dynamic-baseline-change-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested.html: Added. >+ * web-platform-tests/css/css-flexbox/dynamic-baseline-change.html: Added. >+ * web-platform-tests/css/css-flexbox/dynamic-grid-flex-abspos-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/dynamic-grid-flex-abspos.html: Added. >+ * web-platform-tests/css/css-flexbox/fieldset-as-item-overflow-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/fieldset-as-item-overflow.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-018-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-018.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-item-compressible-001-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/flex-item-compressible-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-item-compressible-002-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/flex-item-compressible-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-item-contains-size-layout-001-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/flex-item-contains-size-layout-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-item-vertical-align-expected.html: >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-005.xht: >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-007.xht: >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-013.html: >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-025-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-025.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-027-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-027.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-028-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-028.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-030-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-030.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-size-003-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-size-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-005.xht: >+ * web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-013.html: >+ * web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-016-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-016.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-items-center-nested-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-items-center-nested-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-block-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-table-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-003-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-003.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-004-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-004.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-005-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-005.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-003-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-003.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-004-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-004.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-003-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-004-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-anonymous-items-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-anonymous-items-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001v-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001v-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-vert-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-iframe-horiz-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-img-horiz-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-textarea-horiz-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-video-horiz-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-column-row-gap-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-column-row-gap-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-column-row-gap-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-column-row-gap-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-column-row-gap-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-column-row-gap-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-column-row-gap-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-column-row-gap-004.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-004.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-005-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-005.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-006-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-definite-sizes-006.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-dyn-resize-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-dyn-resize-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-flow-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-flow-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-flow-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-flow-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-004-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001a-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001b-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-003-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-003.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-004-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-004.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-005-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-005.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002a-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002b-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002v-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003v-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-004-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-004.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-height-auto-004.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-min-width-auto-004.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-004.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-005-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-005.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-vert-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-vert-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-vert-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-vert-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-vert-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-vert-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-vert-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-vert-004.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-vert-005-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-overflow-vert-005.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-paint-ordering-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-paint-ordering-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-paint-ordering-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-paint-ordering-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-root-node-001a-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-root-node-001a.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-root-node-001b-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-root-node-001b.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-1-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-1.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-2-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-2.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-3-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-3.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-sizing-vert-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-sizing-vert-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-sizing-vert-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-sizing-vert-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-table-fixup-001-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-table-fixup-001.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001a-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001b-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-002-expected.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-002.xhtml: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-001.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-002.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-003.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-004-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-004.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-005-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-005.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-006-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-006.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-007-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-007.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-008-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-008.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-009-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-009.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-010-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-010.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-011-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-011.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-012-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-012.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-013-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-013.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-014-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-014.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-015-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-015.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-016-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox-writing-mode-016.html: Added. >+ * web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow-expected.html: Removed. >+ * web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow.html: >+ * web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2-expected.html: >+ * web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2.html: >+ * web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-expected.html: >+ * web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline.html: >+ * web-platform-tests/css/css-flexbox/flexible-order-expected.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/Flexible-order-expected.html. >+ * web-platform-tests/css/css-flexbox/flexible-order.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/Flexible-order.html. >+ * web-platform-tests/css/css-flexbox/gap-006-lr-expected.html: >+ * web-platform-tests/css/css-flexbox/gap-006-lr.html: >+ * web-platform-tests/css/css-flexbox/gap-006-ltr-expected.html: >+ * web-platform-tests/css/css-flexbox/gap-006-ltr.html: >+ * web-platform-tests/css/css-flexbox/gap-006-rl-expected.html: >+ * web-platform-tests/css/css-flexbox/gap-006-rl.html: >+ * web-platform-tests/css/css-flexbox/gap-006-rtl-expected.html: >+ * web-platform-tests/css/css-flexbox/gap-006-rtl.html: >+ * web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent-expected.txt: >+ * web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html: >+ * web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number-expected.txt: >+ * web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html: >+ * web-platform-tests/css/css-flexbox/grid-flex-item-005-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/grid-flex-item-005.html: Added. >+ * web-platform-tests/css/css-flexbox/grid-flex-item-006-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/grid-flex-item-006.html: Added. >+ * web-platform-tests/css/css-flexbox/height-percentage-with-dynamic-container-size-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/height-percentage-with-dynamic-container-size.html: Added. >+ * web-platform-tests/css/css-flexbox/justify-content-006-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/justify-content-006.html: Added. >+ * web-platform-tests/css/css-flexbox/ortho-table-item-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/ortho-table-item-001.html: Added. >+ * web-platform-tests/css/css-flexbox/percentage-max-height-002-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/percentage-max-height-002.html: Added. >+ * web-platform-tests/css/css-flexbox/percentage-max-height-003-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/percentage-max-height-003.html: Added. >+ * web-platform-tests/css/css-flexbox/percentage-size-quirks-002-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/percentage-size-quirks-002.html: Added. >+ * web-platform-tests/css/css-flexbox/position-absolute-scrollbar-freeze-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/position-absolute-scrollbar-freeze.html: Added. >+ * web-platform-tests/css/css-flexbox/position-relative-percentage-top-002-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/position-relative-percentage-top-002.html: Added. >+ * web-platform-tests/css/css-flexbox/position-relative-percentage-top-003-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/position-relative-percentage-top-003.html: Added. >+ * web-platform-tests/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html: >+ * web-platform-tests/css/css-flexbox/scrollbars-auto-min-content-sizing-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/scrollbars-auto-min-content-sizing.html: Added. >+ * web-platform-tests/css/css-flexbox/scrollbars-no-margin-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/scrollbars-no-margin.html: Added. >+ * web-platform-tests/css/css-flexbox/stretch-input-in-column-expected.html: >+ * web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002.html: Added. >+ * web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003.html: Added. >+ * web-platform-tests/css/css-flexbox/svg-root-as-flex-item-004-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/svg-root-as-flex-item-004.html: Added. >+ * web-platform-tests/css/css-flexbox/svg-root-as-flex-item-005-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/svg-root-as-flex-item-005.html: Added. >+ * web-platform-tests/css/css-flexbox/svg-root-as-flex-item-006-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/svg-root-as-flex-item-006.html: Added. >+ * web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-2-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-2.html: Added. >+ * web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3.html: Added. >+ * web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width.html: >+ * web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size-expected.xht: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size.html: Added. >+ * web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001.html: Added. >+ * web-platform-tests/css/css-flexbox/table-as-item-specified-width-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/table-as-item-specified-width.html: Added. >+ * web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size-expected.xht: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht. >+ * web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size.html: Added. >+ * web-platform-tests/css/css-flexbox/table-item-flex-percentage-width-expected.html: Added. >+ * web-platform-tests/css/css-flexbox/table-item-flex-percentage-width.html: Added. >+ * web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width-expected.txt: Added. >+ * web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width.html: Added. >+ * web-platform-tests/css/css-flexbox/w3c-import.log: >+ > 2021-02-04 Commit Queue <commit-queue@webkit.org> > > Unreviewed, reverting r272338. >diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations >index 202583becb1797e30a1587b901e2c7126ef12572..930ae7d96c9bfe5f3f03476b9ab3d5c3af9a663d 100644 >--- a/LayoutTests/TestExpectations >+++ b/LayoutTests/TestExpectations >@@ -1194,6 +1194,17 @@ webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-direction-row-reverse.h > webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-order.html [ ImageOnlyFailure ] > webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap-reverse.html [ ImageOnlyFailure ] > webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap.html [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/align-self-015.html [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/auto-margins-003.html [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/canvas-dynamic-change-001.html [ Failure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-img-expand-evenly.html [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flex-item-vertical-align.html [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001.html [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-002.html [ ImageOnlyFailure ] >+webkit.org/b/210243 imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks-002.html [ Failure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-no-margin.html [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/stretch-input-in-column.html [ ImageOnlyFailure ] > > # grid layout tests > imported/w3c/web-platform-tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html [ Pass Failure ] >@@ -3917,7 +3928,6 @@ webkit.org/b/210093 imported/w3c/web-platform-tests/css/css-flexbox/select-eleme > webkit.org/b/210093 imported/w3c/web-platform-tests/css/css-flexbox/select-element-zero-height-002.html [ ImageOnlyFailure ] > webkit.org/b/210144 imported/w3c/web-platform-tests/css/css-flexbox/anonymous-flex-item-005.html [ ImageOnlyFailure ] > webkit.org/b/210478 imported/w3c/web-platform-tests/css/css-flexbox/percentage-heights-006.html [ ImageOnlyFailure ] >-webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-005.xht [ ImageOnlyFailure ] > webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-007.xht [ ImageOnlyFailure ] > webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/overflow-area-001.html [ ImageOnlyFailure ] > webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/overflow-area-002.html [ ImageOnlyFailure ] >@@ -3927,6 +3937,141 @@ webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/percentage-h > webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto.html [ ImageOnlyFailure ] > webkit.org/b/212046 imported/w3c/web-platform-tests/css/css-flexbox/scrollbars.html [ ImageOnlyFailure ] > >+# Static position alignment in Flexbox. >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html [ ImageOnlyFailure ] >+webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html [ ImageOnlyFailure ] >+ >+# Tables as flex items. >+webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3.html [ ImageOnlyFailure ] >+webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size.html [ ImageOnlyFailure ] >+webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001.html [ ImageOnlyFailure ] >+webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-width.html [ ImageOnlyFailure ] >+webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size.html [ ImageOnlyFailure ] >+webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width.html [ ImageOnlyFailure ] >+ >+# SVGs as flex items. >+webkit.org/b/221474 imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002.html [ ImageOnlyFailure ] >+webkit.org/b/221474 imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003.html [ ImageOnlyFailure ] >+ >+# Writing modes in flexbox. >+webkit.org/b/221475 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-013.html [ ImageOnlyFailure ] >+webkit.org/b/221475 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-014.html [ ImageOnlyFailure ] >+webkit.org/b/221475 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-015.html [ ImageOnlyFailure ] >+ >+# justify-content in flexbox. >+webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml [ ImageOnlyFailure ] >+ >+# align-content in flexbox. >+webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/align-content_center.html [ ImageOnlyFailure ] >+webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/align-content_flex-end.html [ ImageOnlyFailure ] >+webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/align-content_flex-start.html [ ImageOnlyFailure ] >+webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/align-content_space-around.html [ ImageOnlyFailure ] >+webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/align-content_space-between.html [ ImageOnlyFailure ] >+webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/align-content_stretch.html [ ImageOnlyFailure ] >+ >+webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml [ ImageOnlyFailure ] >+ >+# align baseline in flexbox. >+webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/align-baseline.html [ ImageOnlyFailure ] >+webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml [ ImageOnlyFailure ] >+webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html [ ImageOnlyFailure ] >+webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html [ ImageOnlyFailure ] >+webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested.html [ ImageOnlyFailure ] >+webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change.html [ ImageOnlyFailure ] >+ >+# flex-basis:content. >+webkit.org/b/221479 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a.html [ ImageOnlyFailure ] >+webkit.org/b/221479 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b.html [ ImageOnlyFailure ] >+webkit.org/b/221479 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a.html [ ImageOnlyFailure ] >+webkit.org/b/221479 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b.html [ ImageOnlyFailure ] >+webkit.org/b/221479 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a.html [ ImageOnlyFailure ] >+webkit.org/b/221479 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a.html [ ImageOnlyFailure ] >+ >+# break request in flexbox. >+webkit.org/b/221480 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a.html [ ImageOnlyFailure ] >+webkit.org/b/221480 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b.html [ ImageOnlyFailure ] >+webkit.org/b/221480 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a.html [ ImageOnlyFailure ] >+webkit.org/b/221480 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b.html [ ImageOnlyFailure ] >+ >+# min-size:auto in flexbox. >+webkit.org/b/221481 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a.html [ ImageOnlyFailure ] >+webkit.org/b/221481 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c.html [ ImageOnlyFailure ] >+webkit.org/b/221481 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a.html [ ImageOnlyFailure ] >+webkit.org/b/221481 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c.html [ ImageOnlyFailure ] >+webkit.org/b/221481 imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026.html [ ImageOnlyFailure ] >+webkit.org/b/221481 imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029.html [ ImageOnlyFailure ] >+webkit.org/b/221481 imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015.html [ ImageOnlyFailure ] >+ >+# visibility:collapse in flex items. >+webkit.org/b/221482 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001.html [ ImageOnlyFailure ] >+webkit.org/b/221482 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-001.html [ ImageOnlyFailure ] >+webkit.org/b/221482 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002.html [ ImageOnlyFailure ] >+webkit.org/b/221482 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003.html [ ImageOnlyFailure ] >+ >+# Painting order in flexbox >+webkit.org/b/221482 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml [ ImageOnlyFailure ] >+ >+# Misc elements as flex items. >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001.xhtml [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml [ ImageOnlyFailure ] >+webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001.xhtml [ ImageOnlyFailure ] >+ > # Newly imported Canvas WPT tests that are failing. > imported/w3c/web-platform-tests/html/canvas/element/building-paths/canvas_complexshapes_arcto_001.htm [ ImageOnlyFailure Pass ] > imported/w3c/web-platform-tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.broken.html [ Failure Pass ] >@@ -4601,3 +4746,4 @@ webkit.org/b/220928 imported/w3c/web-platform-tests/css/css-color/predefined-015 > webkit.org/b/220928 imported/w3c/web-platform-tests/css/css-color/predefined-017.html [ ImageOnlyFailure ] # Invalid test, percentages are not allowed for color(xyz). > > webkit.org/b/218496 http/tests/loading/redirect-with-no-location-crash.html [ Skip ] >+ >diff --git a/LayoutTests/imported/w3c/resources/import-expectations.json b/LayoutTests/imported/w3c/resources/import-expectations.json >index 279ec629f06be110f84e829e20a2ded4613f2a78..906e9a079f16b8dc8034ca6779809754a04d627b 100644 >--- a/LayoutTests/imported/w3c/resources/import-expectations.json >+++ b/LayoutTests/imported/w3c/resources/import-expectations.json >@@ -1,444 +1,444 @@ > { >- "LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/": "import", >- "apng": "import", >- "css/css-animations": "import", >- "css/css-box": "import", >- "css/css-color": "import", >- "css/css-flexbox": "import", >- "css/css-masking/clip-path/": "import", >- "css/css-masking/clip-path/clip-path-with-zoo": "import", >- "css/css-masking/clip-path/clip-path-with-zoom*": "import", >- "css/css-masking/clip-path/clip-path-with-zoom-*": "import", >- "css/css-multicol": "import", >- "css/css-position": "import", >- "css/css-shapes": "import", >- "css/css-sizing": "import", >- "css/css-syntax": "import", >- "css/css-text-decor": "import", >- "css/css-values": "import", >- "css/geometry": "import", >- "css/selectors": "import", >- "css/support": "import", >- "custom-elements": "import", >- "density-size-correction": "import", >- "encrypted-media": "import", >- "paint-timing/": "import", >- "paint-timing/fcp-only": "import", >- "paint-timing/resources": "import", >- "paint-timing/resources/": "import", >- "resources/testharness.js": "import", >- "shadow-dom": "import", >- "streams": "import", >- "tools": "import", >- "web-animations": "import", >- "web-platform-tests/DOM-parsing": "skip", >- "web-platform-tests/DOMEvents": "skip", >- "web-platform-tests/FileAPI": "import", >- "web-platform-tests/IndexedDB": "import", >- "web-platform-tests/WebCryptoAPI": "import", >- "web-platform-tests/WebIDL": "import", >- "web-platform-tests/WebIDL/invalid": "skip", >- "web-platform-tests/WebIDL/valid": "skip", >- "web-platform-tests/XMLHttpRequest": "import", >- "web-platform-tests/XMLHttpRequest/abort-after-stop.htm": "skip", >- "web-platform-tests/XMLHttpRequest/event-error-order.sub.html": "skip", >- "web-platform-tests/XMLHttpRequest/event-timeout-order.htm": "skip", >- "web-platform-tests/XMLHttpRequest/preserve-ua-header-on-redirect.htm": "skip", >- "web-platform-tests/XMLHttpRequest/send-after-setting-document-domain.htm": "skip", >- "web-platform-tests/XMLHttpRequest/send-authentication-basic-cors-not-enabled.htm": "skip", >- "web-platform-tests/XMLHttpRequest/send-authentication-basic-setrequestheader-existing-session.htm": "skip", >- "web-platform-tests/accelerometer": "skip", >- "web-platform-tests/ambient-light": "skip", >- "web-platform-tests/animation-timing": "skip", >- "web-platform-tests/annotation-model": "skip", >- "web-platform-tests/annotation-protocol": "skip", >- "web-platform-tests/annotation-vocab": "skip", >- "web-platform-tests/apng": "skip", >- "web-platform-tests/app-uri": "skip", >- "web-platform-tests/assumptions": "skip", >- "web-platform-tests/audio-output": "import", >- "web-platform-tests/auxclick": "skip", >- "web-platform-tests/background-fetch": "import", >- "web-platform-tests/battery-status": "skip", >- "web-platform-tests/beacon": "import", >- "web-platform-tests/bluetooth": "skip", >- "web-platform-tests/browser-payment-api": "skip", >- "web-platform-tests/clear-site-data": "skip", >- "web-platform-tests/clipboard": "skip", >- "web-platform-tests/clipboard-apis": "import", >- "web-platform-tests/common": "import", >- "web-platform-tests/compat": "import", >- "web-platform-tests/console": "import", >- "web-platform-tests/content-security-policy": "import", >- "web-platform-tests/cookies": "skip", >- "web-platform-tests/cookies/resources": "import", >- "web-platform-tests/cookies/secure": "import", >- "web-platform-tests/core-aam": "skip", >- "web-platform-tests/cors": "import", >- "web-platform-tests/credential-management": "import", >- "web-platform-tests/css": "skip", >- "web-platform-tests/css-backgrounds": "skip", >- "web-platform-tests/css-font-display": "skip", >- "web-platform-tests/css-font-loading": "skip", >- "web-platform-tests/css-fonts": "skip", >- "web-platform-tests/css-paint-api": "skip", >- "web-platform-tests/css-scoping": "skip", >- "web-platform-tests/css-scroll-anchoring": "skip", >- "web-platform-tests/css-timing": "skip", >- "web-platform-tests/css-typed-om": "skip", >- "web-platform-tests/css-values": "skip", >- "web-platform-tests/css/WOFF2": "import", >- "web-platform-tests/css/css-align": "import", >- "web-platform-tests/css/css-animations": "import", >- "web-platform-tests/css/css-animations/": "import", >- "web-platform-tests/css/css-backgrounds": "import", >- "web-platform-tests/css/css-cascade": "import", >- "web-platform-tests/css/css-color": "import", >- "web-platform-tests/css/css-content": "import", >- "web-platform-tests/css/css-display": "import", >- "web-platform-tests/css/css-easing": "import", >- "web-platform-tests/css/css-flexbox": "import", >- "web-platform-tests/css/css-font-loading": "import", >- "web-platform-tests/css/css-fonts": "import", >- "web-platform-tests/css/css-fonts/math-script-level-and-math-style/": "import", >- "web-platform-tests/css/css-grid": "import", >- "web-platform-tests/css/css-grid/abspos": "import", >- "web-platform-tests/css/css-grid/alignment/": "import", >- "web-platform-tests/css/css-grid/grid-definition/": "import", >- "web-platform-tests/css/css-grid/grid-items/": "import", >- "web-platform-tests/css/css-grid/layout-algorithm": "import", >- "web-platform-tests/css/css-grid/layout-algorithm/": "import", >- "web-platform-tests/css/css-grid/parsing/": "import", >- "web-platform-tests/css/css-images": "import", >- "web-platform-tests/css/css-lists": "import", >- "web-platform-tests/css/css-lists/parsing": "import", >- "web-platform-tests/css/css-logical": "import", >- "web-platform-tests/css/css-multicol": "import", >- "web-platform-tests/css/css-overflow": "import", >- "web-platform-tests/css/css-overscroll-behavior": "import", >- "web-platform-tests/css/css-properties-values-api": "import", >- "web-platform-tests/css/css-pseudo": "import", >- "web-platform-tests/css/css-scoping": "import", >- "web-platform-tests/css/css-scroll-snap": "import", >- "web-platform-tests/css/css-shadow-parts": "import", >- "web-platform-tests/css/css-shapes": "import", >- "web-platform-tests/css/css-shapes/test-plan/index.html": "skip", >- "web-platform-tests/css/css-sizing/aspect-ratio": "import", >- "web-platform-tests/css/css-text": "import", >- "web-platform-tests/css/css-transitions": "import", >- "web-platform-tests/css/css-ui": "import", >- "web-platform-tests/css/css-variables": "import", >- "web-platform-tests/css/css-writing-modes": "import", >- "web-platform-tests/css/cssom": "import", >- "web-platform-tests/css/cssom-view/": "import", >- "web-platform-tests/css/geometry/": "import", >- "web-platform-tests/css/mediaqueries": "import", >- "web-platform-tests/css/reference": "import", >- "web-platform-tests/css/resources": "import", >- "web-platform-tests/css/selectors": "import", >- "web-platform-tests/css/support": "import", >- "web-platform-tests/custom-elements": "import", >- "web-platform-tests/custom-elements/v0": "skip", >- "web-platform-tests/docs": "import", >- "web-platform-tests/dom": "import", >- "web-platform-tests/dom/events": "import", >- "web-platform-tests/dom/events/scrolling": "import", >- "web-platform-tests/dom/nodes/Document-createElement-namespace-tests/empty.html": "skip", >- "web-platform-tests/dom/nodes/Document-createElement-namespace-tests/empty.svg": "skip", >- "web-platform-tests/dom/nodes/Document-createElement-namespace-tests/empty.xhtml": "skip", >- "web-platform-tests/dom/nodes/Document-createElement-namespace-tests/empty.xml": "skip", >- "web-platform-tests/dom/nodes/Document-createProcessingInstruction.xhtml": "skip", >- "web-platform-tests/dom/nodes/Document-getElementsByTagName.xhtml": "skip", >- "web-platform-tests/dom/nodes/Element-childElement-null-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-childElement-null.svg": "skip", >- "web-platform-tests/dom/nodes/Element-childElement-null.xhtml": "skip", >- "web-platform-tests/dom/nodes/Element-childElementCount-dynamic-add-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-childElementCount-dynamic-add.svg": "skip", >- "web-platform-tests/dom/nodes/Element-childElementCount-dynamic-remove-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-childElementCount-dynamic-remove.svg": "skip", >- "web-platform-tests/dom/nodes/Element-childElementCount-dynamic-remove.xhtml": "skip", >- "web-platform-tests/dom/nodes/Element-childElementCount-nochild-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-childElementCount-nochild.svg": "skip", >- "web-platform-tests/dom/nodes/Element-childElementCount-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-childElementCount.svg": "skip", >- "web-platform-tests/dom/nodes/Element-childElementCount.xhtml": "skip", >- "web-platform-tests/dom/nodes/Element-firstElementChild-entity.svg": "skip", >- "web-platform-tests/dom/nodes/Element-firstElementChild-entity.xhtml": "skip", >- "web-platform-tests/dom/nodes/Element-firstElementChild-namespace-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-firstElementChild-namespace.svg": "skip", >- "web-platform-tests/dom/nodes/Element-firstElementChild-namespace.xhtml": "skip", >- "web-platform-tests/dom/nodes/Element-firstElementChild-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-firstElementChild.svg": "skip", >- "web-platform-tests/dom/nodes/Element-lastElementChild-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-lastElementChild.svg": "skip", >- "web-platform-tests/dom/nodes/Element-lastElementChild.xhtml": "skip", >- "web-platform-tests/dom/nodes/Element-nextElementSibling-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-nextElementSibling.svg": "skip", >- "web-platform-tests/dom/nodes/Element-previousElementSibling-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-previousElementSibling.svg": "skip", >- "web-platform-tests/dom/nodes/Element-siblingElement-null-svg.svg": "skip", >- "web-platform-tests/dom/nodes/Element-siblingElement-null.svg": "skip", >- "web-platform-tests/dom/nodes/Element-siblingElement-null.xhtml": "skip", >- "web-platform-tests/dom/nodes/Node-nodeName.xhtml": "skip", >- "web-platform-tests/dom/nodes/ParentNode-querySelector-All.xht": "skip", >- "web-platform-tests/dom/traversal": "import", >- "web-platform-tests/dom/traversal/unfinished": "skip", >- "web-platform-tests/domparsing": "import", >- "web-platform-tests/domxpath": "import", >- "web-platform-tests/domxpath/xml_xpath_runner.html": "skip", >- "web-platform-tests/domxpath/xml_xpath_tests.xml": "skip", >- "web-platform-tests/dpub-aam": "skip", >- "web-platform-tests/dpub-aria": "skip", >- "web-platform-tests/editing": "skip", >- "web-platform-tests/encoding": "import", >- "web-platform-tests/encrypted-media": "import", >- "web-platform-tests/encrypted-media/Google": "skip", >- "web-platform-tests/entries-api": "import", >- "web-platform-tests/eventsource": "import", >- "web-platform-tests/ext-xhtml-pubid": "skip", >- "web-platform-tests/feature-policy": "skip", >- "web-platform-tests/feature-policy/resources": "import", >- "web-platform-tests/feature-policy/resources/": "import", >- "web-platform-tests/fetch": "import", >- "web-platform-tests/fetch/api": "import", >- "web-platform-tests/fetch/api/cors": "import", >- "web-platform-tests/fetch/api/redirect": "import", >- "web-platform-tests/fetch/api/resources": "import", >- "web-platform-tests/fetch/origin": "import", >- "web-platform-tests/fetch/range": "import", >- "web-platform-tests/fetch/stale-while-revalidate": "import", >- "web-platform-tests/fullscreen": "skip", >- "web-platform-tests/gamepad": "skip", >- "web-platform-tests/generic-sensor": "skip", >- "web-platform-tests/geolocation-API": "import", >- "web-platform-tests/gyroscope": "skip", >- "web-platform-tests/hr-time": "import", >- "web-platform-tests/html": "import", >- "web-platform-tests/html-imports": "skip", >- "web-platform-tests/html-longdesc": "skip", >- "web-platform-tests/html-media-capture": "skip", >- "web-platform-tests/html/browsers": "import", >- "web-platform-tests/html/browsers/browsing-the-web/history-traversal/browsing_context_name.html": "skip", >- "web-platform-tests/html/browsers/browsing-the-web/history-traversal/browsing_context_name_cross_origin_2.html": "skip", >- "web-platform-tests/html/browsers/browsing-the-web/history-traversal/browsing_context_name_cross_origin_3.html": "skip", >- "web-platform-tests/html/browsers/history/joint-session-history": "skip", >- "web-platform-tests/html/browsers/history/the-history-interface/001.html": "skip", >- "web-platform-tests/html/browsers/history/the-history-interface/002.html": "skip", >- "web-platform-tests/html/browsers/history/the-history-interface/combination_history_002.html": "skip", >- "web-platform-tests/html/browsers/history/the-history-interface/combination_history_003.html": "skip", >- "web-platform-tests/html/browsers/history/the-history-interface/traverse_the_history_3.html": "skip", >- "web-platform-tests/html/browsers/history/the-location-interface/assign_after_load.html": "skip", >- "web-platform-tests/html/browsers/history/the-location-interface/assign_before_load.html": "skip", >- "web-platform-tests/html/browsers/history/the-location-interface/location_assign.html": "skip", >- "web-platform-tests/html/browsers/offline/application-cache-api": "skip", >- "web-platform-tests/html/browsers/origin/cross-origin-objects/cross-origin-objects.sub.html": "skip", >- "web-platform-tests/html/browsers/sandboxing": "skip", >- "web-platform-tests/html/browsers/the-window-object": "import", >- "web-platform-tests/html/browsers/windows/auxiliary-browsing-contexts/": "import", >- "web-platform-tests/html/browsers/windows/browsing-context-first-created.xhtml": "skip", >- "web-platform-tests/html/browsers/windows/browsing-context-names": "import", >- "web-platform-tests/html/browsers/windows/nested-browsing-contexts/frameElement.html": "skip", >- "web-platform-tests/html/browsers/windows/targeting-cross-origin-nested-browsing-contexts.html": "skip", >- "web-platform-tests/html/canvas": "import", >- "web-platform-tests/html/canvas/element": "import", >- "web-platform-tests/html/canvas/offscreen": "import", >- "web-platform-tests/html/canvas/resources": "import", >- "web-platform-tests/html/canvas/tools": "import", >- "web-platform-tests/html/dom": "import", >- "web-platform-tests/html/dom/documents/dom-tree-accessors/Document.currentScript.sub.html": "skip", >- "web-platform-tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters": "skip", >- "web-platform-tests/html/dom/reflection-original.html": "skip", >- "web-platform-tests/html/editing": "import", >- "web-platform-tests/html/iana": "import", >- "web-platform-tests/html/infrastructure": "import", >- "web-platform-tests/html/infrastructure/safe-passing-of-structured-data/shared-array-buffers": "skip", >- "web-platform-tests/html/interaction": "import", >- "web-platform-tests/html/interaction/focus/the-autofocus-attribute": "import", >- "web-platform-tests/html/obsolete": "skip", >- "web-platform-tests/html/rendering": "skip", >- "web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/": "import", >- "web-platform-tests/html/resources": "import", >- "web-platform-tests/html/semantics": "import", >- "web-platform-tests/html/semantics/document-metadata/the-meta-element/pragma-directives": "skip", >- "web-platform-tests/html/semantics/document-metadata/the-meta-element/pragma-directives/attr-meta-http-equiv-refresh": "import", >- "web-platform-tests/html/semantics/embedded-content": "import", >- "web-platform-tests/html/semantics/embedded-content-0": "skip", >- "web-platform-tests/html/semantics/embedded-content/image-maps/image-map-processing-model": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/audio_loop_base.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/error-codes": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/loading-the-media-resource": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/location-of-the-media-resource/currentSrc.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/networkState_during_progress.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/offsets-into-the-media-resource/currentTime.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/playing-the-media-resource/pause-remove-from-document-networkState.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/playing-the-media-resource/play-in-detached-document.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/ready-states/autoplay.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/seeking/seek-to-currentTime.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/seeking/seek-to-max-value.htm": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/seeking/seek-to-negative-time.htm": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/synchronising-multiple-media-elements/media-controllers/task-source.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element": "import", >- "web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/cors": "skip", >- "web-platform-tests/html/semantics/embedded-content/media-elements/video_loop_base.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/the-area-element/area_nohref.xhtml": "skip", >- "web-platform-tests/html/semantics/embedded-content/the-area-element/test-area.xhtml": "skip", >- "web-platform-tests/html/semantics/embedded-content/the-canvas-element": "import", >- "web-platform-tests/html/semantics/embedded-content/the-canvas-element/size.attributes.parse.whitespace.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/the-embed-element/embed-represent-nothing-04.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/the-iframe-element": "import", >- "web-platform-tests/html/semantics/embedded-content/the-img-element/": "import", >- "web-platform-tests/html/semantics/embedded-content/the-img-element/decode": "skip", >- "web-platform-tests/html/semantics/embedded-content/the-img-element/relevant-mutations.html": "skip", >- "web-platform-tests/html/semantics/embedded-content/the-img-element/update-the-image-data": "skip", >- "web-platform-tests/html/semantics/embedded-content/the-object-element/object-events.html": "skip", >- "web-platform-tests/html/semantics/forms/textfieldselection/select-event.html": "skip", >- "web-platform-tests/html/semantics/forms/textfieldselection/textfieldselection-setRangeText.html": "skip", >- "web-platform-tests/html/semantics/forms/the-textarea-element": "import", >- "web-platform-tests/html/semantics/interactive-elements/the-details-element/toggleEvent.html": "skip", >- "web-platform-tests/html/semantics/interactive-elements/the-summary-element": "skip", >- "web-platform-tests/html/semantics/links/downloading-resources": "import", >- "web-platform-tests/html/semantics/links/following-hyperlinks": "skip", >- "web-platform-tests/html/semantics/links/links-created-by-a-and-area-elements": "skip", >- "web-platform-tests/html/semantics/scripting-1/the-script-element/execution-timing": "skip", >- "web-platform-tests/html/semantics/scripting-1/the-script-element/module": "import", >- "web-platform-tests/html/semantics/scripting-1/the-script-element/script-for-event.xhtml": "skip", >- "web-platform-tests/html/semantics/scripting-1/the-script-element/script-text.xhtml": "skip", >- "web-platform-tests/html/semantics/tabular-data": "import", >- "web-platform-tests/html/semantics/tabular-data/processing-model-1": "import", >- "web-platform-tests/html/semantics/text-level-semantics/the-data-element": "skip", >- "web-platform-tests/html/syntax": "import", >- "web-platform-tests/html/the-xhtml-syntax": "import", >- "web-platform-tests/html/the-xhtml-syntax/parsing-xhtml-documents": "import", >- "web-platform-tests/html/tools": "import", >- "web-platform-tests/html/user-activation": "import", >- "web-platform-tests/html/webappapis": "import", >- "web-platform-tests/html/webappapis/dynamic-insertion": "import", >- "web-platform-tests/html/webappapis/dynamic-markup-insertion": "import", >- "web-platform-tests/html/webappapis/idle-callbacks": "skip", >- "web-platform-tests/html/webappapis/scripting/event-loops/microtask_after_raf.html": "skip", >- "web-platform-tests/html/webappapis/scripting/processing-model-2/unhandled-promise-rejections": "skip", >- "web-platform-tests/html/webappapis/the-windoworworkerglobalscope-mixin": "import", >- "web-platform-tests/http": "skip", >- "web-platform-tests/image-decodes": "skip", >- "web-platform-tests/imagebitmap-renderingcontext": "import", >- "web-platform-tests/images": "import", >- "web-platform-tests/infrastructure": "import", >- "web-platform-tests/innerText": "import", >- "web-platform-tests/input-events": "skip", >- "web-platform-tests/interfaces": "import", >- "web-platform-tests/intersection-observer": "import", >- "web-platform-tests/js": "skip", >- "web-platform-tests/keyboard-lock": "skip", >- "web-platform-tests/loading/lazyload": "import", >- "web-platform-tests/longtask-timing": "skip", >- "web-platform-tests/magnetometer": "skip", >- "web-platform-tests/mathml": "import", >- "web-platform-tests/media-capabilities": "skip", >- "web-platform-tests/media-source": "import", >- "web-platform-tests/media/": "import", >- "web-platform-tests/mediacapture-image": "skip", >- "web-platform-tests/mediacapture-record": "import", >- "web-platform-tests/mediacapture-streams": "import", >- "web-platform-tests/mediacapture-streams/": "import", >- "web-platform-tests/mediasession": "import", >- "web-platform-tests/microdata": "skip", >- "web-platform-tests/mimesniff": "import", >- "web-platform-tests/mixed-content": "skip", >- "web-platform-tests/mst-content-hint": "import", >- "web-platform-tests/navigation-timing": "skip", >- "web-platform-tests/netinfo": "skip", >- "web-platform-tests/notifications": "import", >- "web-platform-tests/old-tests": "skip", >- "web-platform-tests/orientation-event": "skip", >- "web-platform-tests/orientation-sensor": "skip", >- "web-platform-tests/page-visibility": "import", >- "web-platform-tests/paint-timing": "skip", >- "web-platform-tests/payment-handler": "skip", >- "web-platform-tests/payment-method-basic-card": "skip", >- "web-platform-tests/payment-method-id": "skip", >- "web-platform-tests/payment-request": "import", >- "web-platform-tests/performance-timeline": "skip", >- "web-platform-tests/picture-in-picture": "import", >- "web-platform-tests/pointerevents": "import", >- "web-platform-tests/pointerlock": "skip", >- "web-platform-tests/preload": "skip", >- "web-platform-tests/presentation-api": "skip", >- "web-platform-tests/progress-events": "skip", >- "web-platform-tests/proximity": "skip", >- "web-platform-tests/quirks-mode": "skip", >- "web-platform-tests/quirks/unitless-length": "import", >- "web-platform-tests/referrer-policy": "import", >- "web-platform-tests/remote-playback": "import", >- "web-platform-tests/requestidlecallback": "import", >- "web-platform-tests/resize-observer": "import", >- "web-platform-tests/resize-observer/": "import", >- "web-platform-tests/resource-timing": "import", >- "web-platform-tests/resources": "import", >- "web-platform-tests/resources/chromium": "skip", >- "web-platform-tests/resources/test": "skip", >- "web-platform-tests/screen-orientation": "skip", >- "web-platform-tests/scroll-anchoring": "skip", >- "web-platform-tests/scroll-into-view": "skip", >- "web-platform-tests/secure-contexts": "import", >- "web-platform-tests/selection": "skip", >- "web-platform-tests/selectors": "skip", >- "web-platform-tests/selectors-api": "skip", >- "web-platform-tests/server-timing": "import", >- "web-platform-tests/service-workers": "import", >- "web-platform-tests/shadow-dom": "import", >- "web-platform-tests/shadow-dom/untriaged": "skip", >- "web-platform-tests/speech-api": "import", >- "web-platform-tests/staticrange": "skip", >- "web-platform-tests/storage": "skip", >- "web-platform-tests/streams": "import", >- "web-platform-tests/streams/writable-streams": "skip", >- "web-platform-tests/subresource-integrity": "import", >- "web-platform-tests/svg": "import", >- "web-platform-tests/svg-aam": "skip", >- "web-platform-tests/test/html/infrastructure": "import", >- "web-platform-tests/testharness_runner.html": "skip", >- "web-platform-tests/tools": "import", >- "web-platform-tests/tools/__init__.py": "import", >- "web-platform-tests/tools/html5lib": "import", >- "web-platform-tests/tools/localpaths.py": "import", >- "web-platform-tests/tools/manifest": "import", >- "web-platform-tests/tools/pywebsocket": "import", >- "web-platform-tests/tools/serve": "import", >- "web-platform-tests/tools/six": "import", >- "web-platform-tests/tools/sslutils": "import", >- "web-platform-tests/tools/wptserve": "import", >- "web-platform-tests/touch-events": "import", >- "web-platform-tests/trusted-types": "skip", >- "web-platform-tests/typedarrays": "skip", >- "web-platform-tests/uievents": "import", >- "web-platform-tests/upgrade-insecure-requests": "skip", >- "web-platform-tests/url": "import", >- "web-platform-tests/user-timing": "import", >- "web-platform-tests/vibration": "skip", >- "web-platform-tests/visual-viewport": "import", >- "web-platform-tests/wai-aria": "skip", >- "web-platform-tests/wasm": "import", >- "web-platform-tests/wasm/jsapi": "import", >- "web-platform-tests/web-animations": "import", >- "web-platform-tests/web-nfc": "skip", >- "web-platform-tests/web-share": "import", >- "web-platform-tests/webaudio": "import", >- "web-platform-tests/webauthn": "skip", >- "web-platform-tests/webdriver": "skip", >- "web-platform-tests/webgl": "skip", >- "web-platform-tests/webmessaging": "import", >- "web-platform-tests/webmessaging/": "import", >- "web-platform-tests/webrtc": "import", >- "web-platform-tests/webrtc/legacy": "skip", >- "web-platform-tests/websockets": "import", >- "web-platform-tests/webstorage": "skip", >- "web-platform-tests/webusb": "skip", >- "web-platform-tests/webvr": "skip", >- "web-platform-tests/webvtt": "skip", >- "web-platform-tests/webxr": "import", >- "web-platform-tests/workers": "import", >- "web-platform-tests/worklets": "import", >- "web-platform-tests/x-frame-options": "skip", >- "web-platform-tests/xhr": "import", >+ "LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/": "import", >+ "apng": "import", >+ "css/css-animations": "import", >+ "css/css-box": "import", >+ "css/css-color": "import", >+ "css/css-flexbox": "import", >+ "css/css-masking/clip-path/": "import", >+ "css/css-masking/clip-path/clip-path-with-zoo": "import", >+ "css/css-masking/clip-path/clip-path-with-zoom*": "import", >+ "css/css-masking/clip-path/clip-path-with-zoom-*": "import", >+ "css/css-multicol": "import", >+ "css/css-position": "import", >+ "css/css-shapes": "import", >+ "css/css-sizing": "import", >+ "css/css-syntax": "import", >+ "css/css-text-decor": "import", >+ "css/css-values": "import", >+ "css/geometry": "import", >+ "css/selectors": "import", >+ "css/support": "import", >+ "custom-elements": "import", >+ "density-size-correction": "import", >+ "encrypted-media": "import", >+ "paint-timing/": "import", >+ "paint-timing/fcp-only": "import", >+ "paint-timing/resources": "import", >+ "paint-timing/resources/": "import", >+ "resources/testharness.js": "import", >+ "shadow-dom": "import", >+ "streams": "import", >+ "tools": "import", >+ "web-animations": "import", >+ "web-platform-tests/DOM-parsing": "skip", >+ "web-platform-tests/DOMEvents": "skip", >+ "web-platform-tests/FileAPI": "import", >+ "web-platform-tests/IndexedDB": "import", >+ "web-platform-tests/WebCryptoAPI": "import", >+ "web-platform-tests/WebIDL": "import", >+ "web-platform-tests/WebIDL/invalid": "skip", >+ "web-platform-tests/WebIDL/valid": "skip", >+ "web-platform-tests/XMLHttpRequest": "import", >+ "web-platform-tests/XMLHttpRequest/abort-after-stop.htm": "skip", >+ "web-platform-tests/XMLHttpRequest/event-error-order.sub.html": "skip", >+ "web-platform-tests/XMLHttpRequest/event-timeout-order.htm": "skip", >+ "web-platform-tests/XMLHttpRequest/preserve-ua-header-on-redirect.htm": "skip", >+ "web-platform-tests/XMLHttpRequest/send-after-setting-document-domain.htm": "skip", >+ "web-platform-tests/XMLHttpRequest/send-authentication-basic-cors-not-enabled.htm": "skip", >+ "web-platform-tests/XMLHttpRequest/send-authentication-basic-setrequestheader-existing-session.htm": "skip", >+ "web-platform-tests/accelerometer": "skip", >+ "web-platform-tests/ambient-light": "skip", >+ "web-platform-tests/animation-timing": "skip", >+ "web-platform-tests/annotation-model": "skip", >+ "web-platform-tests/annotation-protocol": "skip", >+ "web-platform-tests/annotation-vocab": "skip", >+ "web-platform-tests/apng": "skip", >+ "web-platform-tests/app-uri": "skip", >+ "web-platform-tests/assumptions": "skip", >+ "web-platform-tests/audio-output": "import", >+ "web-platform-tests/auxclick": "skip", >+ "web-platform-tests/background-fetch": "import", >+ "web-platform-tests/battery-status": "skip", >+ "web-platform-tests/beacon": "import", >+ "web-platform-tests/bluetooth": "skip", >+ "web-platform-tests/browser-payment-api": "skip", >+ "web-platform-tests/clear-site-data": "skip", >+ "web-platform-tests/clipboard": "skip", >+ "web-platform-tests/clipboard-apis": "import", >+ "web-platform-tests/common": "import", >+ "web-platform-tests/compat": "import", >+ "web-platform-tests/console": "import", >+ "web-platform-tests/content-security-policy": "import", >+ "web-platform-tests/cookies": "skip", >+ "web-platform-tests/cookies/resources": "import", >+ "web-platform-tests/cookies/secure": "import", >+ "web-platform-tests/core-aam": "skip", >+ "web-platform-tests/cors": "import", >+ "web-platform-tests/credential-management": "import", >+ "web-platform-tests/css": "skip", >+ "web-platform-tests/css-backgrounds": "skip", >+ "web-platform-tests/css-font-display": "skip", >+ "web-platform-tests/css-font-loading": "skip", >+ "web-platform-tests/css-fonts": "skip", >+ "web-platform-tests/css-paint-api": "skip", >+ "web-platform-tests/css-scoping": "skip", >+ "web-platform-tests/css-scroll-anchoring": "skip", >+ "web-platform-tests/css-timing": "skip", >+ "web-platform-tests/css-typed-om": "skip", >+ "web-platform-tests/css-values": "skip", >+ "web-platform-tests/css/WOFF2": "import", >+ "web-platform-tests/css/css-align": "import", >+ "web-platform-tests/css/css-animations": "import", >+ "web-platform-tests/css/css-animations/": "import", >+ "web-platform-tests/css/css-backgrounds": "import", >+ "web-platform-tests/css/css-cascade": "import", >+ "web-platform-tests/css/css-color": "import", >+ "web-platform-tests/css/css-content": "import", >+ "web-platform-tests/css/css-display": "import", >+ "web-platform-tests/css/css-easing": "import", >+ "web-platform-tests/css/css-flexbox": "import", >+ "web-platform-tests/css/css-font-loading": "import", >+ "web-platform-tests/css/css-fonts": "import", >+ "web-platform-tests/css/css-fonts/math-script-level-and-math-style/": "import", >+ "web-platform-tests/css/css-grid": "import", >+ "web-platform-tests/css/css-grid/abspos": "import", >+ "web-platform-tests/css/css-grid/alignment/": "import", >+ "web-platform-tests/css/css-grid/grid-definition/": "import", >+ "web-platform-tests/css/css-grid/grid-items/": "import", >+ "web-platform-tests/css/css-grid/layout-algorithm": "import", >+ "web-platform-tests/css/css-grid/layout-algorithm/": "import", >+ "web-platform-tests/css/css-grid/parsing/": "import", >+ "web-platform-tests/css/css-images": "import", >+ "web-platform-tests/css/css-lists": "import", >+ "web-platform-tests/css/css-lists/parsing": "import", >+ "web-platform-tests/css/css-logical": "import", >+ "web-platform-tests/css/css-multicol": "import", >+ "web-platform-tests/css/css-overflow": "import", >+ "web-platform-tests/css/css-overscroll-behavior": "import", >+ "web-platform-tests/css/css-properties-values-api": "import", >+ "web-platform-tests/css/css-pseudo": "import", >+ "web-platform-tests/css/css-scoping": "import", >+ "web-platform-tests/css/css-scroll-snap": "import", >+ "web-platform-tests/css/css-shadow-parts": "import", >+ "web-platform-tests/css/css-shapes": "import", >+ "web-platform-tests/css/css-shapes/test-plan/index.html": "skip", >+ "web-platform-tests/css/css-sizing/aspect-ratio": "import", >+ "web-platform-tests/css/css-text": "import", >+ "web-platform-tests/css/css-transitions": "import", >+ "web-platform-tests/css/css-ui": "import", >+ "web-platform-tests/css/css-variables": "import", >+ "web-platform-tests/css/css-writing-modes": "import", >+ "web-platform-tests/css/cssom": "import", >+ "web-platform-tests/css/cssom-view/": "import", >+ "web-platform-tests/css/geometry/": "import", >+ "web-platform-tests/css/mediaqueries": "import", >+ "web-platform-tests/css/reference": "import", >+ "web-platform-tests/css/resources": "import", >+ "web-platform-tests/css/selectors": "import", >+ "web-platform-tests/css/support": "import", >+ "web-platform-tests/custom-elements": "import", >+ "web-platform-tests/custom-elements/v0": "skip", >+ "web-platform-tests/docs": "import", >+ "web-platform-tests/dom": "import", >+ "web-platform-tests/dom/events": "import", >+ "web-platform-tests/dom/events/scrolling": "import", >+ "web-platform-tests/dom/nodes/Document-createElement-namespace-tests/empty.html": "skip", >+ "web-platform-tests/dom/nodes/Document-createElement-namespace-tests/empty.svg": "skip", >+ "web-platform-tests/dom/nodes/Document-createElement-namespace-tests/empty.xhtml": "skip", >+ "web-platform-tests/dom/nodes/Document-createElement-namespace-tests/empty.xml": "skip", >+ "web-platform-tests/dom/nodes/Document-createProcessingInstruction.xhtml": "skip", >+ "web-platform-tests/dom/nodes/Document-getElementsByTagName.xhtml": "skip", >+ "web-platform-tests/dom/nodes/Element-childElement-null-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-childElement-null.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-childElement-null.xhtml": "skip", >+ "web-platform-tests/dom/nodes/Element-childElementCount-dynamic-add-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-childElementCount-dynamic-add.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-childElementCount-dynamic-remove-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-childElementCount-dynamic-remove.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-childElementCount-dynamic-remove.xhtml": "skip", >+ "web-platform-tests/dom/nodes/Element-childElementCount-nochild-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-childElementCount-nochild.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-childElementCount-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-childElementCount.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-childElementCount.xhtml": "skip", >+ "web-platform-tests/dom/nodes/Element-firstElementChild-entity.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-firstElementChild-entity.xhtml": "skip", >+ "web-platform-tests/dom/nodes/Element-firstElementChild-namespace-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-firstElementChild-namespace.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-firstElementChild-namespace.xhtml": "skip", >+ "web-platform-tests/dom/nodes/Element-firstElementChild-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-firstElementChild.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-lastElementChild-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-lastElementChild.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-lastElementChild.xhtml": "skip", >+ "web-platform-tests/dom/nodes/Element-nextElementSibling-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-nextElementSibling.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-previousElementSibling-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-previousElementSibling.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-siblingElement-null-svg.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-siblingElement-null.svg": "skip", >+ "web-platform-tests/dom/nodes/Element-siblingElement-null.xhtml": "skip", >+ "web-platform-tests/dom/nodes/Node-nodeName.xhtml": "skip", >+ "web-platform-tests/dom/nodes/ParentNode-querySelector-All.xht": "skip", >+ "web-platform-tests/dom/traversal": "import", >+ "web-platform-tests/dom/traversal/unfinished": "skip", >+ "web-platform-tests/domparsing": "import", >+ "web-platform-tests/domxpath": "import", >+ "web-platform-tests/domxpath/xml_xpath_runner.html": "skip", >+ "web-platform-tests/domxpath/xml_xpath_tests.xml": "skip", >+ "web-platform-tests/dpub-aam": "skip", >+ "web-platform-tests/dpub-aria": "skip", >+ "web-platform-tests/editing": "skip", >+ "web-platform-tests/encoding": "import", >+ "web-platform-tests/encrypted-media": "import", >+ "web-platform-tests/encrypted-media/Google": "skip", >+ "web-platform-tests/entries-api": "import", >+ "web-platform-tests/eventsource": "import", >+ "web-platform-tests/ext-xhtml-pubid": "skip", >+ "web-platform-tests/feature-policy": "skip", >+ "web-platform-tests/feature-policy/resources": "import", >+ "web-platform-tests/feature-policy/resources/": "import", >+ "web-platform-tests/fetch": "import", >+ "web-platform-tests/fetch/api": "import", >+ "web-platform-tests/fetch/api/cors": "import", >+ "web-platform-tests/fetch/api/redirect": "import", >+ "web-platform-tests/fetch/api/resources": "import", >+ "web-platform-tests/fetch/origin": "import", >+ "web-platform-tests/fetch/range": "import", >+ "web-platform-tests/fetch/stale-while-revalidate": "import", >+ "web-platform-tests/fullscreen": "skip", >+ "web-platform-tests/gamepad": "skip", >+ "web-platform-tests/generic-sensor": "skip", >+ "web-platform-tests/geolocation-API": "import", >+ "web-platform-tests/gyroscope": "skip", >+ "web-platform-tests/hr-time": "import", >+ "web-platform-tests/html": "import", >+ "web-platform-tests/html-imports": "skip", >+ "web-platform-tests/html-longdesc": "skip", >+ "web-platform-tests/html-media-capture": "skip", >+ "web-platform-tests/html/browsers": "import", >+ "web-platform-tests/html/browsers/browsing-the-web/history-traversal/browsing_context_name.html": "skip", >+ "web-platform-tests/html/browsers/browsing-the-web/history-traversal/browsing_context_name_cross_origin_2.html": "skip", >+ "web-platform-tests/html/browsers/browsing-the-web/history-traversal/browsing_context_name_cross_origin_3.html": "skip", >+ "web-platform-tests/html/browsers/history/joint-session-history": "skip", >+ "web-platform-tests/html/browsers/history/the-history-interface/001.html": "skip", >+ "web-platform-tests/html/browsers/history/the-history-interface/002.html": "skip", >+ "web-platform-tests/html/browsers/history/the-history-interface/combination_history_002.html": "skip", >+ "web-platform-tests/html/browsers/history/the-history-interface/combination_history_003.html": "skip", >+ "web-platform-tests/html/browsers/history/the-history-interface/traverse_the_history_3.html": "skip", >+ "web-platform-tests/html/browsers/history/the-location-interface/assign_after_load.html": "skip", >+ "web-platform-tests/html/browsers/history/the-location-interface/assign_before_load.html": "skip", >+ "web-platform-tests/html/browsers/history/the-location-interface/location_assign.html": "skip", >+ "web-platform-tests/html/browsers/offline/application-cache-api": "skip", >+ "web-platform-tests/html/browsers/origin/cross-origin-objects/cross-origin-objects.sub.html": "skip", >+ "web-platform-tests/html/browsers/sandboxing": "skip", >+ "web-platform-tests/html/browsers/the-window-object": "import", >+ "web-platform-tests/html/browsers/windows/auxiliary-browsing-contexts/": "import", >+ "web-platform-tests/html/browsers/windows/browsing-context-first-created.xhtml": "skip", >+ "web-platform-tests/html/browsers/windows/browsing-context-names": "import", >+ "web-platform-tests/html/browsers/windows/nested-browsing-contexts/frameElement.html": "skip", >+ "web-platform-tests/html/browsers/windows/targeting-cross-origin-nested-browsing-contexts.html": "skip", >+ "web-platform-tests/html/canvas": "import", >+ "web-platform-tests/html/canvas/element": "import", >+ "web-platform-tests/html/canvas/offscreen": "import", >+ "web-platform-tests/html/canvas/resources": "import", >+ "web-platform-tests/html/canvas/tools": "import", >+ "web-platform-tests/html/dom": "import", >+ "web-platform-tests/html/dom/documents/dom-tree-accessors/Document.currentScript.sub.html": "skip", >+ "web-platform-tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters": "skip", >+ "web-platform-tests/html/dom/reflection-original.html": "skip", >+ "web-platform-tests/html/editing": "import", >+ "web-platform-tests/html/iana": "import", >+ "web-platform-tests/html/infrastructure": "import", >+ "web-platform-tests/html/infrastructure/safe-passing-of-structured-data/shared-array-buffers": "skip", >+ "web-platform-tests/html/interaction": "import", >+ "web-platform-tests/html/interaction/focus/the-autofocus-attribute": "import", >+ "web-platform-tests/html/obsolete": "skip", >+ "web-platform-tests/html/rendering": "skip", >+ "web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/": "import", >+ "web-platform-tests/html/resources": "import", >+ "web-platform-tests/html/semantics": "import", >+ "web-platform-tests/html/semantics/document-metadata/the-meta-element/pragma-directives": "skip", >+ "web-platform-tests/html/semantics/document-metadata/the-meta-element/pragma-directives/attr-meta-http-equiv-refresh": "import", >+ "web-platform-tests/html/semantics/embedded-content": "import", >+ "web-platform-tests/html/semantics/embedded-content-0": "skip", >+ "web-platform-tests/html/semantics/embedded-content/image-maps/image-map-processing-model": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/audio_loop_base.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/error-codes": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/loading-the-media-resource": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/location-of-the-media-resource/currentSrc.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/networkState_during_progress.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/offsets-into-the-media-resource/currentTime.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/playing-the-media-resource/pause-remove-from-document-networkState.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/playing-the-media-resource/play-in-detached-document.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/ready-states/autoplay.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/seeking/seek-to-currentTime.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/seeking/seek-to-max-value.htm": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/seeking/seek-to-negative-time.htm": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/synchronising-multiple-media-elements/media-controllers/task-source.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element": "import", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/cors": "skip", >+ "web-platform-tests/html/semantics/embedded-content/media-elements/video_loop_base.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/the-area-element/area_nohref.xhtml": "skip", >+ "web-platform-tests/html/semantics/embedded-content/the-area-element/test-area.xhtml": "skip", >+ "web-platform-tests/html/semantics/embedded-content/the-canvas-element": "import", >+ "web-platform-tests/html/semantics/embedded-content/the-canvas-element/size.attributes.parse.whitespace.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/the-embed-element/embed-represent-nothing-04.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/the-iframe-element": "import", >+ "web-platform-tests/html/semantics/embedded-content/the-img-element/": "import", >+ "web-platform-tests/html/semantics/embedded-content/the-img-element/decode": "skip", >+ "web-platform-tests/html/semantics/embedded-content/the-img-element/relevant-mutations.html": "skip", >+ "web-platform-tests/html/semantics/embedded-content/the-img-element/update-the-image-data": "skip", >+ "web-platform-tests/html/semantics/embedded-content/the-object-element/object-events.html": "skip", >+ "web-platform-tests/html/semantics/forms/textfieldselection/select-event.html": "skip", >+ "web-platform-tests/html/semantics/forms/textfieldselection/textfieldselection-setRangeText.html": "skip", >+ "web-platform-tests/html/semantics/forms/the-textarea-element": "import", >+ "web-platform-tests/html/semantics/interactive-elements/the-details-element/toggleEvent.html": "skip", >+ "web-platform-tests/html/semantics/interactive-elements/the-summary-element": "skip", >+ "web-platform-tests/html/semantics/links/downloading-resources": "import", >+ "web-platform-tests/html/semantics/links/following-hyperlinks": "skip", >+ "web-platform-tests/html/semantics/links/links-created-by-a-and-area-elements": "skip", >+ "web-platform-tests/html/semantics/scripting-1/the-script-element/execution-timing": "skip", >+ "web-platform-tests/html/semantics/scripting-1/the-script-element/module": "import", >+ "web-platform-tests/html/semantics/scripting-1/the-script-element/script-for-event.xhtml": "skip", >+ "web-platform-tests/html/semantics/scripting-1/the-script-element/script-text.xhtml": "skip", >+ "web-platform-tests/html/semantics/tabular-data": "import", >+ "web-platform-tests/html/semantics/tabular-data/processing-model-1": "import", >+ "web-platform-tests/html/semantics/text-level-semantics/the-data-element": "skip", >+ "web-platform-tests/html/syntax": "import", >+ "web-platform-tests/html/the-xhtml-syntax": "import", >+ "web-platform-tests/html/the-xhtml-syntax/parsing-xhtml-documents": "import", >+ "web-platform-tests/html/tools": "import", >+ "web-platform-tests/html/user-activation": "import", >+ "web-platform-tests/html/webappapis": "import", >+ "web-platform-tests/html/webappapis/dynamic-insertion": "import", >+ "web-platform-tests/html/webappapis/dynamic-markup-insertion": "import", >+ "web-platform-tests/html/webappapis/idle-callbacks": "skip", >+ "web-platform-tests/html/webappapis/scripting/event-loops/microtask_after_raf.html": "skip", >+ "web-platform-tests/html/webappapis/scripting/processing-model-2/unhandled-promise-rejections": "skip", >+ "web-platform-tests/html/webappapis/the-windoworworkerglobalscope-mixin": "import", >+ "web-platform-tests/http": "skip", >+ "web-platform-tests/image-decodes": "skip", >+ "web-platform-tests/imagebitmap-renderingcontext": "import", >+ "web-platform-tests/images": "import", >+ "web-platform-tests/infrastructure": "import", >+ "web-platform-tests/innerText": "import", >+ "web-platform-tests/input-events": "skip", >+ "web-platform-tests/interfaces": "import", >+ "web-platform-tests/intersection-observer": "import", >+ "web-platform-tests/js": "skip", >+ "web-platform-tests/keyboard-lock": "skip", >+ "web-platform-tests/loading/lazyload": "import", >+ "web-platform-tests/longtask-timing": "skip", >+ "web-platform-tests/magnetometer": "skip", >+ "web-platform-tests/mathml": "import", >+ "web-platform-tests/media-capabilities": "skip", >+ "web-platform-tests/media-source": "import", >+ "web-platform-tests/media/": "import", >+ "web-platform-tests/mediacapture-image": "skip", >+ "web-platform-tests/mediacapture-record": "import", >+ "web-platform-tests/mediacapture-streams": "import", >+ "web-platform-tests/mediacapture-streams/": "import", >+ "web-platform-tests/mediasession": "import", >+ "web-platform-tests/microdata": "skip", >+ "web-platform-tests/mimesniff": "import", >+ "web-platform-tests/mixed-content": "skip", >+ "web-platform-tests/mst-content-hint": "import", >+ "web-platform-tests/navigation-timing": "skip", >+ "web-platform-tests/netinfo": "skip", >+ "web-platform-tests/notifications": "import", >+ "web-platform-tests/old-tests": "skip", >+ "web-platform-tests/orientation-event": "skip", >+ "web-platform-tests/orientation-sensor": "skip", >+ "web-platform-tests/page-visibility": "import", >+ "web-platform-tests/paint-timing": "skip", >+ "web-platform-tests/payment-handler": "skip", >+ "web-platform-tests/payment-method-basic-card": "skip", >+ "web-platform-tests/payment-method-id": "skip", >+ "web-platform-tests/payment-request": "import", >+ "web-platform-tests/performance-timeline": "skip", >+ "web-platform-tests/picture-in-picture": "import", >+ "web-platform-tests/pointerevents": "import", >+ "web-platform-tests/pointerlock": "skip", >+ "web-platform-tests/preload": "skip", >+ "web-platform-tests/presentation-api": "skip", >+ "web-platform-tests/progress-events": "skip", >+ "web-platform-tests/proximity": "skip", >+ "web-platform-tests/quirks-mode": "skip", >+ "web-platform-tests/quirks/unitless-length": "import", >+ "web-platform-tests/referrer-policy": "import", >+ "web-platform-tests/remote-playback": "import", >+ "web-platform-tests/requestidlecallback": "import", >+ "web-platform-tests/resize-observer": "import", >+ "web-platform-tests/resize-observer/": "import", >+ "web-platform-tests/resource-timing": "import", >+ "web-platform-tests/resources": "import", >+ "web-platform-tests/resources/chromium": "skip", >+ "web-platform-tests/resources/test": "skip", >+ "web-platform-tests/screen-orientation": "skip", >+ "web-platform-tests/scroll-anchoring": "skip", >+ "web-platform-tests/scroll-into-view": "skip", >+ "web-platform-tests/secure-contexts": "import", >+ "web-platform-tests/selection": "skip", >+ "web-platform-tests/selectors": "skip", >+ "web-platform-tests/selectors-api": "skip", >+ "web-platform-tests/server-timing": "import", >+ "web-platform-tests/service-workers": "import", >+ "web-platform-tests/shadow-dom": "import", >+ "web-platform-tests/shadow-dom/untriaged": "skip", >+ "web-platform-tests/speech-api": "import", >+ "web-platform-tests/staticrange": "skip", >+ "web-platform-tests/storage": "skip", >+ "web-platform-tests/streams": "import", >+ "web-platform-tests/streams/writable-streams": "skip", >+ "web-platform-tests/subresource-integrity": "import", >+ "web-platform-tests/svg": "import", >+ "web-platform-tests/svg-aam": "skip", >+ "web-platform-tests/test/html/infrastructure": "import", >+ "web-platform-tests/testharness_runner.html": "skip", >+ "web-platform-tests/tools": "import", >+ "web-platform-tests/tools/__init__.py": "import", >+ "web-platform-tests/tools/html5lib": "import", >+ "web-platform-tests/tools/localpaths.py": "import", >+ "web-platform-tests/tools/manifest": "import", >+ "web-platform-tests/tools/pywebsocket": "import", >+ "web-platform-tests/tools/serve": "import", >+ "web-platform-tests/tools/six": "import", >+ "web-platform-tests/tools/sslutils": "import", >+ "web-platform-tests/tools/wptserve": "import", >+ "web-platform-tests/touch-events": "import", >+ "web-platform-tests/trusted-types": "skip", >+ "web-platform-tests/typedarrays": "skip", >+ "web-platform-tests/uievents": "import", >+ "web-platform-tests/upgrade-insecure-requests": "skip", >+ "web-platform-tests/url": "import", >+ "web-platform-tests/user-timing": "import", >+ "web-platform-tests/vibration": "skip", >+ "web-platform-tests/visual-viewport": "import", >+ "web-platform-tests/wai-aria": "skip", >+ "web-platform-tests/wasm": "import", >+ "web-platform-tests/wasm/jsapi": "import", >+ "web-platform-tests/web-animations": "import", >+ "web-platform-tests/web-nfc": "skip", >+ "web-platform-tests/web-share": "import", >+ "web-platform-tests/webaudio": "import", >+ "web-platform-tests/webauthn": "skip", >+ "web-platform-tests/webdriver": "skip", >+ "web-platform-tests/webgl": "skip", >+ "web-platform-tests/webmessaging": "import", >+ "web-platform-tests/webmessaging/": "import", >+ "web-platform-tests/webrtc": "import", >+ "web-platform-tests/webrtc/legacy": "skip", >+ "web-platform-tests/websockets": "import", >+ "web-platform-tests/webstorage": "skip", >+ "web-platform-tests/webusb": "skip", >+ "web-platform-tests/webvr": "skip", >+ "web-platform-tests/webvtt": "skip", >+ "web-platform-tests/webxr": "import", >+ "web-platform-tests/workers": "import", >+ "web-platform-tests/worklets": "import", >+ "web-platform-tests/x-frame-options": "skip", >+ "web-platform-tests/xhr": "import", > "web-platform/test/html/infrastructure": "import" >-} >+} >\ No newline at end of file >diff --git a/LayoutTests/imported/w3c/resources/resource-files.json b/LayoutTests/imported/w3c/resources/resource-files.json >index ebe543b4ef0b92b4aefaae0e0ad836b5f5dd9058..dac1e0a694ab86bd8806df1bac06d161cf88c3c2 100644 >--- a/LayoutTests/imported/w3c/resources/resource-files.json >+++ b/LayoutTests/imported/w3c/resources/resource-files.json >@@ -19,6 +19,36 @@ > "css/css-color/t421-rgb-hex3-expand-b.xht", > "css/css-color/t422-rgba-a0.6-a.xht", > "css/css-color/t425-hsla-basic-a.xht", >+ "css/css-flexbox/align-self-006.html", >+ "css/css-flexbox/align-self-010.html", >+ "css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html", >+ "css/css-flexbox/fixedpos-video-in-abspos-quirk-crash.html", >+ "css/css-flexbox/flex-direction-column-001-visual.html", >+ "css/css-flexbox/flex-direction-column-reverse-001-visual.html", >+ "css/css-flexbox/flex-direction-column-reverse-002-visual.html", >+ "css/css-flexbox/flex-direction-row-001-visual.html", >+ "css/css-flexbox/flex-direction-row-002-visual.html", >+ "css/css-flexbox/flex-direction-row-reverse-001-visual.html", >+ "css/css-flexbox/flex-direction-row-reverse-002-visual.html", >+ "css/css-flexbox/flex-shrink-large-value-crash.html", >+ "css/css-flexbox/flexbox-order-from-lowest.html", >+ "css/css-flexbox/inline-flex-editing-crash.html", >+ "css/css-flexbox/inline-flex-editing-with-updating-text-crash.html", >+ "css/css-flexbox/inline-flex-frameset-main-axis-crash.html", >+ "css/css-flexbox/justify-content_center.html", >+ "css/css-flexbox/justify-content_flex-end.html", >+ "css/css-flexbox/justify-content_flex-start.html", >+ "css/css-flexbox/justify-content_space-around.html", >+ "css/css-flexbox/justify-content_space-between-001.html", >+ "css/css-flexbox/negative-flex-margins-crash.html", >+ "css/css-flexbox/negative-flex-rounding-crash.html", >+ "css/css-flexbox/negative-item-margins-002-crash.html", >+ "css/css-flexbox/negative-item-margins-crash.html", >+ "css/css-flexbox/order-001.htm", >+ "css/css-flexbox/orthogonal-flex-item-crash.html", >+ "css/css-flexbox/position-relative-with-scrollable-with-abspos-crash.html", >+ "css/css-flexbox/remove-out-of-flow-child-crash.html", >+ "css/css-flexbox/zero-content-size-with-scrollbar-crash.html", > "css/css-multicol/multicol-rule-large-002.xht", > "css/css-shapes/test-plan/index.html", > "css/css-sizing/support/dynamic-available-size-iframe.html", >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/Flexible-order-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/Flexible-order-expected.html >deleted file mode 100644 >index 12e94ba598e74cd253f0f91daf7e88f44884b7fc..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/Flexible-order-expected.html >+++ /dev/null >@@ -1,53 +0,0 @@ >-<!DOCTYPE html> >-<html> >-<head><title>CSS Test: Change the value of 'order' property</title> >-<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" /> >- >-<style> >- >-.box { >- margin:0 auto; >- background:#CCC; >- border-radius:5px; >- width:600px; >-} >- >-.box div { >- margin:0; >- width:200px; >- float:left; >- text-align:center; >-} >- >-.box .red { >- background:#F00; >-} >-.box .blue { >- background:#00F; >-} >-.box .black { >- color:#FFF; >- background:#000; >-} >- >- >- >- >-</style> >- >-</head> >- >-<body> >- >- >-<!-- FLEX CONTAINER --> >-<div class="box"> >- <div class="blue">B</div> >- <div class="red">A</div> >- <div class="black">C</div> >-</div> >- >- >- >-</body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/Flexible-order.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/Flexible-order.html >deleted file mode 100644 >index 9b61e1e8a8fd4cc41e461b10b86051ed0e536ef5..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/Flexible-order.html >+++ /dev/null >@@ -1,66 +0,0 @@ >-<!DOCTYPE html> >-<html> >-<head><title>CSS Test: Change the value of 'order' property</title> >- >-<meta name="assert" content="The order of three should be blue-red-black" /> >- >-<link rel="match" href="reference/Flexible-order-ref.html"> >-<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" /> >-<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" /> >- >-<style> >- >-.box { >- margin:0 auto; >- background:#CCC; >- border-radius:5px; >- width:600px; >- display:flex; >- flex-flow:row; >-} >- >-.box div { >- text-align:center; >-} >- >-.box .red { >- order:-2; >- flex:0 1 auto; >- width:200px; >- background:#F00; >-} >-.box .blue { >- order:-4; >- flex:0 1 auto; >- width:200px; >- background:#00F; >-} >-.box .black { >- order:-1; >- flex:0 1 auto; >- width:200px; >- background:#000; >- color:#FFF; >-} >- >- >- >- >-</style> >- >-</head> >- >-<body> >- >- >-<!-- FLEX CONTAINER --> >-<div class="box"> >- <div class="red">A</div> >- <div class="blue">B</div> >- <div class="black">C</div> >-</div> >- >- >- >-</body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr.html >deleted file mode 100644 >index 095936edf8b982bc228316d1a4f449621e94a1c3..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr.html >+++ /dev/null >@@ -1,34 +0,0 @@ >-<!DOCTYPE html> >-<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >-<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >-<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >-<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<style> >- .flex { >- display: flex; >- position: relative; >- writing-mode: horizontal-tb; >- direction: ltr; >- width: 100px; >- height: 100px; >- border: solid white; >- border-left-width: 20px; >- left: -20px; >- border-top-width: 5px; >- top: -5px; >- border-right-width: 10px; >- border-bottom-width: 15px; >- background: red; >- } >- .flex > div { >- position: absolute; >- width: 100%; >- height: 100%; >- background: green; >- } >-</style> >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >-<div class="flex"> >- <div></div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-rtl-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-rtl-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-rtl-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-rtl.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-rtl.html >deleted file mode 100644 >index b377e8dd6dde7c3a3cb7b6b03712d4fa87f51497..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-rtl.html >+++ /dev/null >@@ -1,34 +0,0 @@ >-<!DOCTYPE html> >-<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >-<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >-<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >-<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<style> >- .flex { >- display: flex; >- position: relative; >- writing-mode: horizontal-tb; >- direction: rtl; >- width: 100px; >- height: 100px; >- border: solid white; >- border-left-width: 20px; >- left: -20px; >- border-top-width: 5px; >- top: -5px; >- border-right-width: 10px; >- border-bottom-width: 15px; >- background: red; >- } >- .flex > div { >- position: absolute; >- width: 100%; >- height: 100%; >- background: green; >- } >-</style> >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >-<div class="flex"> >- <div></div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-ltr-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-ltr-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-ltr-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-ltr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-ltr.html >deleted file mode 100644 >index 02c7cf3fd900d82210656d59b04c37976b751ca5..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-ltr.html >+++ /dev/null >@@ -1,34 +0,0 @@ >-<!DOCTYPE html> >-<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >-<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >-<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >-<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<style> >- .flex { >- display: flex; >- position: relative; >- writing-mode: vertical-lr; >- direction: ltr; >- width: 100px; >- height: 100px; >- border: solid white; >- border-left-width: 20px; >- left: -20px; >- border-top-width: 5px; >- top: -5px; >- border-right-width: 10px; >- border-bottom-width: 15px; >- background: red; >- } >- .flex > div { >- position: absolute; >- width: 100%; >- height: 100%; >- background: green; >- } >-</style> >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >-<div class="flex"> >- <div></div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-rtl-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-rtl-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-rtl-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-rtl.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-rtl.html >deleted file mode 100644 >index a156a727a529f7fbb0ba92b216d47487bc1b3125..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-rtl.html >+++ /dev/null >@@ -1,34 +0,0 @@ >-<!DOCTYPE html> >-<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >-<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >-<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >-<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<style> >- .flex { >- display: flex; >- position: relative; >- writing-mode: vertical-lr; >- direction: rtl; >- width: 100px; >- height: 100px; >- border: solid white; >- border-left-width: 20px; >- left: -20px; >- border-top-width: 5px; >- top: -5px; >- border-right-width: 10px; >- border-bottom-width: 15px; >- background: red; >- } >- .flex > div { >- position: absolute; >- width: 100%; >- height: 100%; >- background: green; >- } >-</style> >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >-<div class="flex"> >- <div></div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-ltr-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-ltr-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-ltr-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-ltr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-ltr.html >deleted file mode 100644 >index 99ea3c41ca9fa1060fb036942efc5b93b6e140b8..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-ltr.html >+++ /dev/null >@@ -1,34 +0,0 @@ >-<!DOCTYPE html> >-<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >-<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >-<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >-<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<style> >- .flex { >- display: flex; >- position: relative; >- writing-mode: vertical-rl; >- direction: ltr; >- width: 100px; >- height: 100px; >- border: solid white; >- border-left-width: 20px; >- left: -20px; >- border-top-width: 5px; >- top: -5px; >- border-right-width: 10px; >- border-bottom-width: 15px; >- background: red; >- } >- .flex > div { >- position: absolute; >- width: 100%; >- height: 100%; >- background: green; >- } >-</style> >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >-<div class="flex"> >- <div></div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-rtl-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-rtl-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-rtl-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-rtl.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-rtl.html >deleted file mode 100644 >index a156a727a529f7fbb0ba92b216d47487bc1b3125..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-rtl.html >+++ /dev/null >@@ -1,34 +0,0 @@ >-<!DOCTYPE html> >-<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >-<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >-<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >-<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<style> >- .flex { >- display: flex; >- position: relative; >- writing-mode: vertical-lr; >- direction: rtl; >- width: 100px; >- height: 100px; >- border: solid white; >- border-left-width: 20px; >- left: -20px; >- border-top-width: 5px; >- top: -5px; >- border-right-width: 10px; >- border-bottom-width: 15px; >- background: red; >- } >- .flex > div { >- position: absolute; >- width: 100%; >- height: 100%; >- background: green; >- } >-</style> >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >-<div class="flex"> >- <div></div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-descendent-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-descendent-001-expected.txt >deleted file mode 100644 >index cd79d0b2fd95c440348a2924c08f308c65c55521..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-descendent-001-expected.txt >+++ /dev/null >@@ -1,3 +0,0 @@ >- >-PASS .flexbox 1 >- >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-descendent-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-descendent-001.html >deleted file mode 100644 >index 1aebb0f319f566db19070e7bad66e622a4ab8d3f..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-descendent-001.html >+++ /dev/null >@@ -1,32 +0,0 @@ >-<!DOCTYPE html> >-<html> >-<head> >-<title>CSS Flexbox: removing abspos descendents</title> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=167566"> >-<meta name="assert" content="This test ensures that flex item's padding doesn't disappear when an abspos descendent is removed."> >-<link href="support/flexbox.css" rel="stylesheet"> >-<script src="/resources/testharness.js"></script> >-<script src="/resources/testharnessreport.js"></script> >-<script src="/resources/check-layout-th.js"></script> >-<script> >-window.onload = function() { >- document.body.offsetHeight; >- >- document.getElementById('to-hide').style.display = "none"; >- checkLayout(".flexbox"); >-}; >-</script> >-</head> >-<body> >-<div id=log></div> >-<div class="flexbox" style="height: 100px;" data-expected-height="100"> >- <div style="width: 100%; overflow: auto; padding-bottom: 100px; background-color: red;" data-expected-height="100"> >- <div style="position: relative; height: 100px; background-color: green;" data-expected-height="100"> >- <div id="to-hide" style="position: absolute;" data-expected-height="0"></div> >- </div> >- </div> >-</div> >-</body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html >new file mode 100644 >index 0000000000000000000000000000000000000000..53229296ff22f1f0943dba5d28d38ec2e22bacfd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html >@@ -0,0 +1,34 @@ >+<!DOCTYPE html> >+<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<style> >+ .flex { >+ display: flex; >+ position: relative; >+ writing-mode: horizontal-tb; >+ direction: ltr; >+ width: 100px; >+ height: 100px; >+ border: solid white; >+ border-left-width: 20px; >+ left: -20px; >+ border-top-width: 5px; >+ top: -5px; >+ border-right-width: 10px; >+ border-bottom-width: 15px; >+ background: red; >+ } >+ .flex > div { >+ position: absolute; >+ width: 100%; >+ height: 100%; >+ background: green; >+ } >+</style> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div class="flex"> >+ <div></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1788c0d3b86670681f2f466d4aba906285c3d8d7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html >@@ -0,0 +1,34 @@ >+<!DOCTYPE html> >+<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<style> >+ .flex { >+ display: flex; >+ position: relative; >+ writing-mode: horizontal-tb; >+ direction: rtl; >+ width: 100px; >+ height: 100px; >+ border: solid white; >+ border-left-width: 20px; >+ left: -20px; >+ border-top-width: 5px; >+ top: -5px; >+ border-right-width: 10px; >+ border-bottom-width: 15px; >+ background: red; >+ } >+ .flex > div { >+ position: absolute; >+ width: 100%; >+ height: 100%; >+ background: green; >+ } >+</style> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div class="flex"> >+ <div></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c3435235aafaea7d5afaf0dcaf5a95770a95ce08 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html >@@ -0,0 +1,34 @@ >+<!DOCTYPE html> >+<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<style> >+ .flex { >+ display: flex; >+ position: relative; >+ writing-mode: vertical-lr; >+ direction: ltr; >+ width: 100px; >+ height: 100px; >+ border: solid white; >+ border-left-width: 20px; >+ left: -20px; >+ border-top-width: 5px; >+ top: -5px; >+ border-right-width: 10px; >+ border-bottom-width: 15px; >+ background: red; >+ } >+ .flex > div { >+ position: absolute; >+ width: 100%; >+ height: 100%; >+ background: green; >+ } >+</style> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div class="flex"> >+ <div></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0c7b701a4731d77165dfd238e3ada51aa9a470df >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html >@@ -0,0 +1,34 @@ >+<!DOCTYPE html> >+<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<style> >+ .flex { >+ display: flex; >+ position: relative; >+ writing-mode: vertical-lr; >+ direction: rtl; >+ width: 100px; >+ height: 100px; >+ border: solid white; >+ border-left-width: 20px; >+ left: -20px; >+ border-top-width: 5px; >+ top: -5px; >+ border-right-width: 10px; >+ border-bottom-width: 15px; >+ background: red; >+ } >+ .flex > div { >+ position: absolute; >+ width: 100%; >+ height: 100%; >+ background: green; >+ } >+</style> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div class="flex"> >+ <div></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html >new file mode 100644 >index 0000000000000000000000000000000000000000..618bda43879ab04fcd4728bb0e6ab273ae46f9a0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html >@@ -0,0 +1,34 @@ >+<!DOCTYPE html> >+<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<style> >+ .flex { >+ display: flex; >+ position: relative; >+ writing-mode: vertical-rl; >+ direction: ltr; >+ width: 100px; >+ height: 100px; >+ border: solid white; >+ border-left-width: 20px; >+ left: -20px; >+ border-top-width: 5px; >+ top: -5px; >+ border-right-width: 10px; >+ border-bottom-width: 15px; >+ background: red; >+ } >+ .flex > div { >+ position: absolute; >+ width: 100%; >+ height: 100%; >+ background: green; >+ } >+</style> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div class="flex"> >+ <div></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0c7b701a4731d77165dfd238e3ada51aa9a470df >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html >@@ -0,0 +1,34 @@ >+<!DOCTYPE html> >+<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<style> >+ .flex { >+ display: flex; >+ position: relative; >+ writing-mode: vertical-lr; >+ direction: rtl; >+ width: 100px; >+ height: 100px; >+ border: solid white; >+ border-left-width: 20px; >+ left: -20px; >+ border-top-width: 5px; >+ top: -5px; >+ border-right-width: 10px; >+ border-bottom-width: 15px; >+ background: red; >+ } >+ .flex > div { >+ position: absolute; >+ width: 100%; >+ height: 100%; >+ background: green; >+ } >+</style> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div class="flex"> >+ <div></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-descendent-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-descendent-001-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..cd79d0b2fd95c440348a2924c08f308c65c55521 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-descendent-001-expected.txt >@@ -0,0 +1,3 @@ >+ >+PASS .flexbox 1 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-descendent-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-descendent-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ecba51e8efbc5657d0b8a222393974f34ee1010b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-descendent-001.html >@@ -0,0 +1,32 @@ >+<!DOCTYPE html> >+<html> >+<head> >+<title>CSS Flexbox: removing abspos descendents</title> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=167566"> >+<meta name="assert" content="This test ensures that flex item's padding doesn't disappear when an abspos descendent is removed."> >+<link href="../support/flexbox.css" rel="stylesheet"> >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+<script> >+window.onload = function() { >+ document.body.offsetHeight; >+ >+ document.getElementById('to-hide').style.display = "none"; >+ checkLayout(".flexbox"); >+}; >+</script> >+</head> >+<body> >+<div id=log></div> >+<div class="flexbox" style="height: 100px;" data-expected-height="100"> >+ <div style="width: 100%; overflow: auto; padding-bottom: 100px; background-color: red;" data-expected-height="100"> >+ <div style="position: relative; height: 100px; background-color: green;" data-expected-height="100"> >+ <div id="to-hide" style="position: absolute;" data-expected-height="0"></div> >+ </div> >+ </div> >+</div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..98b4bd95823d4a14a52bbcf176f3dfbbbc211d54 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..da5968a1bd9ba745e55c79f1642ddb025cdc6c96 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-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 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b9bde37740edd87ab94a6fffbf115a9f7c74bd89 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..20a6d2089fa34a0bd44b5277d8154c6e0a7c6e60 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-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 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3d4867f617c4bdf092f4848808b53e42c0611b79 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..9503187de85b6bde62f9570d08bf4aa568420553 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003.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 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82399e3accfaf678467501436c265aa4375cb4d6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..121921c6c39602cdd847a12efb350f56b3f179e2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-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> >+ <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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8d853a84df64f822d03ae2456a66b13b68e71064 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5fe76de0aed644e5353b0c766746f840fca71a20 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.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 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f4880c4d68de1344fab11e38909eff015235aef0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c6ad204f0955169c57873ef8f1116afcc20511d6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006.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 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..55a390da0cdb87c04c6480bd4596f110f32bd47b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1af6c30d3951400853f2d39cefa26ae3a64fe9a5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007.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 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f8b40d27e858f2e10dc76880a79f6cc3139813c7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008.html >new file mode 100644 >index 0000000000000000000000000000000000000000..83381ca85f4417c8cca9d40ef92bc0e4f2431621 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008.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 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3d4867f617c4bdf092f4848808b53e42c0611b79 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..592a62e46501e413656082f28eea80585847929d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..989d6ac13d5e2ec7055dd349bc086d5c09fa26f0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2d5ec17f605cb3a62610b1f502da94e6d370bdd9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-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> >+ <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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..989d6ac13d5e2ec7055dd349bc086d5c09fa26f0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..58cc640df96e202d01fbdfa2a57f1e7f3e6860b5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3d4867f617c4bdf092f4848808b53e42c0611b79 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002-expected.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-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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..87d44d1231e5d5e132b1fd665abeadf9da7b8af4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-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> >+ <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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6c0f732532d190535baa258787887c0ddd703fa2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6f0e06fbf0310a2cc466e96ad5be61c54aa3e7e0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c1715dcd64c36fd6d37e283cb4d0a5526f30e0c4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d48bd041322c3bd7b2b1c1e892f92658e4432e96 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d1b2c59990618c9bc2788cb67c3394ae977b134e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003-expected.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 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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3e272bf0f9e6a15a9b0b65760cc1eacce258304f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..24fb8a1e7fd4bf36073d0658680c090c8ca46400 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004-expected.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 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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82b3963aedb9fbdbc0d9ca36b7138c023a115ac1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..9d8f4469ac36d78c566fb0a07200124e38aa10b0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html >new file mode 100644 >index 0000000000000000000000000000000000000000..09ea4bc145a40e10104ae7bce1176b969ab7a762 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b3df68fab3c1812ae4bf7f24caa36f066330f71c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2e14f9f1766310e6b8f0b31dfca47756bd71d442 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a5316ce81107a5b5fa9875a120f7725955fefa35 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007-expected.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 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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html >new file mode 100644 >index 0000000000000000000000000000000000000000..abca9769a59ad06dd8ce50b2f643d580349b3bc4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c40a2d75cf31a24051ec0a6a0cd7acf53d8a4ee4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008-expected.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 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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html >new file mode 100644 >index 0000000000000000000000000000000000000000..fae2b46418ab9a06bb76f2fd443b2d0f0117f579 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..75a998e34121bd8067a6694f523b32c0e928689a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001-expected.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 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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..94c979033ae748d99e82ea744c81b4ebc9b970df >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..75a998e34121bd8067a6694f523b32c0e928689a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002-expected.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 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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..21252e65955676ad5bee630c48e270e3d63febaa >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html >@@ -0,0 +1,95 @@ >+<!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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b48de7e5cb115ba2fd078163a852e4de62cba292 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..215ed719967c321974799633be520a3ebbcbc1f8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2ed4a2d798a77022534b133fad90b14c88db8a0c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..bf12311c74a492fd0cefdd7f02cf1bdb4369ff01 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html >@@ -0,0 +1,95 @@ >+<!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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..fb1fb93ea997b1107efa595f17ae5b9c38419a92 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001-expected.html >@@ -0,0 +1,47 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<html> >+<head> >+ <title>Reference: Testing safe overflow-position for align-self in absolutely positioned boxes in flex containers</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flex { >+ display: flex; >+ height: 50px; >+ width: 50px; >+ border: 3px solid black; >+ vertical-align: top; >+ margin: 20px; >+ position: relative; >+ } >+ .child { >+ border: 2px dotted purple; >+ background: teal; >+ width: 65px; >+ height: 65px; >+ align-self: start; >+ position: absolute; >+ background: yellow; >+ } >+ .rowDir { >+ flex-direction: row; >+ } >+ .colDir { >+ flex-direction: column; >+ } >+ .vertRL { >+ writing-mode: vertical-rl; >+ } >+ </style> >+</head> >+<body> >+ <div class="flex rowDir"><div class="child"></div></div> >+ <div class="flex colDir"><div class="child"></div></div> >+ <div class="flex rowDir vertRL"><div class="child"></div></div> >+ <div class="flex colDir vertRL"><div class="child"></div></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b7302cb962dbff9bfc99592ac7a2d2f2aae52b21 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html >@@ -0,0 +1,49 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<html> >+<head> >+ <title>CSS Test: Testing safe overflow-position for align-self in absolutely positioned boxes in flex containers</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+ <link rel="match" href="flex-abspos-staticpos-align-self-safe-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flex { >+ display: flex; >+ height: 50px; >+ width: 50px; >+ border: 3px solid black; >+ vertical-align: top; >+ margin: 20px; >+ position: relative; >+ } >+ .child { >+ border: 2px dotted purple; >+ background: teal; >+ width: 65px; >+ height: 65px; >+ align-self: safe center; >+ position: absolute; >+ background: yellow; >+ } >+ .rowDir { >+ flex-direction: row; >+ } >+ .colDir { >+ flex-direction: column; >+ } >+ .vertRL { >+ writing-mode: vertical-rl; >+ } >+ </style> >+</head> >+<body> >+ <div class="flex rowDir"><div class="child"></div></div> >+ <div class="flex colDir"><div class="child"></div></div> >+ <div class="flex rowDir vertRL"><div class="child"></div></div> >+ <div class="flex colDir vertRL"><div class="child"></div></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..e9b697062418aa434d33e65f9295839ca9ff1175 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001-expected.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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..bb5bee014ae5163a826e31e7140c013fad877217 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/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-flexbox/#abspos-items"> >+ <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..4459c1a03c89349066235ead8a4e5ea24a2ac75f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002-expected.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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5e11c5b0fcc0e4f2c09aa1672dd32e2647400b3e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/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-flexbox/#abspos-items"> >+ <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..75a998e34121bd8067a6694f523b32c0e928689a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003-expected.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 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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b285ad4ff3ad13f4dc7ccf3f44e2504e1250c9a4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.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: 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a4be517ce0669defc631689e5208c3e7fa8abc4e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004-expected.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 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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b7566887b4a0ecea60d79f26f524010c713574a1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html >@@ -0,0 +1,96 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS 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-flexbox/#abspos-items"> >+ <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> >+ <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> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ec0d6cc41278ced0ad415544e73f1b6804e9f946 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001-expected.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 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 style="display: none"> >+ <!-- >+ These tests will be valid when >+ https://github.com/w3c/csswg-drafts/issues/1002 is fixed >+ --> >+ <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> >+ </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 style="display: none"> >+ <!-- >+ These tests will be valid when >+ https://github.com/w3c/csswg-drafts/issues/1002 is fixed >+ --> >+ <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> >+ </div> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..80dd2f68f9510ce7535b97f80655ce8b483886f4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-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 "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-flexbox/#abspos-items"> >+ <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0abf592d6d476d0e5a9a01b163e3aebf9fffb74d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001-expected.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: 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 style="display: none"> >+ <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> >+ </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 style="display: none"> >+ <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> >+ </div> >+ <br> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..004ce831c2933efadd3d5434ce4201b8d60c3a09 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html >@@ -0,0 +1,80 @@ >+<!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-flexbox/#abspos-items"> >+ <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 --> >+ <!-- TODO: https://github.com/w3c/csswg-drafts/issues/1002 >+ <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 --> >+ <!-- TODO: https://github.com/w3c/csswg-drafts/issues/1002 >+ <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..be61c53b491d8445aaedcc00dc42b1575994f533 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0a7ee1b74dd7ac9aa9de1a98eb03239381cffe6e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.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 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..be61c53b491d8445aaedcc00dc42b1575994f533 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d3eb0865493b741f52822a6d73fc47306a9dd9b9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.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 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f609ed2896af4c476dd7832a3c5071da48c240f8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b64026950d1310c64535ba55973f9ba918fbbfac >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.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 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f609ed2896af4c476dd7832a3c5071da48c240f8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b68d09b311e4dc7bd42b733f231144311a608787 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.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 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b04e8f2337660a2147f63736beb0603255768c8c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html >new file mode 100644 >index 0000000000000000000000000000000000000000..7180f4e15617fa943ad6513c0d67bbfbac026866 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.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 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b04e8f2337660a2147f63736beb0603255768c8c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6638a08ba848c1eadf82c70a9627094f692941a9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.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 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2da4bf974f674b2692520ecd40c503392c31087b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html >new file mode 100644 >index 0000000000000000000000000000000000000000..4ebcb79635ad0bf27790f33e28ecf49f8f233dc8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.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 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2da4bf974f674b2692520ecd40c503392c31087b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html >new file mode 100644 >index 0000000000000000000000000000000000000000..242a1dc5f885d993a4c36ae3c2a409ca02e969ad >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.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 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2c70fa14a6464d28dcd656f4f429beae9e892ec0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..dd8333ab72161f7cedfcdda130bc2ee1e0e2ed76 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.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: 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8901d350f84c19eacbc478d40ebcc00c210ad090 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002-expected.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 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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..9ae681a587305eb79faff6fcfdd771394dcada25 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.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: 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..64a85443a4b85aa8a7b791b96b62bc29a8f994f3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001-expected.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 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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..84899d2144569b3881867c63565bfbe0fb696a8d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.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: 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3e109d01e63c4b612543d24018e98a6f9ddebc76 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002-expected.html >@@ -0,0 +1,95 @@ >+<!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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1e11ea70eacfbe8948f188c430826346b6cbad54 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.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: 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-flexbox/#abspos-items"> >+ <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> >+ <!-- <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> >+ <!-- <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d4f75a036ad049006776fe8f5e44b165f4a2867a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001-expected.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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1f826ca38f4e8d7cfadf2fdf154a401b88e473a8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/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-flexbox/#abspos-items"> >+ <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..428aeae649464b16992800ba324ec23bececc1f8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001-expected.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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..535fa2ecbf642f5159cf91a28f6d9cdd1ec411b8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/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-flexbox/#abspos-items"> >+ <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..38cfdff074c539efa2ba41492e6327b5d775b0ea >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002-expected.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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..624a9e8592f6c766f9ea6990855b2b35a77f526a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/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-flexbox/#abspos-items"> >+ <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/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..95c1f3341d048664792cfaad92be4ae2c3971dd7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001a-expected.html >@@ -0,0 +1,26 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .tealBlock { >+ background: teal; >+ width: 20px; >+ height: 20px; >+ margin-bottom: 5px; >+ } >+ </style> >+</head> >+<body> >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..fabe204b2796257fd3a74216a87c79960c42a9f9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001a.html >@@ -0,0 +1,54 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> >+ <link rel="match" href="flexbox-abspos-child-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ height: 10px; >+ width: 10px; >+ background: purple; >+ margin-bottom: 15px; >+ position: relative; >+ } >+ .absPos { >+ position: absolute; >+ background: teal; >+ } >+ .testMinWidth { >+ width: 10px; >+ height: 20px; >+ min-width: 20px; >+ } >+ .testMaxWidth { >+ width: 50px; >+ height: 20px; >+ max-width: 20px; >+ } >+ .testMinHeight { >+ width: 20px; >+ height: 10px; >+ min-height: 20px; >+ } >+ .testMaxHeight { >+ width: 20px; >+ height: 50px; >+ max-height: 20px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><div class="absPos testMinWidth"></div></div> >+ <div class="flexContainer"><div class="absPos testMaxWidth"></div></div> >+ <div class="flexContainer"><div class="absPos testMinHeight"></div></div> >+ <div class="flexContainer"><div class="absPos testMaxHeight"></div></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..95c1f3341d048664792cfaad92be4ae2c3971dd7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001b-expected.html >@@ -0,0 +1,26 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .tealBlock { >+ background: teal; >+ width: 20px; >+ height: 20px; >+ margin-bottom: 5px; >+ } >+ </style> >+</head> >+<body> >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..30fc58c3d12e336663d0aaadf959e23d87a525a1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001b.html >@@ -0,0 +1,55 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> >+ <link rel="match" href="flexbox-abspos-child-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ flex-direction: column; >+ height: 10px; >+ width: 10px; >+ background: purple; >+ margin-bottom: 15px; >+ position: relative; >+ } >+ .absPos { >+ position: absolute; >+ background: teal; >+ } >+ .testMinWidth { >+ width: 10px; >+ height: 20px; >+ min-width: 20px; >+ } >+ .testMaxWidth { >+ width: 50px; >+ height: 20px; >+ max-width: 20px; >+ } >+ .testMinHeight { >+ width: 20px; >+ height: 10px; >+ min-height: 20px; >+ } >+ .testMaxHeight { >+ width: 20px; >+ height: 50px; >+ max-height: 20px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><div class="absPos testMinWidth"></div></div> >+ <div class="flexContainer"><div class="absPos testMaxWidth"></div></div> >+ <div class="flexContainer"><div class="absPos testMinHeight"></div></div> >+ <div class="flexContainer"><div class="absPos testMaxHeight"></div></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..876e5d6c2cbd282bd0e35dac0433a2413180f620 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-002-expected.html >@@ -0,0 +1,44 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .tealBlock { >+ background: teal; >+ width: 10px; >+ height: 10px; >+ margin-bottom: 5px; >+ } >+ .purpleBlock { >+ background: purple; >+ width: 10px; >+ height: 10px; >+ margin-bottom: 5px; >+ } >+ </style> >+</head> >+<body> >+ >+ <div class="purpleBlock"></div> >+ <div class="purpleBlock"></div> >+ <div class="purpleBlock"></div> >+ <div class="purpleBlock"></div> >+ >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+ >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+ <div class="tealBlock"></div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8234085681ddc0f72e8da84471363ecb08d4d460 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-002.html >@@ -0,0 +1,62 @@ >+<!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: Test that "flex-basis" doesn't affect layout of abspos flex child >+ </title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> >+ <link rel="match" href="flexbox-abspos-child-002-ref.html"> >+ <style> >+ .flex { >+ display: flex; >+ height: 10px; >+ width: 10px; >+ background: purple; >+ margin-bottom: 5px; >+ position: relative; >+ } >+ .flex > * { >+ position: absolute; >+ background: teal; >+ height: 10px; >+ } >+ .sized { >+ width: 10px; >+ } >+ .implied { >+ left: 0; >+ right: 0; >+ } >+ </style> >+</head> >+<body> >+ <!-- In all cases below, flex-basis should have no effect on layout (because >+ it's on an element that is abspos and hence not a flex item). --> >+ >+ <!-- Abspos child has auto width (which should end up 0): --> >+ <div class="flex"><div style="flex-basis: 2px"></div></div> >+ <div class="flex"><div style="flex-basis: 100px"></div></div> >+ <div class="flex"><div style="flex-basis: 80%"></div></div> >+ <div class="flex"><div style="flex-basis: content"></div></div> >+ >+ <!-- Abspos child has explicit 10px width: --> >+ <div class="flex"><div class="sized" style="flex-basis: 2px"></div></div> >+ <div class="flex"><div class="sized" style="flex-basis: 100px"></div></div> >+ <div class="flex"><div class="sized" style="flex-basis: 80%"></div></div> >+ <div class="flex"><div class="sized" style="flex-basis: content"></div></div> >+ >+ <!-- Abspos child has implicit 10px width (implied by auto width and >+ constrained left/right properties): --> >+ <div class="flex"><div class="implied" style="flex-basis: 2px"></div></div> >+ <div class="flex"><div class="implied" style="flex-basis: 100px"></div></div> >+ <div class="flex"><div class="implied" style="flex-basis: 80%"></div></div> >+ <div class="flex"><div class="implied" style="flex-basis: content"></div></div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_absolute-atomic-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_absolute-atomic-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..310ea204b32da7b43b8fda0526ae7b037b3c53ce >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_absolute-atomic-expected.html >@@ -0,0 +1,21 @@ >+<!DOCTYPE html> >+<title>flexbox | abspos atomic flexitems</title> >+<link rel="author" href="http://opera.com" title="Opera Software"> >+<style> >+body {margin: 0;} >+body>div { >+ background: #ffcc00; >+ >+ display: flex; >+ justify-content: space-around; >+} >+div div { >+ background: #3366cc; >+ margin: 20px; >+} >+</style> >+ >+<div> >+ <div>filler</div> >+ <div>filler</div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_absolute-atomic.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_absolute-atomic.html >new file mode 100644 >index 0000000000000000000000000000000000000000..dae6b3e43ea71f3795508dd0ca4b243d4510c383 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_absolute-atomic.html >@@ -0,0 +1,28 @@ >+<!DOCTYPE html> >+<title>flexbox | abspos atomic flexitems</title> >+<link rel="author" href="http://opera.com" title="Opera Software"> >+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> >+<link rel="match" href="flexbox_absolute-atomic-ref.html"> >+<style> >+body {margin: 0;} >+body>div { >+ background: #ffcc00; >+ >+ display: flex; >+ justify-content: space-around; >+} >+div div { >+ background: #3366cc; >+ margin: 20px; >+} >+#abs { >+ position: absolute; >+ top: -1000px; >+} >+</style> >+ >+<div> >+ <div>filler</div> >+ <div id="abs">filler</div> >+ <div>filler</div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_inline-abspos-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_inline-abspos-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f2fab5a3b178970297c50cd3655dba0ff7cc11bc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_inline-abspos-expected.html >@@ -0,0 +1,3 @@ >+<!doctype html> >+<title>CSS Test Reference</title> >+<!-- Intentionally blank --> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_inline-abspos.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_inline-abspos.html >new file mode 100644 >index 0000000000000000000000000000000000000000..56077ae58566efca2ff41b73edcb7a2d899a36d5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_inline-abspos.html >@@ -0,0 +1,15 @@ >+<!DOCTYPE html> >+<title>flexbox | absolutely positioned inline</title> >+<link rel="author" href="http://opera.com" title="Opera Software"> >+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> >+<link rel="match" href="/css/reference/blank.html"> >+<style> >+div { >+ background: red; >+ margin-top: -20em; >+ position: absolute; >+ display: inline-flex; >+} >+</style> >+ >+<div>FAIL</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-001-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..35a6ce7387a12912c774182c4a72d3103f53c94a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-001-expected.txt >@@ -0,0 +1,242 @@ >+ >+PASS .flexbox 1 >+PASS .flexbox 2 >+PASS .flexbox 3 >+PASS .flexbox 4 >+PASS .flexbox 5 >+PASS .flexbox 6 >+PASS .flexbox 7 >+PASS .flexbox 8 >+PASS .flexbox 9 >+PASS .flexbox 10 >+PASS .flexbox 11 >+PASS .flexbox 12 >+PASS .flexbox 13 >+PASS .flexbox 14 >+PASS .flexbox 15 >+PASS .flexbox 16 >+PASS .flexbox 17 >+PASS .flexbox 18 >+PASS .flexbox 19 >+PASS .flexbox 20 >+PASS .flexbox 21 >+PASS .flexbox 22 >+PASS .flexbox 23 >+PASS .flexbox 24 >+PASS .flexbox 25 >+PASS .flexbox 26 >+PASS .flexbox 27 >+PASS .flexbox 28 >+PASS .flexbox 29 >+PASS .flexbox 30 >+PASS .flexbox 31 >+PASS .flexbox 32 >+PASS .flexbox 33 >+PASS .flexbox 34 >+PASS .flexbox 35 >+PASS .flexbox 36 >+PASS .flexbox 37 >+PASS .flexbox 38 >+PASS .flexbox 39 >+PASS .flexbox 40 >+PASS .flexbox 41 >+PASS .flexbox 42 >+PASS .flexbox 43 >+PASS .flexbox 44 >+PASS .flexbox 45 >+PASS .flexbox 46 >+PASS .flexbox 47 >+PASS .flexbox 48 >+PASS .flexbox 49 >+PASS .flexbox 50 >+PASS .flexbox 51 >+PASS .flexbox 52 >+PASS .flexbox 53 >+PASS .flexbox 54 >+PASS .flexbox 55 >+PASS .flexbox 56 >+PASS .flexbox 57 >+PASS .flexbox 58 >+PASS .flexbox 59 >+PASS .flexbox 60 >+PASS .flexbox 61 >+PASS .flexbox 62 >+PASS .flexbox 63 >+PASS .flexbox 64 >+PASS .flexbox 65 >+PASS .flexbox 66 >+PASS .flexbox 67 >+PASS .flexbox 68 >+PASS .flexbox 69 >+PASS .flexbox 70 >+PASS .flexbox 71 >+PASS .flexbox 72 >+PASS .flexbox 73 >+PASS .flexbox 74 >+PASS .flexbox 75 >+PASS .flexbox 76 >+PASS .flexbox 77 >+PASS .flexbox 78 >+PASS .flexbox 79 >+PASS .flexbox 80 >+PASS .flexbox 81 >+PASS .flexbox 82 >+PASS .flexbox 83 >+PASS .flexbox 84 >+PASS .flexbox 85 >+PASS .flexbox 86 >+PASS .flexbox 87 >+PASS .flexbox 88 >+PASS .flexbox 89 >+PASS .flexbox 90 >+PASS .flexbox 91 >+PASS .flexbox 92 >+PASS .flexbox 93 >+PASS .flexbox 94 >+PASS .flexbox 95 >+PASS .flexbox 96 >+PASS .flexbox 97 >+PASS .flexbox 98 >+PASS .flexbox 99 >+PASS .flexbox 100 >+PASS .flexbox 101 >+PASS .flexbox 102 >+PASS .flexbox 103 >+PASS .flexbox 104 >+PASS .flexbox 105 >+PASS .flexbox 106 >+PASS .flexbox 107 >+PASS .flexbox 108 >+PASS .flexbox 109 >+PASS .flexbox 110 >+PASS .flexbox 111 >+PASS .flexbox 112 >+PASS .flexbox 113 >+PASS .flexbox 114 >+PASS .flexbox 115 >+PASS .flexbox 116 >+PASS .flexbox 117 >+PASS .flexbox 118 >+PASS .flexbox 119 >+PASS .flexbox 120 >+horizontal-tb ltr row justify-content-flex-start >+horizontal-tb ltr row justify-content-flex-end >+horizontal-tb ltr row justify-content-center >+horizontal-tb ltr row justify-content-space-between >+horizontal-tb ltr row justify-content-space-around >+horizontal-tb rtl row justify-content-flex-start >+horizontal-tb rtl row justify-content-flex-end >+horizontal-tb rtl row justify-content-center >+horizontal-tb rtl row justify-content-space-between >+horizontal-tb rtl row justify-content-space-around >+horizontal-tb ltr column justify-content-flex-start >+horizontal-tb ltr column justify-content-flex-end >+horizontal-tb ltr column justify-content-center >+horizontal-tb ltr column justify-content-space-between >+horizontal-tb ltr column justify-content-space-around >+horizontal-tb rtl column justify-content-flex-start >+horizontal-tb rtl column justify-content-flex-end >+horizontal-tb rtl column justify-content-center >+horizontal-tb rtl column justify-content-space-between >+horizontal-tb rtl column justify-content-space-around >+horizontal-tb ltr row-reverse justify-content-flex-start >+horizontal-tb ltr row-reverse justify-content-flex-end >+horizontal-tb ltr row-reverse justify-content-center >+horizontal-tb ltr row-reverse justify-content-space-between >+horizontal-tb ltr row-reverse justify-content-space-around >+horizontal-tb rtl row-reverse justify-content-flex-start >+horizontal-tb rtl row-reverse justify-content-flex-end >+horizontal-tb rtl row-reverse justify-content-center >+horizontal-tb rtl row-reverse justify-content-space-between >+horizontal-tb rtl row-reverse justify-content-space-around >+horizontal-tb ltr column-reverse justify-content-flex-start >+horizontal-tb ltr column-reverse justify-content-flex-end >+horizontal-tb ltr column-reverse justify-content-center >+horizontal-tb ltr column-reverse justify-content-space-between >+horizontal-tb ltr column-reverse justify-content-space-around >+horizontal-tb rtl column-reverse justify-content-flex-start >+horizontal-tb rtl column-reverse justify-content-flex-end >+horizontal-tb rtl column-reverse justify-content-center >+horizontal-tb rtl column-reverse justify-content-space-between >+horizontal-tb rtl column-reverse justify-content-space-around >+vertical-rl ltr row justify-content-flex-start >+vertical-rl ltr row justify-content-flex-end >+vertical-rl ltr row justify-content-center >+vertical-rl ltr row justify-content-space-between >+vertical-rl ltr row justify-content-space-around >+vertical-rl rtl row justify-content-flex-start >+vertical-rl rtl row justify-content-flex-end >+vertical-rl rtl row justify-content-center >+vertical-rl rtl row justify-content-space-between >+vertical-rl rtl row justify-content-space-around >+vertical-rl ltr column justify-content-flex-start >+vertical-rl ltr column justify-content-flex-end >+vertical-rl ltr column justify-content-center >+vertical-rl ltr column justify-content-space-between >+vertical-rl ltr column justify-content-space-around >+vertical-rl rtl column justify-content-flex-start >+vertical-rl rtl column justify-content-flex-end >+vertical-rl rtl column justify-content-center >+vertical-rl rtl column justify-content-space-between >+vertical-rl rtl column justify-content-space-around >+vertical-rl ltr row-reverse justify-content-flex-start >+vertical-rl ltr row-reverse justify-content-flex-end >+vertical-rl ltr row-reverse justify-content-center >+vertical-rl ltr row-reverse justify-content-space-between >+vertical-rl ltr row-reverse justify-content-space-around >+vertical-rl rtl row-reverse justify-content-flex-start >+vertical-rl rtl row-reverse justify-content-flex-end >+vertical-rl rtl row-reverse justify-content-center >+vertical-rl rtl row-reverse justify-content-space-between >+vertical-rl rtl row-reverse justify-content-space-around >+vertical-rl ltr column-reverse justify-content-flex-start >+vertical-rl ltr column-reverse justify-content-flex-end >+vertical-rl ltr column-reverse justify-content-center >+vertical-rl ltr column-reverse justify-content-space-between >+vertical-rl ltr column-reverse justify-content-space-around >+vertical-rl rtl column-reverse justify-content-flex-start >+vertical-rl rtl column-reverse justify-content-flex-end >+vertical-rl rtl column-reverse justify-content-center >+vertical-rl rtl column-reverse justify-content-space-between >+vertical-rl rtl column-reverse justify-content-space-around >+vertical-lr ltr row justify-content-flex-start >+vertical-lr ltr row justify-content-flex-end >+vertical-lr ltr row justify-content-center >+vertical-lr ltr row justify-content-space-between >+vertical-lr ltr row justify-content-space-around >+vertical-lr rtl row justify-content-flex-start >+vertical-lr rtl row justify-content-flex-end >+vertical-lr rtl row justify-content-center >+vertical-lr rtl row justify-content-space-between >+vertical-lr rtl row justify-content-space-around >+vertical-lr ltr column justify-content-flex-start >+vertical-lr ltr column justify-content-flex-end >+vertical-lr ltr column justify-content-center >+vertical-lr ltr column justify-content-space-between >+vertical-lr ltr column justify-content-space-around >+vertical-lr rtl column justify-content-flex-start >+vertical-lr rtl column justify-content-flex-end >+vertical-lr rtl column justify-content-center >+vertical-lr rtl column justify-content-space-between >+vertical-lr rtl column justify-content-space-around >+vertical-lr ltr row-reverse justify-content-flex-start >+vertical-lr ltr row-reverse justify-content-flex-end >+vertical-lr ltr row-reverse justify-content-center >+vertical-lr ltr row-reverse justify-content-space-between >+vertical-lr ltr row-reverse justify-content-space-around >+vertical-lr rtl row-reverse justify-content-flex-start >+vertical-lr rtl row-reverse justify-content-flex-end >+vertical-lr rtl row-reverse justify-content-center >+vertical-lr rtl row-reverse justify-content-space-between >+vertical-lr rtl row-reverse justify-content-space-around >+vertical-lr ltr column-reverse justify-content-flex-start >+vertical-lr ltr column-reverse justify-content-flex-end >+vertical-lr ltr column-reverse justify-content-center >+vertical-lr ltr column-reverse justify-content-space-between >+vertical-lr ltr column-reverse justify-content-space-around >+vertical-lr rtl column-reverse justify-content-flex-start >+vertical-lr rtl column-reverse justify-content-flex-end >+vertical-lr rtl column-reverse justify-content-center >+vertical-lr rtl column-reverse justify-content-space-between >+vertical-lr rtl column-reverse justify-content-space-around >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f60174084652a3373c6b1873e02da373575c53cd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-001.html >@@ -0,0 +1,709 @@ >+<!DOCTYPE html> >+<html> >+<title>CSS Test: Absolutely positioned children of flexboxes</title> >+<link rel="author" title="Google Inc." href="http://www.google.com/"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<meta name="flags" content="dom"> >+<meta name="assert" content="Checks that we correctly position abspos children >+in a number of writing modes and alignments"> >+<style> >+body { >+ margin: 0; >+} >+ >+.title { >+ margin-top: 1em; >+} >+ >+.flexbox { >+ display: flex; >+ background-color: #aaa; >+ position: relative; >+} >+.flexbox div { >+ border: 0; >+ flex: none; >+} >+ >+.horizontal-tb { >+ writing-mode: horizontal-tb; >+} >+.vertical-rl { >+ writing-mode: vertical-rl; >+} >+.vertical-lr { >+ writing-mode: vertical-lr; >+} >+ >+.row { >+ flex-flow: row; >+} >+.row-reverse { >+ flex-flow: row-reverse; >+} >+.column { >+ flex-flow: column; >+} >+.column-reverse { >+ flex-flow: column-reverse; >+} >+ >+.flexbox :nth-child(1) { >+ background-color: blue; >+} >+.flexbox :nth-child(2) { >+ background-color: green; >+} >+ >+.rtl { >+ direction: rtl; >+} >+.ltr { >+ direction: ltr; >+} >+ >+.justify-content-flex-start { >+ justify-content: flex-start; >+} >+.justify-content-flex-end { >+ justify-content: flex-end; >+} >+.justify-content-center { >+ justify-content: center; >+} >+.justify-content-space-between { >+ justify-content: space-between; >+} >+.justify-content-space-around { >+ justify-content: space-around; >+} >+</style> >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+<body onload="checkLayout('.flexbox')"> >+<div id=log></div> >+<script> >+// Each flexbox has two abspos children - one is 40x10, the other 10x20. >+// The flexbox itself is 80x20. >+// All that is flipped for vertical flows. >+var expectations = { >+ 'horizontal-tb': { >+ 'row': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'center': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'flex-end': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ }, >+ }, >+ 'column': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [0, 40], >+ 'child2': [0, 70], >+ }, >+ 'center': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [10, 0], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [10, 40], >+ 'child2': [0, 70], >+ }, >+ 'center': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [10, 0], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ }, >+ 'row-reverse': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'flex-end': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'center': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ }, >+ }, >+ 'column-reverse': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [0, 40], >+ 'child2': [0, 70], >+ }, >+ 'flex-end': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [0, 40], >+ 'child2': [0, 70], >+ }, >+ 'space-around': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [10, 40], >+ 'child2': [0, 70], >+ }, >+ 'flex-end': { >+ 'child1': [10, 0], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [10, 40], >+ 'child2': [0, 70], >+ }, >+ 'space-around': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ }, >+ }, >+ 'vertical-rl': { >+ 'row': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [10, 0], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [10, 40], >+ 'child2': [0, 70], >+ }, >+ 'center': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [10, 0], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [10, 40], >+ 'child2': [0, 70], >+ }, >+ 'flex-end': { >+ 'child1': [10, 0], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [10, 40], >+ 'child2': [0, 70], >+ }, >+ 'space-around': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ }, >+ 'column': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'flex-end': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [40, 10], >+ 'child2': [70, 0], >+ }, >+ 'flex-end': { >+ 'child1': [0, 10], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [20, 10], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [40, 10], >+ 'child2': [70, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 10], >+ 'child2': [35, 0], >+ }, >+ }, >+ }, >+ 'row-reverse': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [10, 40], >+ 'child2': [0, 70], >+ }, >+ 'flex-end': { >+ 'child1': [10, 0], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [10, 40], >+ 'child2': [0, 70], >+ }, >+ 'space-around': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [10, 0], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [10, 40], >+ 'child2': [0, 70], >+ }, >+ 'center': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [10, 0], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [10, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ }, >+ 'column-reverse': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'center': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [0, 10], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [40, 10], >+ 'child2': [70, 0], >+ }, >+ 'center': { >+ 'child1': [20, 10], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [0, 10], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 10], >+ 'child2': [35, 0], >+ }, >+ }, >+ }, >+ }, >+ 'vertical-lr': { >+ 'row': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [0, 40], >+ 'child2': [0, 70], >+ }, >+ 'center': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [0, 40], >+ 'child2': [0, 70], >+ }, >+ 'flex-end': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [0, 40], >+ 'child2': [0, 70], >+ }, >+ 'space-around': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ }, >+ 'column': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'center': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [0, 10], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [40, 10], >+ 'child2': [70, 0], >+ }, >+ 'center': { >+ 'child1': [20, 10], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [0, 10], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 10], >+ 'child2': [35, 0], >+ }, >+ }, >+ }, >+ 'row-reverse': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [0, 40], >+ 'child2': [0, 70], >+ }, >+ 'flex-end': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [0, 40], >+ 'child2': [0, 70], >+ }, >+ 'space-around': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'flex-end': { >+ 'child1': [0, 40], >+ 'child2': [0, 70], >+ }, >+ 'center': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ 'space-between': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'space-around': { >+ 'child1': [0, 20], >+ 'child2': [0, 35], >+ }, >+ }, >+ }, >+ 'column-reverse': { >+ 'ltr': { >+ 'flex-start': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'flex-end': { >+ 'child1': [0, 0], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [40, 0], >+ 'child2': [70, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 0], >+ 'child2': [35, 0], >+ }, >+ }, >+ 'rtl': { >+ 'flex-start': { >+ 'child1': [40, 10], >+ 'child2': [70, 0], >+ }, >+ 'flex-end': { >+ 'child1': [0, 10], >+ 'child2': [0, 0], >+ }, >+ 'center': { >+ 'child1': [20, 10], >+ 'child2': [35, 0], >+ }, >+ 'space-between': { >+ 'child1': [40, 10], >+ 'child2': [70, 0], >+ }, >+ 'space-around': { >+ 'child1': [20, 10], >+ 'child2': [35, 0], >+ }, >+ }, >+ }, >+ }, >+}; >+ >+var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; >+var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; >+var directions = ['ltr', 'rtl']; >+var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around']; >+ >+function mainAxisDirection(writingMode, flexDirection) >+{ >+ if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1) >+ || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1)) >+ return 'width'; >+ return 'height'; >+} >+ >+function addChild(flexbox, mainAxis, crossAxis, mainAxisLength, crossAxisLength, expectations) >+{ >+ var child = document.createElement('div'); >+ child.setAttribute('style', mainAxis + ': ' + mainAxisLength + 'px;' >+ + crossAxis + ': ' + crossAxisLength + 'px; position: absolute;'); >+ >+ child.setAttribute("data-expected-" + mainAxis, mainAxisLength); >+ child.setAttribute("data-expected-" + crossAxis, crossAxisLength); >+ child.setAttribute("data-offset-x", expectations[0]); >+ child.setAttribute("data-offset-y", expectations[1]); >+ >+ flexbox.appendChild(child); >+} >+ >+writingModes.forEach(function(writingMode) { >+ flexDirections.forEach(function(flexDirection) { >+ directions.forEach(function(direction) { >+ justifyContents.forEach(function(justifyContent) { >+ var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent; >+ var title = document.createElement('div'); >+ title.className = 'title'; >+ title.innerHTML = flexboxClassName; >+ document.body.appendChild(title); >+ >+ var mainAxis = mainAxisDirection(writingMode, flexDirection); >+ var crossAxis = (mainAxis == 'width') ? 'height' : 'width'; >+ >+ var flexbox = document.createElement('div'); >+ flexbox.className = 'flexbox ' + flexboxClassName; >+ flexbox.setAttribute('style', mainAxis + ': 80px;' + crossAxis + ': 20px'); >+ >+ var baselineMargin = (flexDirection.indexOf('row') != -1) ? 'margin-block-start: 5px' : 'margin-inline-start: 5px'; >+ >+ var testExpectations = expectations[writingMode][flexDirection][direction][justifyContent]; >+ addChild(flexbox, mainAxis, crossAxis, 40, 10, testExpectations['child1']); >+ addChild(flexbox, mainAxis, crossAxis, 10, 20, testExpectations['child2']); >+ >+ document.body.appendChild(flexbox); >+ }) >+ }) >+ }) >+}) >+ >+</script> >+ >+</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-002-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..3cf7bb9dc1ff9dbc546cd87a0425954705e2b355 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-002-expected.txt >@@ -0,0 +1,20 @@ >+ >+PASS position of x >+PASS position of y >+PASS position of width >+PASS position of height >+PASS position of top >+PASS position of right >+PASS position of bottom >+PASS position of left >+PASS position of toJSON >+PASS .flexbox 1 >+PASS .flexbox 2 >+PASS .flexbox 3 >+PASS .flexbox 4 >+PASS .flexbox 5 >+PASS .flexbox 6 >+PASS .flexbox 7 >+PASS .flexbox 8 >+PASS .flexbox 9 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5c1cf084753f0900095bae060f093a4b3740b1e8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-002.html >@@ -0,0 +1,160 @@ >+<!DOCTYPE html> >+<html> >+<title>CSS Test: Absolutely positioned children of flexboxes</title> >+<link href="../support/flexbox.css" rel="stylesheet"> >+<link rel="author" title="Google Inc." href="http://www.google.com/"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<meta name="flags" content="dom"> >+<meta name="assert" content="Checks that we correctly position abspos children >+with different alignments and dynamic changes"> >+<style> >+body { >+ margin: 0; >+} >+.flexbox { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ margin: 10px; >+} >+.flexbox > * { >+ flex: none; >+} >+.relative { >+ position: relative; >+} >+.flexbox > div { >+ width: 20px; >+ height: 20px; >+} >+.absolute { >+ position: absolute; >+} >+#placed-absolute { >+ top: 20px; >+ left: 20px; >+} >+ >+.rtl { >+ direction: rtl; >+} >+.ltr { >+ direction: ltr; >+} >+ >+.flexbox :nth-child(1) { >+ background-color: blue; >+} >+.flexbox :nth-child(2) { >+ background-color: yellow; >+} >+.flexbox :nth-child(3) { >+ background-color: salmon; >+} >+.flexbox :nth-child(4) { >+ background-color: grey; >+} >+.flexbox :nth-child(5) { >+ background-color: red; >+} >+.flexbox :nth-child(6) { >+ background-color: orange; >+} >+.flexbox :nth-child(7) { >+ background-color: purple; >+} >+</style> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<body onload="checkLayout('.flexbox')"> >+<div id=log></div> >+ >+<div class='flexbox relative align-items-center'> >+ <div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20></div> >+</div> >+ >+<div class='flexbox relative align-items-center'> >+ <div data-offset-x=0 data-offset-y=40></div> >+ <div class='absolute' data-offset-x=0 data-offset-y=40></div> >+ <div data-offset-x=20 data-offset-y=40></div> >+ <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> >+</div> >+ >+<div class="relative"> >+<div class='flexbox align-items-center'> >+ <div data-offset-x=10 data-offset-y=40></div> >+ <div class='absolute' data-offset-x=10 data-offset-y=40></div> >+ <div data-offset-x=30 data-offset-y=40></div> >+ <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> >+</div> >+</div> >+ >+<div class='flexbox relative column rtl'> >+ <div data-offset-x=80 data-offset-y=0></div> >+ <div class='absolute' data-offset-x=80 data-offset-y=0></div> >+ <div data-offset-x=80 data-offset-y=20></div> >+ <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> >+</div> >+ >+<div class="relative"> >+<div class='flexbox wrap-reverse'> >+ <div style="width:90px" data-offset-x=10 data-offset-y=80></div> >+ <div class="absolute" data-offset-x=10 data-offset-y=80></div> >+ <div data-offset-x=10 data-offset-y=30></div> >+ <div class="absolute" data-offset-x=10 data-offset-y=80></div> >+ <div data-offset-x=30 data-offset-y=30></div> >+ <div class="absolute" data-offset-x=10 data-offset-y=80></div> >+ <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> >+</div> >+</div> >+ >+<div class='flexbox relative'> >+ <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div> >+ <div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0></div> >+ <div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0></div> >+ <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> >+</div> >+ >+<div class='flexbox align-items-stretch relative'> >+ <div style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=100></div> >+ <div class="absolute" style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=0></div> >+ <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div> >+</div> >+ >+<div class="flexbox wrap relative"> >+ <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div> >+ <div class="absolute" data-offset-x=0 data-offset-y=0></div> >+ <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div> >+ <div class="absolute" data-offset-x=0 data-offset-y=0></div> >+ <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div> >+ <div class="absolute" data-offset-x=0 data-offset-y=0></div> >+</div> >+ >+<div class="flexbox wrap relative align-items-flex-end"> >+ <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div> >+ <div class="absolute" data-offset-x=0 data-offset-y=80></div> >+ <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div> >+ <div class="absolute" data-offset-x=0 data-offset-y=80></div> >+ <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div> >+ <div class="absolute" data-offset-x=0 data-offset-y=80></div> >+</div> >+ >+ >+<script> >+var absolute = document.getElementById('placed-absolute'); >+var beforePosition = absolute.getBoundingClientRect(); >+document.querySelector('.flexbox').style.height = '101px'; >+var afterPosition = absolute.getBoundingClientRect(); >+ >+// Positioned element should not change position when the height of it's parent flexbox is changed. >+for (key in beforePosition) { >+ test(function() { >+ assert_equals(beforePosition[key], afterPosition[key]); >+ }, 'position of ' + key); >+} >+</script> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-003-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-003-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..063e5631b45a9d1ae7790c046faed37453e8a62d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-003-expected.txt >@@ -0,0 +1,18 @@ >+ >+PASS .rect 1 >+PASS .rect 2 >+PASS .rect 3 >+PASS .rect 4 >+PASS .rect 5 >+PASS .rect 6 >+PASS .rect 7 >+PASS .rect 8 >+PASS .rect 9 >+PASS .rect 10 >+PASS .rect 11 >+PASS .rect 12 >+PASS .rect 13 >+PASS .rect 14 >+PASS .rect 15 >+PASS .rect 16 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a858bac9fcb0a452f2893b406808e9dca1b1751a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-003.html >@@ -0,0 +1,96 @@ >+<!DOCTYPE html> >+<title>CSS Test: Absolutely positioned children of flexboxes</title> >+<link rel="author" title="Google Inc." href="http://www.google.com/"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<meta name="flags" content="dom"> >+<meta name="assert" content="Checks that we correctly handle border and >+padding in combination with abspos items"> >+<style> >+.rect { >+ position: absolute; >+ width: 50px; >+ height: 50px; >+ background-color: green; >+} >+ >+.flexbox { >+ position: relative; >+ width: 100px; >+ height: 100px; >+ outline: 3px solid black; >+} >+</style> >+ >+<link rel="stylesheet" href="../support/flexbox.css"> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<body onload="checkLayout('.rect')"> >+<div id=log></div> >+ >+<div class="flexbox" style="padding-top: 10px; padding-left: 20px;"> >+ <div class="rect" data-offset-x="20" data-offset-y="10"></div> >+</div> >+ >+<div class="flexbox column" style="padding-top: 10px; padding-left: 20px;"> >+ <div class="rect" data-offset-x="20" data-offset-y="10"></div> >+</div> >+ >+<div class="flexbox" style="writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;"> >+ <div class="rect" data-offset-x="20" data-offset-y="10"></div> >+</div> >+ >+<div class="flexbox column" style="writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;"> >+ <div class="rect" data-offset-x="20" data-offset-y="10"></div> >+</div> >+ >+<div class="flexbox" style="direction: rtl; padding-top: 10px; padding-right: 20px;"> >+ <div class="rect" data-offset-x="50" data-offset-y="10"></div> >+</div> >+ >+<div class="flexbox column" style="direction: rtl; padding-top: 10px; padding-right: 20px;"> >+ <div class="rect" data-offset-x="50" data-offset-y="10"></div> >+</div> >+ >+<div class="flexbox" style="direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;"> >+ <div class="rect" data-offset-x="20" data-offset-y="50"></div> >+</div> >+ >+<div class="flexbox column" style="direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;"> >+ <div class="rect" data-offset-x="20" data-offset-y="50"></div> >+</div> >+ >+<hr> >+<div class="flexbox" style="border-top: 10px solid; border-left: 20px solid;"> >+ <div class="rect" data-offset-x="0" data-offset-y="0"></div> >+</div> >+ >+<div class="flexbox column" style="border-top: 10px solid; border-left: 20px solid;"> >+ <div class="rect" data-offset-x="0" data-offset-y="0"></div> >+</div> >+ >+<div class="flexbox" style="writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;"> >+ <div class="rect" data-offset-x="0" data-offset-y="0"></div> >+</div> >+ >+<div class="flexbox column" style="writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;"> >+ <div class="rect" data-offset-x="0" data-offset-y="0"></div> >+</div> >+ >+<div class="flexbox" style="direction: rtl; border-top: 10px solid; border-right: 20px solid;"> >+ <div class="rect" data-offset-x="50" data-offset-y="0"></div> >+</div> >+ >+<div class="flexbox column" style="direction: rtl; border-top: 10px solid; border-right: 20px solid;"> >+ <div class="rect" data-offset-x="50" data-offset-y="0"></div> >+</div> >+ >+<div class="flexbox" style="direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;"> >+ <div class="rect" data-offset-x="0" data-offset-y="50"></div> >+</div> >+ >+<div class="flexbox column" style="direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;"> >+ <div class="rect" data-offset-x="0" data-offset-y="50"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-004-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-004-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..0fdedbe7a0143b03d15114370addc09826451d2f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-004-expected.txt >@@ -0,0 +1,3 @@ >+ >+PASS #flex 1 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..af8bc6284c076b473af509d5d8fd1e81dbea286d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-004.html >@@ -0,0 +1,44 @@ >+<!DOCTYPE html> >+<title>CSS Test: Absolutely positioned children of flexboxes</title> >+<link rel="author" title="Google Inc." href="http://www.google.com/"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<meta name="flags" content="dom"> >+<meta name="assert" content="Checks that we correctly handle when a flex item >+becomes absolutely positioned"> >+<style> >+#flex { >+ display: flex; >+ position: relative; >+ background: red; >+ width: 500px; >+ height: 200px; >+} >+ >+#item { >+ background: green; >+ left: 0; >+ right: 0; >+ top: 0; >+ bottom: 0; >+} >+</style> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<script> >+function update() { >+ var item = document.getElementById("item"); >+ item.offsetHeight; >+ item.style.position = "absolute"; >+ item.offsetHeight; >+ checkLayout("#flex"); >+} >+</script> >+ >+<body onload="update();"> >+ >+<div id="flex"> >+ <div id="item" data-expected-width="500"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-005-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2f7e669c72fc263d4b39d7a198d8abafbf54b463 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-005-expected.html >@@ -0,0 +1,14 @@ >+<!DOCTYPE html> >+<link rel="author" title="Google Inc." href="http://www.google.com/"> >+<p>This test should not have a horizontal scrollbar</p> >+ >+<div style="width: 400px; height: 100px; overflow-x: hidden; overflow-y: scroll;"> >+<br> >+<br> >+<br> >+<br> >+<br> >+<br> >+<br> >+<br> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-005.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3199dfb9a699986ecbc7ff474628cf1cfbf0b0b6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-005.html >@@ -0,0 +1,66 @@ >+<!DOCTYPE html> >+<title>CSS Test: Absolutely positioned children of flexboxes</title> >+<link rel="author" title="Google Inc." href="http://www.google.com/"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="match" href="position-absolute-005-ref.html"> >+<meta name="assert" content="Checks that we correctly handle overflow: auto in >+abspos nodes in flexbox"> >+ >+<style> >+ body { >+ width: 400px; >+ height: 300px; >+ } >+ >+ .flexbox { >+ display: flex; >+ } >+ >+ .column { >+ flex-direction: column; >+ } >+ >+ .flex11a { >+ flex: 1 1 auto; >+ } >+ >+ .root { >+ height: 100px; >+ overflow-y: auto; >+ position: relative; >+ } >+ >+ #abspos { >+ position: absolute; >+ left: 0; >+ right: 0; >+ top: 0; >+ height: 10px; >+ } >+</style> >+ >+ >+<p>This test should not have a horizontal scrollbar</p> >+ >+<div class="flexbox column"> >+ <div class="flexbox"> >+ <div class="flex11a"> >+ <div class="root"> >+ <div> >+ <div> >+ <div id="history"></div> >+ <div id="abspos"></div> >+ </div> >+ </div> >+ </div> >+ </div> >+ </div> >+</div> >+ >+<script> >+onload = function() { >+ var historyEl = document.getElementById('history'); >+ historyEl.offsetWidth; >+ historyEl.innerText = '\n\n\n\n\n\n\n\n'; >+}; >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-006-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-006-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-006-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-006.html >new file mode 100644 >index 0000000000000000000000000000000000000000..bc9bc2c0e13d45904af90ca8f1dfe2a53241c79a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-006.html >@@ -0,0 +1,22 @@ >+<!DOCTYPE html> >+<title>abspos items</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<link rel="bookmark" href="https://crbug.com/1066859"> >+<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid." /> >+ >+<style> >+div { >+ height: 100px; >+ width: 100px; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div style="display: grid; position: relative;"> >+ <div style="display: flex; align-items: center; background: red"> >+ <div style="position: absolute; background: green"> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-007-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-007-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-007-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-007.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-007.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3f7106c10260d516b6cd9148ff5e55e2777899bf >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-007.html >@@ -0,0 +1,20 @@ >+<!DOCTYPE html> >+<title>abspos items</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<link rel="bookmark" href="https://crbug.com/1066859"> >+<meta name="assert" content="Flex sets correct static position for abspos item when containing block is root element." /> >+ >+<style> >+div { >+ height: 100px; >+ width: 100px; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div style="display: flex; align-items: center; background: red"> >+ <div style="position: absolute; background: green"> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-008-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-008-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-008-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-008.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-008.html >new file mode 100644 >index 0000000000000000000000000000000000000000..7a9f8b6dfe8d202a1bf6f913edeb77f6a122b836 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-008.html >@@ -0,0 +1,22 @@ >+<!DOCTYPE html> >+<title>abspos items</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<link rel="bookmark" href="https://crbug.com/1066859"> >+<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and alignment is flex-end." /> >+ >+<style> >+div { >+ height: 100px; >+ width: 100px; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div style="display: grid; position: relative;"> >+ <div style="display: flex; align-items: flex-end; background: red"> >+ <div style="position: absolute; background: green"> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-009-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-009-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-009-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-009.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-009.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5751bea1b94cc2fcd5a924b5c8bf81e3cbbc91ec >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-009.html >@@ -0,0 +1,21 @@ >+<!DOCTYPE html> >+<title>abspos items</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<link rel="bookmark" href="https://crbug.com/1066859"> >+<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and abspos item is also grid." /> >+<style> >+div { >+ height: 100px; >+ width: 100px; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div style="display: grid; position: relative;"> >+ <div style="display: flex; align-items: center; background: red"> >+ <div style="position: absolute; background: green; display: grid"> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-010-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-010-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-010-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-010.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-010.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c59cc7d67dfdfc2d48782b7790bbb4e46d97bca9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-010.html >@@ -0,0 +1,21 @@ >+<!DOCTYPE html> >+<title>abspos items</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<link rel="bookmark" href="https://crbug.com/1066859"> >+<meta name="assert" content="Flex sets correct static position for grid abspos item when containg block is regular block flow." /> >+<style> >+div { >+ height: 100px; >+ width: 100px; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div style="position: relative;"> >+ <div style="display: flex; align-items: center; background: red"> >+ <div style="position: absolute; background: green; display: grid"> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-011-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-011-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-011-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-011.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-011.html >new file mode 100644 >index 0000000000000000000000000000000000000000..142cd4b4160978e78dcdde193a9e00da8e63a6c7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-011.html >@@ -0,0 +1,22 @@ >+<!DOCTYPE html> >+<title>abspos items</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> >+<link rel="bookmark" href="https://crbug.com/1066859"> >+<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and weird abspos edge is due to justify-content, not alignment." /> >+ >+<style> >+div { >+ height: 100px; >+ width: 100px; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div style="display: grid; position: relative;"> >+ <div style="display: flex; justify-content: flex-end; background: red"> >+ <div style="position: absolute; background: green"> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-012-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-012-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..b8c2c299248de48c6f11acd88e76014e69f68072 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-012-expected.txt >@@ -0,0 +1,258 @@ >+ >+PASS .flexbox 1 >+PASS .flexbox 2 >+PASS .flexbox 3 >+PASS .flexbox 4 >+PASS .flexbox 5 >+PASS .flexbox 6 >+PASS .flexbox 7 >+PASS .flexbox 8 >+PASS .flexbox 9 >+PASS .flexbox 10 >+PASS .flexbox 11 >+PASS .flexbox 12 >+PASS .flexbox 13 >+PASS .flexbox 14 >+PASS .flexbox 15 >+PASS .flexbox 16 >+PASS .flexbox 17 >+PASS .flexbox 18 >+PASS .flexbox 19 >+PASS .flexbox 20 >+PASS .flexbox 21 >+PASS .flexbox 22 >+PASS .flexbox 23 >+PASS .flexbox 24 >+PASS .flexbox 25 >+PASS .flexbox 26 >+PASS .flexbox 27 >+PASS .flexbox 28 >+PASS .flexbox 29 >+PASS .flexbox 30 >+PASS .flexbox 31 >+PASS .flexbox 32 >+FAIL .flexbox 33 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 34 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 35 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 36 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 37 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 38 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 39 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 40 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 41 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 42 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 43 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 44 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 45 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 46 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 47 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 48 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 49 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 50 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 51 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 52 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 53 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 54 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 55 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 56 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 57 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 58 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 59 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 60 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 61 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 62 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 63 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 64 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+PASS .flexbox 65 >+PASS .flexbox 66 >+PASS .flexbox 67 >+PASS .flexbox 68 >+PASS .flexbox 69 >+PASS .flexbox 70 >+PASS .flexbox 71 >+PASS .flexbox 72 >+PASS .flexbox 73 >+PASS .flexbox 74 >+PASS .flexbox 75 >+PASS .flexbox 76 >+PASS .flexbox 77 >+PASS .flexbox 78 >+PASS .flexbox 79 >+PASS .flexbox 80 >+PASS .flexbox 81 >+PASS .flexbox 82 >+PASS .flexbox 83 >+PASS .flexbox 84 >+PASS .flexbox 85 >+PASS .flexbox 86 >+PASS .flexbox 87 >+PASS .flexbox 88 >+PASS .flexbox 89 >+PASS .flexbox 90 >+PASS .flexbox 91 >+PASS .flexbox 92 >+PASS .flexbox 93 >+PASS .flexbox 94 >+PASS .flexbox 95 >+PASS .flexbox 96 >+horizontal-tb ltr row justify-content-flex-start align-items-flex-start .flexbox 1 >+horizontal-tb ltr row justify-content-flex-start align-items-flex-end .flexbox 2 >+horizontal-tb ltr row justify-content-flex-end align-items-flex-start .flexbox 3 >+horizontal-tb ltr row justify-content-flex-end align-items-flex-end .flexbox 4 >+horizontal-tb rtl row justify-content-flex-start align-items-flex-start .flexbox 5 >+horizontal-tb rtl row justify-content-flex-start align-items-flex-end .flexbox 6 >+horizontal-tb rtl row justify-content-flex-end align-items-flex-start .flexbox 7 >+horizontal-tb rtl row justify-content-flex-end align-items-flex-end .flexbox 8 >+horizontal-tb ltr column justify-content-flex-start align-items-flex-start .flexbox 9 >+horizontal-tb ltr column justify-content-flex-start align-items-flex-end .flexbox 10 >+horizontal-tb ltr column justify-content-flex-end align-items-flex-start .flexbox 11 >+horizontal-tb ltr column justify-content-flex-end align-items-flex-end .flexbox 12 >+horizontal-tb rtl column justify-content-flex-start align-items-flex-start .flexbox 13 >+horizontal-tb rtl column justify-content-flex-start align-items-flex-end .flexbox 14 >+horizontal-tb rtl column justify-content-flex-end align-items-flex-start .flexbox 15 >+horizontal-tb rtl column justify-content-flex-end align-items-flex-end .flexbox 16 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-start .flexbox 17 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-end .flexbox 18 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-start .flexbox 19 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-end .flexbox 20 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-start .flexbox 21 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-end .flexbox 22 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-start .flexbox 23 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-end .flexbox 24 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-start .flexbox 25 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-end .flexbox 26 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-start .flexbox 27 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-end .flexbox 28 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-start .flexbox 29 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-end .flexbox 30 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-start .flexbox 31 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-end .flexbox 32 >+vertical-rl ltr row justify-content-flex-start align-items-flex-start .flexbox 33 >+vertical-rl ltr row justify-content-flex-start align-items-flex-end .flexbox 34 >+vertical-rl ltr row justify-content-flex-end align-items-flex-start .flexbox 35 >+vertical-rl ltr row justify-content-flex-end align-items-flex-end .flexbox 36 >+vertical-rl rtl row justify-content-flex-start align-items-flex-start .flexbox 37 >+vertical-rl rtl row justify-content-flex-start align-items-flex-end .flexbox 38 >+vertical-rl rtl row justify-content-flex-end align-items-flex-start .flexbox 39 >+vertical-rl rtl row justify-content-flex-end align-items-flex-end .flexbox 40 >+vertical-rl ltr column justify-content-flex-start align-items-flex-start .flexbox 41 >+vertical-rl ltr column justify-content-flex-start align-items-flex-end .flexbox 42 >+vertical-rl ltr column justify-content-flex-end align-items-flex-start .flexbox 43 >+vertical-rl ltr column justify-content-flex-end align-items-flex-end .flexbox 44 >+vertical-rl rtl column justify-content-flex-start align-items-flex-start .flexbox 45 >+vertical-rl rtl column justify-content-flex-start align-items-flex-end .flexbox 46 >+vertical-rl rtl column justify-content-flex-end align-items-flex-start .flexbox 47 >+vertical-rl rtl column justify-content-flex-end align-items-flex-end .flexbox 48 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start .flexbox 49 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end .flexbox 50 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start .flexbox 51 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end .flexbox 52 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start .flexbox 53 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end .flexbox 54 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start .flexbox 55 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end .flexbox 56 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start .flexbox 57 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end .flexbox 58 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start .flexbox 59 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end .flexbox 60 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start .flexbox 61 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end .flexbox 62 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start .flexbox 63 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end .flexbox 64 >+vertical-lr ltr row justify-content-flex-start align-items-flex-start .flexbox 65 >+vertical-lr ltr row justify-content-flex-start align-items-flex-end .flexbox 66 >+vertical-lr ltr row justify-content-flex-end align-items-flex-start .flexbox 67 >+vertical-lr ltr row justify-content-flex-end align-items-flex-end .flexbox 68 >+vertical-lr rtl row justify-content-flex-start align-items-flex-start .flexbox 69 >+vertical-lr rtl row justify-content-flex-start align-items-flex-end .flexbox 70 >+vertical-lr rtl row justify-content-flex-end align-items-flex-start .flexbox 71 >+vertical-lr rtl row justify-content-flex-end align-items-flex-end .flexbox 72 >+vertical-lr ltr column justify-content-flex-start align-items-flex-start .flexbox 73 >+vertical-lr ltr column justify-content-flex-start align-items-flex-end .flexbox 74 >+vertical-lr ltr column justify-content-flex-end align-items-flex-start .flexbox 75 >+vertical-lr ltr column justify-content-flex-end align-items-flex-end .flexbox 76 >+vertical-lr rtl column justify-content-flex-start align-items-flex-start .flexbox 77 >+vertical-lr rtl column justify-content-flex-start align-items-flex-end .flexbox 78 >+vertical-lr rtl column justify-content-flex-end align-items-flex-start .flexbox 79 >+vertical-lr rtl column justify-content-flex-end align-items-flex-end .flexbox 80 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-start .flexbox 81 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-end .flexbox 82 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-start .flexbox 83 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-end .flexbox 84 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-start .flexbox 85 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-end .flexbox 86 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-start .flexbox 87 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-end .flexbox 88 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-start .flexbox 89 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-end .flexbox 90 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-start .flexbox 91 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-end .flexbox 92 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-start .flexbox 93 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-end .flexbox 94 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-start .flexbox 95 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-end .flexbox 96 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-012.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-012.html >new file mode 100644 >index 0000000000000000000000000000000000000000..fb90a526251fc10dbc3272c0ac9ed244930e8b6a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-012.html >@@ -0,0 +1,117 @@ >+<!DOCTYPE html> >+<html> >+<title>CSS Test: Absolutely positioned children of flexboxes</title> >+<link rel="author" title="Google Inc." href="http://www.google.com/"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<meta name="flags" content=""> >+<meta name="assert" content="Checks that we correctly position abspos children in a number of writing modes and alignments when containing block is grid."> >+<style> >+ >+.abspos { >+ height: 50px; >+ width: 50px; >+ background: lightblue; >+ position: absolute; >+ flex: none; >+} >+ >+.grid { >+ display: grid; >+ position: relative; >+} >+ >+.title { >+ margin-top: 1em; >+} >+ >+.flexbox { >+ display: flex; >+ background-color: #aaa; >+ height: 100px; >+ width: 100px; >+} >+ >+.horizontal-tb { >+ writing-mode: horizontal-tb; >+} >+.vertical-rl { >+ writing-mode: vertical-rl; >+} >+.vertical-lr { >+ writing-mode: vertical-lr; >+} >+ >+.rtl { >+ direction: rtl; >+} >+.ltr { >+ direction: ltr; >+} >+ >+.align-items-flex-start { >+ align-items: flex-start; >+} >+.align-items-flex-end { >+ align-items: flex-end; >+} >+.justify-content-flex-start { >+ justify-content: flex-start; >+} >+.justify-content-flex-end { >+ justify-content: flex-end; >+} >+</style> >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+<body onload="checkLayout('.flexbox')"> >+<div id=log></div> >+<script> >+ >+var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; >+var directions = ['ltr', 'rtl']; >+var justifyContents = ['flex-start', 'flex-end']; >+var alignItems = ['flex-start', 'flex-end']; >+var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; >+ >+// These were harvested from Firefox 76.0b4. >+var x = [0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50]; >+ >+var y = [0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0]; >+ >+var test_number = 1; >+ >+writingModes.forEach(function(flexWritingMode) { >+ flexDirections.forEach(function(flexDirection) { >+ directions.forEach(function(direction) { >+ justifyContents.forEach(function(justifyContent) { >+ alignItems.forEach(function(alignment) { >+ var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment; >+ var title = document.createElement('div'); >+ title.className = 'title'; >+ title.innerHTML = flexboxClassName + " .flexbox " + (test_number++); >+ document.body.appendChild(title); >+ >+ var flexbox = document.createElement('div'); >+ flexbox.className = 'flexbox ' + flexboxClassName; >+ >+ var child = document.createElement('div'); >+ child.setAttribute('class', 'abspos'); >+ child.setAttribute("data-offset-x", x.shift()); >+ child.setAttribute("data-offset-y", y.shift()); >+ flexbox.appendChild(child); >+ >+ var relpos = document.createElement('div'); >+ relpos.className = 'grid'; >+ relpos.appendChild(flexbox); >+ >+ document.body.appendChild(relpos); >+ }) >+ }) >+ }) >+ }) >+}) >+ >+</script> >+ >+</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-013-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-013-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..6c4af347d1fff9182facb6de8d950b272c0b0446 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-013-expected.txt >@@ -0,0 +1,1154 @@ >+ >+PASS .flexbox 1 >+PASS .flexbox 2 >+PASS .flexbox 3 >+PASS .flexbox 4 >+PASS .flexbox 5 >+PASS .flexbox 6 >+PASS .flexbox 7 >+PASS .flexbox 8 >+PASS .flexbox 9 >+PASS .flexbox 10 >+PASS .flexbox 11 >+PASS .flexbox 12 >+PASS .flexbox 13 >+PASS .flexbox 14 >+PASS .flexbox 15 >+PASS .flexbox 16 >+PASS .flexbox 17 >+PASS .flexbox 18 >+PASS .flexbox 19 >+PASS .flexbox 20 >+PASS .flexbox 21 >+PASS .flexbox 22 >+PASS .flexbox 23 >+PASS .flexbox 24 >+PASS .flexbox 25 >+PASS .flexbox 26 >+PASS .flexbox 27 >+PASS .flexbox 28 >+PASS .flexbox 29 >+PASS .flexbox 30 >+PASS .flexbox 31 >+PASS .flexbox 32 >+PASS .flexbox 33 >+PASS .flexbox 34 >+PASS .flexbox 35 >+PASS .flexbox 36 >+PASS .flexbox 37 >+PASS .flexbox 38 >+PASS .flexbox 39 >+PASS .flexbox 40 >+PASS .flexbox 41 >+PASS .flexbox 42 >+PASS .flexbox 43 >+PASS .flexbox 44 >+PASS .flexbox 45 >+PASS .flexbox 46 >+PASS .flexbox 47 >+PASS .flexbox 48 >+PASS .flexbox 49 >+PASS .flexbox 50 >+PASS .flexbox 51 >+PASS .flexbox 52 >+PASS .flexbox 53 >+PASS .flexbox 54 >+PASS .flexbox 55 >+PASS .flexbox 56 >+PASS .flexbox 57 >+PASS .flexbox 58 >+PASS .flexbox 59 >+PASS .flexbox 60 >+PASS .flexbox 61 >+PASS .flexbox 62 >+PASS .flexbox 63 >+PASS .flexbox 64 >+PASS .flexbox 65 >+PASS .flexbox 66 >+PASS .flexbox 67 >+PASS .flexbox 68 >+PASS .flexbox 69 >+PASS .flexbox 70 >+PASS .flexbox 71 >+PASS .flexbox 72 >+PASS .flexbox 73 >+PASS .flexbox 74 >+PASS .flexbox 75 >+PASS .flexbox 76 >+PASS .flexbox 77 >+PASS .flexbox 78 >+PASS .flexbox 79 >+PASS .flexbox 80 >+PASS .flexbox 81 >+PASS .flexbox 82 >+PASS .flexbox 83 >+PASS .flexbox 84 >+PASS .flexbox 85 >+PASS .flexbox 86 >+PASS .flexbox 87 >+PASS .flexbox 88 >+PASS .flexbox 89 >+PASS .flexbox 90 >+PASS .flexbox 91 >+PASS .flexbox 92 >+PASS .flexbox 93 >+PASS .flexbox 94 >+PASS .flexbox 95 >+PASS .flexbox 96 >+PASS .flexbox 97 >+PASS .flexbox 98 >+PASS .flexbox 99 >+PASS .flexbox 100 >+PASS .flexbox 101 >+PASS .flexbox 102 >+PASS .flexbox 103 >+PASS .flexbox 104 >+PASS .flexbox 105 >+PASS .flexbox 106 >+PASS .flexbox 107 >+PASS .flexbox 108 >+PASS .flexbox 109 >+PASS .flexbox 110 >+PASS .flexbox 111 >+PASS .flexbox 112 >+PASS .flexbox 113 >+PASS .flexbox 114 >+PASS .flexbox 115 >+PASS .flexbox 116 >+PASS .flexbox 117 >+PASS .flexbox 118 >+PASS .flexbox 119 >+PASS .flexbox 120 >+PASS .flexbox 121 >+PASS .flexbox 122 >+PASS .flexbox 123 >+PASS .flexbox 124 >+PASS .flexbox 125 >+PASS .flexbox 126 >+PASS .flexbox 127 >+PASS .flexbox 128 >+PASS .flexbox 129 >+PASS .flexbox 130 >+PASS .flexbox 131 >+PASS .flexbox 132 >+PASS .flexbox 133 >+PASS .flexbox 134 >+PASS .flexbox 135 >+PASS .flexbox 136 >+PASS .flexbox 137 >+PASS .flexbox 138 >+PASS .flexbox 139 >+PASS .flexbox 140 >+PASS .flexbox 141 >+PASS .flexbox 142 >+PASS .flexbox 143 >+PASS .flexbox 144 >+FAIL .flexbox 145 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 146 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 147 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 148 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 149 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 150 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 151 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 152 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 153 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 154 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 155 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 156 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 157 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 158 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 159 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 160 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 161 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 162 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 163 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 164 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 165 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 166 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 167 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 168 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 169 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 170 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 171 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 172 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 173 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 174 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 175 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 176 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 177 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 178 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 179 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 180 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 181 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 182 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 183 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 184 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 185 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 186 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 187 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 188 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 189 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 190 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 191 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 192 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 193 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 194 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 195 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 196 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 197 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 198 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 199 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 200 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 201 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 202 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 203 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 204 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 205 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 206 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 207 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 208 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 209 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 210 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 211 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 212 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 213 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 214 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 215 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 216 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 217 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 218 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 219 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 220 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 221 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 222 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 223 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 224 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 225 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 226 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 227 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 228 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 229 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 230 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 231 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 232 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 233 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 234 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 235 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 236 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 237 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 238 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 239 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 240 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 241 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 242 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 243 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 244 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 245 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 246 assert_equals: >+<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 247 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 248 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 249 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 250 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 251 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 252 assert_equals: >+<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 253 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 254 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 255 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 256 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 257 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 258 assert_equals: >+<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 259 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 260 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 261 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 262 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 263 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 264 assert_equals: >+<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 265 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 266 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 267 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 268 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 269 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 270 assert_equals: >+<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 271 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 272 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 273 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 274 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 275 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 276 assert_equals: >+<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 277 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 278 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 279 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 280 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 281 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 282 assert_equals: >+<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 283 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 284 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 285 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >+offsetLeft expected 0 but got 669 >+FAIL .flexbox 286 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 287 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >+offsetLeft expected 50 but got 719 >+FAIL .flexbox 288 assert_equals: >+<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >+offsetLeft expected 50 but got 719 >+PASS .flexbox 289 >+PASS .flexbox 290 >+PASS .flexbox 291 >+PASS .flexbox 292 >+PASS .flexbox 293 >+PASS .flexbox 294 >+PASS .flexbox 295 >+PASS .flexbox 296 >+PASS .flexbox 297 >+PASS .flexbox 298 >+PASS .flexbox 299 >+PASS .flexbox 300 >+PASS .flexbox 301 >+PASS .flexbox 302 >+PASS .flexbox 303 >+PASS .flexbox 304 >+PASS .flexbox 305 >+PASS .flexbox 306 >+PASS .flexbox 307 >+PASS .flexbox 308 >+PASS .flexbox 309 >+PASS .flexbox 310 >+PASS .flexbox 311 >+PASS .flexbox 312 >+PASS .flexbox 313 >+PASS .flexbox 314 >+PASS .flexbox 315 >+PASS .flexbox 316 >+PASS .flexbox 317 >+PASS .flexbox 318 >+PASS .flexbox 319 >+PASS .flexbox 320 >+PASS .flexbox 321 >+PASS .flexbox 322 >+PASS .flexbox 323 >+PASS .flexbox 324 >+PASS .flexbox 325 >+PASS .flexbox 326 >+PASS .flexbox 327 >+PASS .flexbox 328 >+PASS .flexbox 329 >+PASS .flexbox 330 >+PASS .flexbox 331 >+PASS .flexbox 332 >+PASS .flexbox 333 >+PASS .flexbox 334 >+PASS .flexbox 335 >+PASS .flexbox 336 >+PASS .flexbox 337 >+PASS .flexbox 338 >+PASS .flexbox 339 >+PASS .flexbox 340 >+PASS .flexbox 341 >+PASS .flexbox 342 >+PASS .flexbox 343 >+PASS .flexbox 344 >+PASS .flexbox 345 >+PASS .flexbox 346 >+PASS .flexbox 347 >+PASS .flexbox 348 >+PASS .flexbox 349 >+PASS .flexbox 350 >+PASS .flexbox 351 >+PASS .flexbox 352 >+PASS .flexbox 353 >+PASS .flexbox 354 >+PASS .flexbox 355 >+PASS .flexbox 356 >+PASS .flexbox 357 >+PASS .flexbox 358 >+PASS .flexbox 359 >+PASS .flexbox 360 >+PASS .flexbox 361 >+PASS .flexbox 362 >+PASS .flexbox 363 >+PASS .flexbox 364 >+PASS .flexbox 365 >+PASS .flexbox 366 >+PASS .flexbox 367 >+PASS .flexbox 368 >+PASS .flexbox 369 >+PASS .flexbox 370 >+PASS .flexbox 371 >+PASS .flexbox 372 >+PASS .flexbox 373 >+PASS .flexbox 374 >+PASS .flexbox 375 >+PASS .flexbox 376 >+PASS .flexbox 377 >+PASS .flexbox 378 >+PASS .flexbox 379 >+PASS .flexbox 380 >+PASS .flexbox 381 >+PASS .flexbox 382 >+PASS .flexbox 383 >+PASS .flexbox 384 >+PASS .flexbox 385 >+PASS .flexbox 386 >+PASS .flexbox 387 >+PASS .flexbox 388 >+PASS .flexbox 389 >+PASS .flexbox 390 >+PASS .flexbox 391 >+PASS .flexbox 392 >+PASS .flexbox 393 >+PASS .flexbox 394 >+PASS .flexbox 395 >+PASS .flexbox 396 >+PASS .flexbox 397 >+PASS .flexbox 398 >+PASS .flexbox 399 >+PASS .flexbox 400 >+PASS .flexbox 401 >+PASS .flexbox 402 >+PASS .flexbox 403 >+PASS .flexbox 404 >+PASS .flexbox 405 >+PASS .flexbox 406 >+PASS .flexbox 407 >+PASS .flexbox 408 >+PASS .flexbox 409 >+PASS .flexbox 410 >+PASS .flexbox 411 >+PASS .flexbox 412 >+PASS .flexbox 413 >+PASS .flexbox 414 >+PASS .flexbox 415 >+PASS .flexbox 416 >+PASS .flexbox 417 >+PASS .flexbox 418 >+PASS .flexbox 419 >+PASS .flexbox 420 >+PASS .flexbox 421 >+PASS .flexbox 422 >+PASS .flexbox 423 >+PASS .flexbox 424 >+PASS .flexbox 425 >+PASS .flexbox 426 >+PASS .flexbox 427 >+PASS .flexbox 428 >+PASS .flexbox 429 >+PASS .flexbox 430 >+PASS .flexbox 431 >+PASS .flexbox 432 >+horizontal-tb ltr row justify-content-flex-start align-items-flex-start nowrap .flexbox 1 >+horizontal-tb ltr row justify-content-flex-start align-items-flex-end nowrap .flexbox 2 >+horizontal-tb ltr row justify-content-flex-start align-items-stretch nowrap .flexbox 3 >+horizontal-tb ltr row justify-content-flex-end align-items-flex-start nowrap .flexbox 4 >+horizontal-tb ltr row justify-content-flex-end align-items-flex-end nowrap .flexbox 5 >+horizontal-tb ltr row justify-content-flex-end align-items-stretch nowrap .flexbox 6 >+horizontal-tb rtl row justify-content-flex-start align-items-flex-start nowrap .flexbox 7 >+horizontal-tb rtl row justify-content-flex-start align-items-flex-end nowrap .flexbox 8 >+horizontal-tb rtl row justify-content-flex-start align-items-stretch nowrap .flexbox 9 >+horizontal-tb rtl row justify-content-flex-end align-items-flex-start nowrap .flexbox 10 >+horizontal-tb rtl row justify-content-flex-end align-items-flex-end nowrap .flexbox 11 >+horizontal-tb rtl row justify-content-flex-end align-items-stretch nowrap .flexbox 12 >+horizontal-tb ltr column justify-content-flex-start align-items-flex-start nowrap .flexbox 13 >+horizontal-tb ltr column justify-content-flex-start align-items-flex-end nowrap .flexbox 14 >+horizontal-tb ltr column justify-content-flex-start align-items-stretch nowrap .flexbox 15 >+horizontal-tb ltr column justify-content-flex-end align-items-flex-start nowrap .flexbox 16 >+horizontal-tb ltr column justify-content-flex-end align-items-flex-end nowrap .flexbox 17 >+horizontal-tb ltr column justify-content-flex-end align-items-stretch nowrap .flexbox 18 >+horizontal-tb rtl column justify-content-flex-start align-items-flex-start nowrap .flexbox 19 >+horizontal-tb rtl column justify-content-flex-start align-items-flex-end nowrap .flexbox 20 >+horizontal-tb rtl column justify-content-flex-start align-items-stretch nowrap .flexbox 21 >+horizontal-tb rtl column justify-content-flex-end align-items-flex-start nowrap .flexbox 22 >+horizontal-tb rtl column justify-content-flex-end align-items-flex-end nowrap .flexbox 23 >+horizontal-tb rtl column justify-content-flex-end align-items-stretch nowrap .flexbox 24 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 25 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 26 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 27 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 28 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 29 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 30 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 31 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 32 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 33 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 34 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 35 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 36 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 37 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 38 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 39 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 40 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 41 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 42 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 43 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 44 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 45 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 46 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 47 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 48 >+horizontal-tb ltr row justify-content-flex-start align-items-flex-start wrap .flexbox 49 >+horizontal-tb ltr row justify-content-flex-start align-items-flex-end wrap .flexbox 50 >+horizontal-tb ltr row justify-content-flex-start align-items-stretch wrap .flexbox 51 >+horizontal-tb ltr row justify-content-flex-end align-items-flex-start wrap .flexbox 52 >+horizontal-tb ltr row justify-content-flex-end align-items-flex-end wrap .flexbox 53 >+horizontal-tb ltr row justify-content-flex-end align-items-stretch wrap .flexbox 54 >+horizontal-tb rtl row justify-content-flex-start align-items-flex-start wrap .flexbox 55 >+horizontal-tb rtl row justify-content-flex-start align-items-flex-end wrap .flexbox 56 >+horizontal-tb rtl row justify-content-flex-start align-items-stretch wrap .flexbox 57 >+horizontal-tb rtl row justify-content-flex-end align-items-flex-start wrap .flexbox 58 >+horizontal-tb rtl row justify-content-flex-end align-items-flex-end wrap .flexbox 59 >+horizontal-tb rtl row justify-content-flex-end align-items-stretch wrap .flexbox 60 >+horizontal-tb ltr column justify-content-flex-start align-items-flex-start wrap .flexbox 61 >+horizontal-tb ltr column justify-content-flex-start align-items-flex-end wrap .flexbox 62 >+horizontal-tb ltr column justify-content-flex-start align-items-stretch wrap .flexbox 63 >+horizontal-tb ltr column justify-content-flex-end align-items-flex-start wrap .flexbox 64 >+horizontal-tb ltr column justify-content-flex-end align-items-flex-end wrap .flexbox 65 >+horizontal-tb ltr column justify-content-flex-end align-items-stretch wrap .flexbox 66 >+horizontal-tb rtl column justify-content-flex-start align-items-flex-start wrap .flexbox 67 >+horizontal-tb rtl column justify-content-flex-start align-items-flex-end wrap .flexbox 68 >+horizontal-tb rtl column justify-content-flex-start align-items-stretch wrap .flexbox 69 >+horizontal-tb rtl column justify-content-flex-end align-items-flex-start wrap .flexbox 70 >+horizontal-tb rtl column justify-content-flex-end align-items-flex-end wrap .flexbox 71 >+horizontal-tb rtl column justify-content-flex-end align-items-stretch wrap .flexbox 72 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 73 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 74 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 75 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 76 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 77 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 78 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 79 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 80 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 81 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 82 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 83 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 84 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 85 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 86 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 87 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 88 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 89 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 90 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 91 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 92 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 93 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 94 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 95 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 96 >+horizontal-tb ltr row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 97 >+horizontal-tb ltr row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 98 >+horizontal-tb ltr row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 99 >+horizontal-tb ltr row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 100 >+horizontal-tb ltr row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 101 >+horizontal-tb ltr row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 102 >+horizontal-tb rtl row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 103 >+horizontal-tb rtl row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 104 >+horizontal-tb rtl row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 105 >+horizontal-tb rtl row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 106 >+horizontal-tb rtl row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 107 >+horizontal-tb rtl row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 108 >+horizontal-tb ltr column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 109 >+horizontal-tb ltr column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 110 >+horizontal-tb ltr column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 111 >+horizontal-tb ltr column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 112 >+horizontal-tb ltr column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 113 >+horizontal-tb ltr column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 114 >+horizontal-tb rtl column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 115 >+horizontal-tb rtl column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 116 >+horizontal-tb rtl column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 117 >+horizontal-tb rtl column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 118 >+horizontal-tb rtl column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 119 >+horizontal-tb rtl column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 120 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 121 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 122 >+horizontal-tb ltr row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 123 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 124 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 125 >+horizontal-tb ltr row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 126 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 127 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 128 >+horizontal-tb rtl row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 129 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 130 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 131 >+horizontal-tb rtl row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 132 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 133 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 134 >+horizontal-tb ltr column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 135 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 136 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 137 >+horizontal-tb ltr column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 138 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 139 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 140 >+horizontal-tb rtl column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 141 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 142 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 143 >+horizontal-tb rtl column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 144 >+vertical-rl ltr row justify-content-flex-start align-items-flex-start nowrap .flexbox 145 >+vertical-rl ltr row justify-content-flex-start align-items-flex-end nowrap .flexbox 146 >+vertical-rl ltr row justify-content-flex-start align-items-stretch nowrap .flexbox 147 >+vertical-rl ltr row justify-content-flex-end align-items-flex-start nowrap .flexbox 148 >+vertical-rl ltr row justify-content-flex-end align-items-flex-end nowrap .flexbox 149 >+vertical-rl ltr row justify-content-flex-end align-items-stretch nowrap .flexbox 150 >+vertical-rl rtl row justify-content-flex-start align-items-flex-start nowrap .flexbox 151 >+vertical-rl rtl row justify-content-flex-start align-items-flex-end nowrap .flexbox 152 >+vertical-rl rtl row justify-content-flex-start align-items-stretch nowrap .flexbox 153 >+vertical-rl rtl row justify-content-flex-end align-items-flex-start nowrap .flexbox 154 >+vertical-rl rtl row justify-content-flex-end align-items-flex-end nowrap .flexbox 155 >+vertical-rl rtl row justify-content-flex-end align-items-stretch nowrap .flexbox 156 >+vertical-rl ltr column justify-content-flex-start align-items-flex-start nowrap .flexbox 157 >+vertical-rl ltr column justify-content-flex-start align-items-flex-end nowrap .flexbox 158 >+vertical-rl ltr column justify-content-flex-start align-items-stretch nowrap .flexbox 159 >+vertical-rl ltr column justify-content-flex-end align-items-flex-start nowrap .flexbox 160 >+vertical-rl ltr column justify-content-flex-end align-items-flex-end nowrap .flexbox 161 >+vertical-rl ltr column justify-content-flex-end align-items-stretch nowrap .flexbox 162 >+vertical-rl rtl column justify-content-flex-start align-items-flex-start nowrap .flexbox 163 >+vertical-rl rtl column justify-content-flex-start align-items-flex-end nowrap .flexbox 164 >+vertical-rl rtl column justify-content-flex-start align-items-stretch nowrap .flexbox 165 >+vertical-rl rtl column justify-content-flex-end align-items-flex-start nowrap .flexbox 166 >+vertical-rl rtl column justify-content-flex-end align-items-flex-end nowrap .flexbox 167 >+vertical-rl rtl column justify-content-flex-end align-items-stretch nowrap .flexbox 168 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 169 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 170 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 171 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 172 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 173 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 174 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 175 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 176 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 177 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 178 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 179 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 180 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 181 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 182 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 183 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 184 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 185 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 186 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 187 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 188 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 189 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 190 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 191 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 192 >+vertical-rl ltr row justify-content-flex-start align-items-flex-start wrap .flexbox 193 >+vertical-rl ltr row justify-content-flex-start align-items-flex-end wrap .flexbox 194 >+vertical-rl ltr row justify-content-flex-start align-items-stretch wrap .flexbox 195 >+vertical-rl ltr row justify-content-flex-end align-items-flex-start wrap .flexbox 196 >+vertical-rl ltr row justify-content-flex-end align-items-flex-end wrap .flexbox 197 >+vertical-rl ltr row justify-content-flex-end align-items-stretch wrap .flexbox 198 >+vertical-rl rtl row justify-content-flex-start align-items-flex-start wrap .flexbox 199 >+vertical-rl rtl row justify-content-flex-start align-items-flex-end wrap .flexbox 200 >+vertical-rl rtl row justify-content-flex-start align-items-stretch wrap .flexbox 201 >+vertical-rl rtl row justify-content-flex-end align-items-flex-start wrap .flexbox 202 >+vertical-rl rtl row justify-content-flex-end align-items-flex-end wrap .flexbox 203 >+vertical-rl rtl row justify-content-flex-end align-items-stretch wrap .flexbox 204 >+vertical-rl ltr column justify-content-flex-start align-items-flex-start wrap .flexbox 205 >+vertical-rl ltr column justify-content-flex-start align-items-flex-end wrap .flexbox 206 >+vertical-rl ltr column justify-content-flex-start align-items-stretch wrap .flexbox 207 >+vertical-rl ltr column justify-content-flex-end align-items-flex-start wrap .flexbox 208 >+vertical-rl ltr column justify-content-flex-end align-items-flex-end wrap .flexbox 209 >+vertical-rl ltr column justify-content-flex-end align-items-stretch wrap .flexbox 210 >+vertical-rl rtl column justify-content-flex-start align-items-flex-start wrap .flexbox 211 >+vertical-rl rtl column justify-content-flex-start align-items-flex-end wrap .flexbox 212 >+vertical-rl rtl column justify-content-flex-start align-items-stretch wrap .flexbox 213 >+vertical-rl rtl column justify-content-flex-end align-items-flex-start wrap .flexbox 214 >+vertical-rl rtl column justify-content-flex-end align-items-flex-end wrap .flexbox 215 >+vertical-rl rtl column justify-content-flex-end align-items-stretch wrap .flexbox 216 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 217 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 218 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 219 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 220 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 221 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 222 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 223 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 224 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 225 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 226 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 227 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 228 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 229 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 230 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 231 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 232 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 233 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 234 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 235 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 236 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 237 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 238 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 239 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 240 >+vertical-rl ltr row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 241 >+vertical-rl ltr row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 242 >+vertical-rl ltr row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 243 >+vertical-rl ltr row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 244 >+vertical-rl ltr row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 245 >+vertical-rl ltr row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 246 >+vertical-rl rtl row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 247 >+vertical-rl rtl row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 248 >+vertical-rl rtl row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 249 >+vertical-rl rtl row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 250 >+vertical-rl rtl row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 251 >+vertical-rl rtl row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 252 >+vertical-rl ltr column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 253 >+vertical-rl ltr column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 254 >+vertical-rl ltr column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 255 >+vertical-rl ltr column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 256 >+vertical-rl ltr column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 257 >+vertical-rl ltr column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 258 >+vertical-rl rtl column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 259 >+vertical-rl rtl column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 260 >+vertical-rl rtl column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 261 >+vertical-rl rtl column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 262 >+vertical-rl rtl column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 263 >+vertical-rl rtl column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 264 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 265 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 266 >+vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 267 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 268 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 269 >+vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 270 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 271 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 272 >+vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 273 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 274 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 275 >+vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 276 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 277 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 278 >+vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 279 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 280 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 281 >+vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 282 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 283 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 284 >+vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 285 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 286 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 287 >+vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 288 >+vertical-lr ltr row justify-content-flex-start align-items-flex-start nowrap .flexbox 289 >+vertical-lr ltr row justify-content-flex-start align-items-flex-end nowrap .flexbox 290 >+vertical-lr ltr row justify-content-flex-start align-items-stretch nowrap .flexbox 291 >+vertical-lr ltr row justify-content-flex-end align-items-flex-start nowrap .flexbox 292 >+vertical-lr ltr row justify-content-flex-end align-items-flex-end nowrap .flexbox 293 >+vertical-lr ltr row justify-content-flex-end align-items-stretch nowrap .flexbox 294 >+vertical-lr rtl row justify-content-flex-start align-items-flex-start nowrap .flexbox 295 >+vertical-lr rtl row justify-content-flex-start align-items-flex-end nowrap .flexbox 296 >+vertical-lr rtl row justify-content-flex-start align-items-stretch nowrap .flexbox 297 >+vertical-lr rtl row justify-content-flex-end align-items-flex-start nowrap .flexbox 298 >+vertical-lr rtl row justify-content-flex-end align-items-flex-end nowrap .flexbox 299 >+vertical-lr rtl row justify-content-flex-end align-items-stretch nowrap .flexbox 300 >+vertical-lr ltr column justify-content-flex-start align-items-flex-start nowrap .flexbox 301 >+vertical-lr ltr column justify-content-flex-start align-items-flex-end nowrap .flexbox 302 >+vertical-lr ltr column justify-content-flex-start align-items-stretch nowrap .flexbox 303 >+vertical-lr ltr column justify-content-flex-end align-items-flex-start nowrap .flexbox 304 >+vertical-lr ltr column justify-content-flex-end align-items-flex-end nowrap .flexbox 305 >+vertical-lr ltr column justify-content-flex-end align-items-stretch nowrap .flexbox 306 >+vertical-lr rtl column justify-content-flex-start align-items-flex-start nowrap .flexbox 307 >+vertical-lr rtl column justify-content-flex-start align-items-flex-end nowrap .flexbox 308 >+vertical-lr rtl column justify-content-flex-start align-items-stretch nowrap .flexbox 309 >+vertical-lr rtl column justify-content-flex-end align-items-flex-start nowrap .flexbox 310 >+vertical-lr rtl column justify-content-flex-end align-items-flex-end nowrap .flexbox 311 >+vertical-lr rtl column justify-content-flex-end align-items-stretch nowrap .flexbox 312 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 313 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 314 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 315 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 316 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 317 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 318 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 319 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 320 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 321 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 322 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 323 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 324 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 325 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 326 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 327 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 328 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 329 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 330 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 331 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 332 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 333 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 334 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 335 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 336 >+vertical-lr ltr row justify-content-flex-start align-items-flex-start wrap .flexbox 337 >+vertical-lr ltr row justify-content-flex-start align-items-flex-end wrap .flexbox 338 >+vertical-lr ltr row justify-content-flex-start align-items-stretch wrap .flexbox 339 >+vertical-lr ltr row justify-content-flex-end align-items-flex-start wrap .flexbox 340 >+vertical-lr ltr row justify-content-flex-end align-items-flex-end wrap .flexbox 341 >+vertical-lr ltr row justify-content-flex-end align-items-stretch wrap .flexbox 342 >+vertical-lr rtl row justify-content-flex-start align-items-flex-start wrap .flexbox 343 >+vertical-lr rtl row justify-content-flex-start align-items-flex-end wrap .flexbox 344 >+vertical-lr rtl row justify-content-flex-start align-items-stretch wrap .flexbox 345 >+vertical-lr rtl row justify-content-flex-end align-items-flex-start wrap .flexbox 346 >+vertical-lr rtl row justify-content-flex-end align-items-flex-end wrap .flexbox 347 >+vertical-lr rtl row justify-content-flex-end align-items-stretch wrap .flexbox 348 >+vertical-lr ltr column justify-content-flex-start align-items-flex-start wrap .flexbox 349 >+vertical-lr ltr column justify-content-flex-start align-items-flex-end wrap .flexbox 350 >+vertical-lr ltr column justify-content-flex-start align-items-stretch wrap .flexbox 351 >+vertical-lr ltr column justify-content-flex-end align-items-flex-start wrap .flexbox 352 >+vertical-lr ltr column justify-content-flex-end align-items-flex-end wrap .flexbox 353 >+vertical-lr ltr column justify-content-flex-end align-items-stretch wrap .flexbox 354 >+vertical-lr rtl column justify-content-flex-start align-items-flex-start wrap .flexbox 355 >+vertical-lr rtl column justify-content-flex-start align-items-flex-end wrap .flexbox 356 >+vertical-lr rtl column justify-content-flex-start align-items-stretch wrap .flexbox 357 >+vertical-lr rtl column justify-content-flex-end align-items-flex-start wrap .flexbox 358 >+vertical-lr rtl column justify-content-flex-end align-items-flex-end wrap .flexbox 359 >+vertical-lr rtl column justify-content-flex-end align-items-stretch wrap .flexbox 360 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 361 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 362 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 363 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 364 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 365 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 366 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 367 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 368 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 369 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 370 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 371 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 372 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 373 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 374 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 375 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 376 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 377 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 378 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 379 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 380 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 381 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 382 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 383 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 384 >+vertical-lr ltr row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 385 >+vertical-lr ltr row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 386 >+vertical-lr ltr row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 387 >+vertical-lr ltr row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 388 >+vertical-lr ltr row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 389 >+vertical-lr ltr row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 390 >+vertical-lr rtl row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 391 >+vertical-lr rtl row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 392 >+vertical-lr rtl row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 393 >+vertical-lr rtl row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 394 >+vertical-lr rtl row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 395 >+vertical-lr rtl row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 396 >+vertical-lr ltr column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 397 >+vertical-lr ltr column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 398 >+vertical-lr ltr column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 399 >+vertical-lr ltr column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 400 >+vertical-lr ltr column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 401 >+vertical-lr ltr column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 402 >+vertical-lr rtl column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 403 >+vertical-lr rtl column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 404 >+vertical-lr rtl column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 405 >+vertical-lr rtl column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 406 >+vertical-lr rtl column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 407 >+vertical-lr rtl column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 408 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 409 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 410 >+vertical-lr ltr row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 411 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 412 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 413 >+vertical-lr ltr row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 414 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 415 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 416 >+vertical-lr rtl row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 417 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 418 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 419 >+vertical-lr rtl row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 420 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 421 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 422 >+vertical-lr ltr column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 423 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 424 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 425 >+vertical-lr ltr column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 426 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 427 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 428 >+vertical-lr rtl column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 429 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 430 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 431 >+vertical-lr rtl column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 432 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-013.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-013.html >new file mode 100644 >index 0000000000000000000000000000000000000000..cdbdfcfbf72b25b49093bb681067e94e7be3573d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-013.html >@@ -0,0 +1,154 @@ >+<!DOCTYPE html> >+<title>CSS Test: Absolutely positioned children of flexboxes</title> >+<link rel="author" title="Google Inc." href="http://www.google.com/"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<meta name="assert" content="Checks the abspos position of flex children in a number of writing modes, alignments, etc."> >+<style> >+.abspos { >+ height: 50px; >+ width: 50px; >+ background: lightblue; >+ position: absolute; >+ flex: none; >+} >+ >+.relpos { >+ position: relative; >+} >+ >+.title { >+ margin-top: 1em; >+} >+ >+.flexbox { >+ display: flex; >+ background-color: #aaa; >+ height: 100px; >+ width: 100px; >+} >+ >+.horizontal-tb { >+ writing-mode: horizontal-tb; >+} >+.vertical-rl { >+ writing-mode: vertical-rl; >+} >+.vertical-lr { >+ writing-mode: vertical-lr; >+} >+ >+.rtl { >+ direction: rtl; >+} >+.ltr { >+ direction: ltr; >+} >+ >+.align-items-flex-start { >+ align-items: flex-start; >+} >+.align-items-flex-end { >+ align-items: flex-end; >+} >+.align-items-stretch { >+ align-items: stretch; >+} >+.justify-content-flex-start { >+ justify-content: flex-start; >+} >+.justify-content-flex-end { >+ justify-content: flex-end; >+} >+ >+.row { >+ flex-direction: row; >+} >+.row-reverse { >+ flex-direction: row-reverse; >+} >+.column { >+ flex-direction: column; >+} >+.column-reverse { >+ flex-direction: column-reverse; >+} >+ >+.nowrap { >+ flex-wrap: nowrap; >+} >+.wrap { >+ flex-wrap: wrap; >+} >+.wrap-reverse { >+ flex-wrap: wrap-reverse; >+} >+ >+</style> >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+<body onload="checkLayout('.flexbox')"> >+<div id=log></div> >+<script> >+ >+var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; >+var directions = ['ltr', 'rtl']; >+var justifyContents = ['flex-start', 'flex-end']; >+var alignItems = ['flex-start', 'flex-end', 'stretch']; >+var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; >+var wraps = ['nowrap', 'wrap', 'wrap-reverse']; >+ >+// These expected values were harvested from Chrome 85. Firefox 78b6 agrees >+// except when align-items:stretch and flex-wrap:wrap-reverse are both in >+// effect. >+// Chrome 83 and FF 78b6 agree with these values when the lone flex child is >+// position:static instead of position:absolute. That is evidence that these >+// values are all correct, because the position of a staticpos child is >+// specified to be identical to the abspos position when there are no other >+// children or specified offsets. >+var x = [0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0]; >+ >+var y = [0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0]; >+ >+var test_number = 1; >+ >+writingModes.forEach(function(flexWritingMode) { >+ wraps.forEach(function(wrap) { >+ flexDirections.forEach(function(flexDirection) { >+ directions.forEach(function(direction) { >+ justifyContents.forEach(function(justifyContent) { >+ alignItems.forEach(function(alignment) { >+ var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment + ' ' + wrap; >+ var title = document.createElement('div'); >+ title.className = 'title'; >+ title.innerHTML = flexboxClassName + " .flexbox " + (test_number++); >+ document.body.appendChild(title); >+ >+ var flexbox = document.createElement('div'); >+ flexbox.className = 'flexbox ' + flexboxClassName; >+ >+ var child = document.createElement('div'); >+ child.setAttribute('class', 'abspos'); >+ child.setAttribute("data-offset-x", x.shift()); >+ child.setAttribute("data-offset-y", y.shift()); >+ flexbox.appendChild(child); >+ >+ var relpos = document.createElement('div'); >+ relpos.className = 'relpos'; >+ relpos.appendChild(flexbox); >+ >+ document.body.appendChild(relpos); >+ }) >+ }) >+ }) >+ }) >+ }) >+}) >+ >+// Print the x,y offsets for pasting into above x,y arrays. >+absposes = document.querySelectorAll('.abspos') >+lefts = Array.from(absposes).map(x => x.offsetLeft) >+tops = Array.from(absposes).map(x => x.offsetTop) >+ >+</script> >+</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-014-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-014-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..8fdc6339ceea3e8997c3530742a76c862c9e42fb >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-014-expected.txt >@@ -0,0 +1,4 @@ >+aaa bbb aaa bbb aaa bbb >+ >+FAIL The bottom of each pair of boxes should be the same assert_equals: expected 166 but got 106 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-014.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-014.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f02a26800749fd067f38127c52a592df7cef9487 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-014.html >@@ -0,0 +1,82 @@ >+<!doctype html> >+<title>abspos flex children with top margins</title> >+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.org"> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="bookmark" href="https://crbug.com/808750"> >+<meta name="flags" content="dom"> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+ >+<style> >+.container { >+ display: flex; >+ background: lightgray; >+ width: 250px; >+ height: 48px; >+ >+ /* Add some margin so that overflowing things don't stomp on each other: */ >+ margin: 50px 10px; >+ float: left; >+ position: relative; >+} >+ >+.contentBox { >+ position: absolute; >+ /* Margin-box is 100px tall (2px of border + 98px of content): */ >+ border: 1px solid teal; >+ height: 98px; >+ >+ width: 98px; >+ left: 20px; >+} >+.marginBox { >+ position: absolute; >+ /* Margin-box is 100px tall >+ (60px of margin-top + 2px of border + 38px of content): */ >+ margin-top: 60px; >+ border: 1px solid orange; >+ height: 38px; >+ >+ width: 100px; >+ left: 120px; >+} >+</style> >+<div class="container"> >+ <div class="contentBox"> >+ aaa >+ </div> >+ <div class="marginBox"> >+ bbb >+ </div> >+</div> >+ >+<div class="container" style="align-items: flex-end"> >+ <div class="contentBox"> >+ aaa >+ </div> >+ <div class="marginBox"> >+ bbb >+ </div> >+</div> >+ >+<div class="container" style="align-items: center"> >+ <div class="contentBox"> >+ aaa >+ </div> >+ <div class="marginBox"> >+ bbb >+ </div> >+</div> >+<div id=log style="clear:both"></div> >+ >+<script> >+test(function() { >+ var elements = document.querySelectorAll(".contentBox, .marginBox"); >+ for (var i = 0; i < elements.length; i+=2) { >+ assert_equals(elements[i].getBoundingClientRect().bottom, >+ elements[i+1].getBoundingClientRect().bottom); >+ } >+}, "The bottom of each pair of boxes should be the same"); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..6f115107b76ba191df92e825e41399eeb89bdb67 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt >@@ -0,0 +1,5 @@ >+ >+FAIL #abspos 1 assert_equals: >+<div style="background: cyan; margin: 20px; position: absolute; width: 30px; height: 40px;" data-offset-x="150" id="abspos"></div> >+offsetLeft expected 150 but got 190 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1c0f3bc4c2888a12d20e2ab704f835f359366b81 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015.html >@@ -0,0 +1,19 @@ >+<!doctype html> >+<title>abspos flex children with top margins</title> >+<link rel="author" title="Manuel Rego" href="mailto:rego@igalia.com"> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="bookmark" href="https://crbug.com/886592"> >+<meta name="assert" content="Check abspos position of flex children with margins in justify-content: flex-end container."> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<div style="display: flex; width: 200px; height: 100px; justify-content: flex-end; border: solid thick; position: relative;"> >+ <div style="background: cyan; margin: 20px; position: absolute; width: 30px; height: 40px;" data-offset-x="150" id="abspos"></div> >+</div> >+ >+<script> >+checkLayout('#abspos'); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5f8bcaf539f7004b226ab625d4357e4c831d6ac7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-001-expected.html >@@ -0,0 +1,25 @@ >+<!doctype html> >+<title>CSS Test Reference</title> >+<meta charset="utf-8"> >+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:emilio@crisal.io"> >+<style> >+.parent { >+ position: fixed; >+ top: 0; >+ left: 0; >+ display: block; >+ width: 200px; >+ height: 200px; >+ background: yellow; >+} >+ >+.child { >+ position: absolute; >+ left: 50px; >+ top: 50px; >+ width: 100px; >+ height: 100px; >+ background: green; >+} >+</style> >+<div class="parent"><div class="child"></div></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1edfdb04caa0d65148a6994a8c85d8363c74850a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-001.html >@@ -0,0 +1,28 @@ >+<!doctype html> >+<title>CSS Test: Absolutely positioned children of flex container with CSS align</title> >+<meta charset="utf-8"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1386654"> >+<link rel="match" href="position-absolute-containing-block-001-ref.html"> >+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:emilio@crisal.io"> >+<style> >+.parent { >+ position: fixed; >+ top: 0; >+ left: 0; >+ display: flex; >+ align-items: center; >+ justify-content: center; >+ width: 200px; >+ height: 200px; >+ background: yellow; >+} >+ >+.child { >+ position: absolute; >+ width: 100px; >+ height: 100px; >+ background: green; >+} >+</style> >+<div class="parent"><div class="child"></div></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..90ee38856cccd568352c5b6a4f14acc2274605c6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-002-expected.html >@@ -0,0 +1,25 @@ >+<!doctype html> >+<title>CSS Test Reference</title> >+<meta charset="utf-8"> >+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:emilio@crisal.io"> >+<style> >+.parent { >+ position: fixed; >+ top: 0; >+ left: 0; >+ display: block; >+ width: 200px; >+ height: 200px; >+ background: yellow; >+} >+ >+.child { >+ position: absolute; >+ left: 60px; >+ top: 60px; >+ width: 100px; >+ height: 100px; >+ background: green; >+} >+</style> >+<div class="parent"><div class="child"></div></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..aecbf0b4c997ceb748496d7fa09aed6ba8c0f92a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-002.html >@@ -0,0 +1,36 @@ >+<!doctype html> >+<title>CSS Test: Absolutely positioned children of flex container with CSS align</title> >+<meta charset="utf-8"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1386654"> >+<link rel="match" href="position-absolute-containing-block-002-ref.html"> >+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:emilio@crisal.io"> >+<style> >+.parent { >+ position: fixed; >+ top: 0; >+ left: 0; >+ display: flex; >+ align-items: center; >+ justify-content: center; >+ width: 180px; >+ height: 180px; >+ >+ /* Expand the background area to 200px, without touching the content-box, >+ which is what flex absolute children should be aligned relative to. */ >+ border-top: 5px solid yellow; >+ padding-top: 15px; >+ border-left: 5px solid yellow; >+ padding-left: 15px; >+ >+ background: yellow; >+} >+ >+.child { >+ position: absolute; >+ width: 100px; >+ height: 100px; >+ background: green; >+} >+</style> >+<div class="parent"><div class="child"></div></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/w3c-import.log >new file mode 100644 >index 0000000000000000000000000000000000000000..be3a567e74f2db0a685452d5f027c429b00f88d9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/w3c-import.log >@@ -0,0 +1,157 @@ >+The tests in this directory were imported from the W3C repository. >+Do NOT modify these tests directly in WebKit. >+Instead, create a pull request on the WPT github: >+ https://github.com/web-platform-tests/wpt >+ >+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport >+ >+Do NOT modify or remove this file. >+ >+------------------------------------------------------------------------ >+Properties requiring vendor prefixes: >+None >+Property values requiring vendor prefixes: >+None >+------------------------------------------------------------------------ >+List of files: >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-ltr.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-htb-rtl.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-ltr.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vlr-rtl.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-ltr.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-autopos-vrl-rtl.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/abspos-descendent-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-justify-content-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-self-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox-abspos-child-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_absolute-atomic-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_absolute-atomic.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_inline-abspos-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flexbox_inline-abspos.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-005-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-005.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-006-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-006.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-007-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-007.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-008-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-008.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-009-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-009.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-010-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-010.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-011-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-011.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-012.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-013.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-014.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-containing-block-002.html >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-baseline-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-baseline-expected.html >index b98b835bb822dabf3cafd4a044c21428c5aa8456..d5b88e8c7dae73b57c7f993260d7cce363eeebaa 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-baseline-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-baseline-expected.html >@@ -1,6 +1,6 @@ > <!DOCTYPE html> > <html> >-<link href="support/flexbox.css" rel="stylesheet"> >+<link href="../support/flexbox.css" rel="stylesheet"> > <style> > body { > margin: 0; >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001a-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001a-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..13c73e27bc9ae65af0d94e14bebaced9005d71ee >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001a-expected.txt >@@ -0,0 +1,90 @@ >+ >+PASS .flexbox div 1 >+PASS .flexbox div 2 >+PASS .flexbox div 3 >+PASS .flexbox div 4 >+PASS .flexbox div 5 >+PASS .flexbox div 6 >+PASS .flexbox div 7 >+PASS .flexbox div 8 >+PASS .flexbox div 9 >+PASS .flexbox div 10 >+PASS .flexbox div 11 >+PASS .flexbox div 12 >+PASS .flexbox div 13 >+PASS .flexbox div 14 >+PASS .flexbox div 15 >+PASS .flexbox div 16 >+PASS .flexbox div 17 >+PASS .flexbox div 18 >+PASS .flexbox div 19 >+PASS .flexbox div 20 >+PASS .flexbox div 21 >+PASS .flexbox div 22 >+PASS .flexbox div 23 >+PASS .flexbox div 24 >+PASS .flexbox div 25 >+PASS .flexbox div 26 >+PASS .flexbox div 27 >+PASS .flexbox div 28 >+PASS .flexbox div 29 >+PASS .flexbox div 30 >+PASS .flexbox div 31 >+PASS .flexbox div 32 >+PASS .flexbox div 33 >+PASS .flexbox div 34 >+PASS .flexbox div 35 >+PASS .flexbox div 36 >+PASS .flexbox div 37 >+PASS .flexbox div 38 >+PASS .flexbox div 39 >+PASS .flexbox div 40 >+PASS .flexbox div 41 >+PASS .flexbox div 42 >+PASS .flexbox div 43 >+PASS .flexbox div 44 >+PASS .flexbox div 45 >+PASS .flexbox div 46 >+PASS .flexbox div 47 >+PASS .flexbox div 48 >+PASS .flexbox div 49 >+PASS .flexbox div 50 >+PASS .flexbox div 51 >+PASS .flexbox div 52 >+PASS .flexbox div 53 >+PASS .flexbox div 54 >+PASS .flexbox div 55 >+PASS .flexbox div 56 >+PASS .flexbox div 57 >+PASS .flexbox div 58 >+PASS .flexbox div 59 >+PASS .flexbox div 60 >+PASS .flexbox div 61 >+PASS .flexbox div 62 >+PASS .flexbox div 63 >+PASS .flexbox div 64 >+FAIL .flexbox div 65 assert_equals: >+<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div> >+offsetTop expected 198 but got 8 >+FAIL .flexbox div 66 assert_equals: >+<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div> >+offsetTop expected 168 but got 8 >+FAIL .flexbox div 67 assert_equals: >+<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div> >+offsetTop expected 178 but got 18 >+FAIL .flexbox div 68 assert_equals: >+<div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div> >+offsetTop expected 178 but got 18 >+FAIL .flexbox div 69 assert_equals: >+<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div> >+offsetTop expected 128 but got 8 >+FAIL .flexbox div 70 assert_equals: >+<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div> >+offsetTop expected 138 but got 18 >+FAIL .flexbox div 71 assert_equals: >+<div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div> >+offsetTop expected 138 but got 18 >+FAIL .flexbox div 72 assert_equals: >+<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div> >+offsetTop expected 168 but got 48 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c0f15b989c51c8c2c85e09ce1f7da75ee924b662 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001a.html >@@ -0,0 +1,182 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines, >+ testing each possible value of the 'align-content' property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'align-content' in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> >+ <style> >+ div.flexbox { >+ width: 20px; /* Skinny, to force us to wrap */ >+ height: 200px; >+ display: flex; >+ flex-wrap: wrap; >+ margin-right: 2px; >+ float: left; >+ background: lightgray; >+ } >+ div.a { >+ width: 20px; >+ height: 10px; >+ flex: none; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ height: auto; /* height comes from contents */ >+ flex: none; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ height: 40px; >+ flex: none; >+ background: orange; >+ } >+ >+ /* Inside of 'b': */ >+ div.fixedSizeChild { >+ width: 10px; >+ height: 30px; >+ background: purple; >+ } >+ </style> >+ <script src="/resources/testharness.js"></script> >+ <script src="/resources/testharnessreport.js"></script> >+ <script src="/resources/check-layout-th.js"></script> >+ </head> >+ <body onload="checkLayout('.flexbox div')"> >+ >+ <!-- default (stretch) --> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="98"></div></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="58"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="58"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="128"></div> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="18"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="18"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="48"></div> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="198"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="168"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="178"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="128"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="138"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="168"></div> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="88"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="98"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="68"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="78"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="108"></div> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="178"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="78"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="168"></div> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="48"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="138"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="28"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="78"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="148"></div> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="61"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="125"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="125"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="38"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="78"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="138"></div> >+ </div> >+ >+ <!-- start --> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="18"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="18"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="48"></div> >+ </div> >+ >+ <!-- end --> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001b-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001b-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..13c73e27bc9ae65af0d94e14bebaced9005d71ee >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001b-expected.txt >@@ -0,0 +1,90 @@ >+ >+PASS .flexbox div 1 >+PASS .flexbox div 2 >+PASS .flexbox div 3 >+PASS .flexbox div 4 >+PASS .flexbox div 5 >+PASS .flexbox div 6 >+PASS .flexbox div 7 >+PASS .flexbox div 8 >+PASS .flexbox div 9 >+PASS .flexbox div 10 >+PASS .flexbox div 11 >+PASS .flexbox div 12 >+PASS .flexbox div 13 >+PASS .flexbox div 14 >+PASS .flexbox div 15 >+PASS .flexbox div 16 >+PASS .flexbox div 17 >+PASS .flexbox div 18 >+PASS .flexbox div 19 >+PASS .flexbox div 20 >+PASS .flexbox div 21 >+PASS .flexbox div 22 >+PASS .flexbox div 23 >+PASS .flexbox div 24 >+PASS .flexbox div 25 >+PASS .flexbox div 26 >+PASS .flexbox div 27 >+PASS .flexbox div 28 >+PASS .flexbox div 29 >+PASS .flexbox div 30 >+PASS .flexbox div 31 >+PASS .flexbox div 32 >+PASS .flexbox div 33 >+PASS .flexbox div 34 >+PASS .flexbox div 35 >+PASS .flexbox div 36 >+PASS .flexbox div 37 >+PASS .flexbox div 38 >+PASS .flexbox div 39 >+PASS .flexbox div 40 >+PASS .flexbox div 41 >+PASS .flexbox div 42 >+PASS .flexbox div 43 >+PASS .flexbox div 44 >+PASS .flexbox div 45 >+PASS .flexbox div 46 >+PASS .flexbox div 47 >+PASS .flexbox div 48 >+PASS .flexbox div 49 >+PASS .flexbox div 50 >+PASS .flexbox div 51 >+PASS .flexbox div 52 >+PASS .flexbox div 53 >+PASS .flexbox div 54 >+PASS .flexbox div 55 >+PASS .flexbox div 56 >+PASS .flexbox div 57 >+PASS .flexbox div 58 >+PASS .flexbox div 59 >+PASS .flexbox div 60 >+PASS .flexbox div 61 >+PASS .flexbox div 62 >+PASS .flexbox div 63 >+PASS .flexbox div 64 >+FAIL .flexbox div 65 assert_equals: >+<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div> >+offsetTop expected 198 but got 8 >+FAIL .flexbox div 66 assert_equals: >+<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div> >+offsetTop expected 168 but got 8 >+FAIL .flexbox div 67 assert_equals: >+<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div> >+offsetTop expected 178 but got 18 >+FAIL .flexbox div 68 assert_equals: >+<div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div> >+offsetTop expected 178 but got 18 >+FAIL .flexbox div 69 assert_equals: >+<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div> >+offsetTop expected 128 but got 8 >+FAIL .flexbox div 70 assert_equals: >+<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div> >+offsetTop expected 138 but got 18 >+FAIL .flexbox div 71 assert_equals: >+<div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div> >+offsetTop expected 138 but got 18 >+FAIL .flexbox div 72 assert_equals: >+<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div> >+offsetTop expected 168 but got 48 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..4b7f027003da1fb64356ca145b8384cce9d730ba >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001b.html >@@ -0,0 +1,183 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines, >+ testing each possible value of the 'align-content' property. Additionally, >+ the flex container derives its width from the "max-width" property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'align-content' in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> >+ <style> >+ div.flexbox { >+ max-width: 20px; /* Skinny, to force us to wrap */ >+ height: 200px; >+ display: flex; >+ flex-wrap: wrap; >+ margin-right: 2px; >+ float: left; >+ background: lightgray; >+ } >+ div.a { >+ height: 10px; >+ width: 20px; >+ flex: none; >+ background: lightgreen; >+ } >+ div.b { >+ height: auto; /* height comes from contents */ >+ width: 20px; >+ flex: none; >+ background: pink; >+ } >+ div.c { >+ height: 40px; >+ width: 20px; >+ flex: none; >+ background: orange; >+ } >+ >+ /* Inside of 'b': */ >+ div.fixedSizeChild { >+ width: 10px; >+ height: 30px; >+ background: purple; >+ } >+ </style> >+ <script src="/resources/testharness.js"></script> >+ <script src="/resources/testharnessreport.js"></script> >+ <script src="/resources/check-layout-th.js"></script> >+ </head> >+ <body onload="checkLayout('.flexbox div')"> >+ >+ <!-- default (stretch) --> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="98"></div></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="58"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="58"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="128"></div> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="18"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="18"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="48"></div> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="198"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="168"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="178"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="128"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="138"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="168"></div> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="88"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="98"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="98"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="68"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="78"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="108"></div> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="178"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="78"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="168"></div> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="48"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="138"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="28"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="78"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="148"></div> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="61"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="125"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="125"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="38"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="78"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="78"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="138"></div> >+ </div> >+ >+ <!-- start --> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="18"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="8"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="18"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="18"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="48"></div> >+ </div> >+ >+ <!-- end --> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="168"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="178"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="178"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="128"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="138"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="138"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="168"></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-002-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..faf9b2bcf1d7cf8d385cf5bf91b10ec3bd083234 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-002-expected.txt >@@ -0,0 +1,90 @@ >+ >+PASS .flexbox div 1 >+PASS .flexbox div 2 >+PASS .flexbox div 3 >+PASS .flexbox div 4 >+PASS .flexbox div 5 >+PASS .flexbox div 6 >+PASS .flexbox div 7 >+PASS .flexbox div 8 >+PASS .flexbox div 9 >+PASS .flexbox div 10 >+PASS .flexbox div 11 >+PASS .flexbox div 12 >+PASS .flexbox div 13 >+PASS .flexbox div 14 >+PASS .flexbox div 15 >+PASS .flexbox div 16 >+PASS .flexbox div 17 >+PASS .flexbox div 18 >+PASS .flexbox div 19 >+PASS .flexbox div 20 >+PASS .flexbox div 21 >+PASS .flexbox div 22 >+PASS .flexbox div 23 >+PASS .flexbox div 24 >+PASS .flexbox div 25 >+PASS .flexbox div 26 >+PASS .flexbox div 27 >+PASS .flexbox div 28 >+PASS .flexbox div 29 >+PASS .flexbox div 30 >+PASS .flexbox div 31 >+PASS .flexbox div 32 >+PASS .flexbox div 33 >+PASS .flexbox div 34 >+PASS .flexbox div 35 >+PASS .flexbox div 36 >+PASS .flexbox div 37 >+PASS .flexbox div 38 >+PASS .flexbox div 39 >+PASS .flexbox div 40 >+PASS .flexbox div 41 >+PASS .flexbox div 42 >+PASS .flexbox div 43 >+PASS .flexbox div 44 >+PASS .flexbox div 45 >+PASS .flexbox div 46 >+PASS .flexbox div 47 >+PASS .flexbox div 48 >+PASS .flexbox div 49 >+PASS .flexbox div 50 >+PASS .flexbox div 51 >+PASS .flexbox div 52 >+PASS .flexbox div 53 >+PASS .flexbox div 54 >+PASS .flexbox div 55 >+PASS .flexbox div 56 >+FAIL .flexbox div 57 assert_equals: >+<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div> >+offsetTop expected 8 but got 198 >+FAIL .flexbox div 58 assert_equals: >+<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="38"></div> >+offsetTop expected 38 but got 198 >+FAIL .flexbox div 59 assert_equals: >+<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="8"></div></div> >+offsetTop expected 8 but got 168 >+FAIL .flexbox div 60 assert_equals: >+<div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="8"></div> >+offsetTop expected 8 but got 168 >+FAIL .flexbox div 61 assert_equals: >+<div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="78"></div> >+offsetTop expected 78 but got 198 >+FAIL .flexbox div 62 assert_equals: >+<div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="48"></div></div> >+offsetTop expected 48 but got 168 >+FAIL .flexbox div 63 assert_equals: >+<div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="48"></div> >+offsetTop expected 48 but got 168 >+FAIL .flexbox div 64 assert_equals: >+<div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="8"></div> >+offsetTop expected 8 but got 128 >+PASS .flexbox div 65 >+PASS .flexbox div 66 >+PASS .flexbox div 67 >+PASS .flexbox div 68 >+PASS .flexbox div 69 >+PASS .flexbox div 70 >+PASS .flexbox div 71 >+PASS .flexbox div 72 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0ef076680b60f82b8bf884fdad26e439386244dd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-002.html >@@ -0,0 +1,182 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of row wrap-reverse flex containers, with 1-3 flex lines, >+ testing each possible value of the 'align-content' property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'align-content' in a row wrap-reverse flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> >+ <style> >+ div.flexbox { >+ width: 20px; /* Skinny, to force us to wrap */ >+ height: 200px; >+ display: flex; >+ flex-wrap: wrap-reverse; >+ margin-right: 2px; >+ float: left; >+ background: lightgray; >+ } >+ div.a { >+ width: 20px; >+ height: 10px; >+ flex: none; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ height: auto; /* height comes from contents */ >+ flex: none; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ height: 40px; >+ flex: none; >+ background: orange; >+ } >+ >+ /* Inside of 'b': */ >+ div.fixedSizeChild { >+ width: 10px; >+ height: 30px; >+ background: purple; >+ } >+ </style> >+ <script src="/resources/testharness.js"></script> >+ <script src="/resources/testharnessreport.js"></script> >+ <script src="/resources/check-layout-th.js"></script> >+ </head> >+ <body onload="checkLayout('.flexbox div')"> >+ >+ <!-- default (stretch) --> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="8" data-offset-y="198"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="30" data-offset-y="198"></div> >+ <div class="b" data-expected-width="20" data-expected-height="110" data-offset-x="30" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="30" data-offset-y="8"></div></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="52" data-offset-y="198"></div> >+ <div class="b" data-expected-width="20" data-expected-height="70" data-offset-x="52" data-offset-y="88"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="52" data-offset-y="88"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="52" data-offset-y="48"></div> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="74" data-offset-y="198"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="96" data-offset-y="198"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="96" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="96" data-offset-y="168"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="118" data-offset-y="198"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="118" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="118" data-offset-y="168"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="118" data-offset-y="128"></div> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="140" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="162" data-offset-y="38"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="162" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="162" data-offset-y="8"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="184" data-offset-y="78"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="184" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="184" data-offset-y="48"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="184" data-offset-y="8"></div> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="206" data-offset-y="103"></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="228" data-offset-y="118"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="228" data-offset-y="88"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="228" data-offset-y="88"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="250" data-offset-y="138"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="250" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="250" data-offset-y="108"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="250" data-offset-y="68"></div> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="272" data-offset-y="198"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="294" data-offset-y="198"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="294" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="294" data-offset-y="8"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="316" data-offset-y="198"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="316" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="316" data-offset-y="108"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="316" data-offset-y="8"></div> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="338" data-offset-y="103"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="360" data-offset-y="158"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="360" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="360" data-offset-y="48"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="382" data-offset-y="178"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="382" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="382" data-offset-y="108"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="382" data-offset-y="28"></div> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="404" data-offset-y="103"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="426" data-offset-y="145"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="426" data-offset-y="61"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="426" data-offset-y="61"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="448" data-offset-y="168"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="448" data-offset-y="108"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="448" data-offset-y="108"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="448" data-offset-y="38"></div> >+ </div> >+ >+ <!-- start --> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="470" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="492" data-offset-y="38"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="492" data-offset-y="8"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="492" data-offset-y="8"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="514" data-offset-y="78"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="514" data-offset-y="48"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="514" data-offset-y="48"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="514" data-offset-y="8"></div> >+ </div> >+ >+ <!-- end --> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="536" data-offset-y="198"></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="558" data-offset-y="198"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="558" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="558" data-offset-y="168"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="20" data-expected-height="10" data-offset-x="580" data-offset-y="198"></div> >+ <div class="b" data-expected-width="20" data-expected-height="30" data-offset-x="580" data-offset-y="168"><div class="fixedSizeChild" data-expected-width="10" data-expected-height="30" data-offset-x="580" data-offset-y="168"></div></div> >+ <div class="c" data-expected-width="20" data-expected-height="40" data-offset-x="580" data-offset-y="128"></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001a-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001a-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..fd22bfeb3cedc567459b8eff8e10760e03d730f7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001a-expected.txt >@@ -0,0 +1,90 @@ >+ >+PASS .flexbox div 1 >+PASS .flexbox div 2 >+PASS .flexbox div 3 >+PASS .flexbox div 4 >+PASS .flexbox div 5 >+PASS .flexbox div 6 >+PASS .flexbox div 7 >+PASS .flexbox div 8 >+PASS .flexbox div 9 >+PASS .flexbox div 10 >+PASS .flexbox div 11 >+PASS .flexbox div 12 >+PASS .flexbox div 13 >+PASS .flexbox div 14 >+PASS .flexbox div 15 >+PASS .flexbox div 16 >+PASS .flexbox div 17 >+PASS .flexbox div 18 >+PASS .flexbox div 19 >+PASS .flexbox div 20 >+PASS .flexbox div 21 >+PASS .flexbox div 22 >+PASS .flexbox div 23 >+PASS .flexbox div 24 >+PASS .flexbox div 25 >+PASS .flexbox div 26 >+PASS .flexbox div 27 >+PASS .flexbox div 28 >+PASS .flexbox div 29 >+PASS .flexbox div 30 >+PASS .flexbox div 31 >+PASS .flexbox div 32 >+PASS .flexbox div 33 >+PASS .flexbox div 34 >+PASS .flexbox div 35 >+PASS .flexbox div 36 >+PASS .flexbox div 37 >+PASS .flexbox div 38 >+PASS .flexbox div 39 >+PASS .flexbox div 40 >+PASS .flexbox div 41 >+PASS .flexbox div 42 >+PASS .flexbox div 43 >+PASS .flexbox div 44 >+PASS .flexbox div 45 >+PASS .flexbox div 46 >+PASS .flexbox div 47 >+PASS .flexbox div 48 >+PASS .flexbox div 49 >+PASS .flexbox div 50 >+PASS .flexbox div 51 >+PASS .flexbox div 52 >+PASS .flexbox div 53 >+PASS .flexbox div 54 >+PASS .flexbox div 55 >+PASS .flexbox div 56 >+PASS .flexbox div 57 >+PASS .flexbox div 58 >+PASS .flexbox div 59 >+PASS .flexbox div 60 >+PASS .flexbox div 61 >+PASS .flexbox div 62 >+PASS .flexbox div 63 >+PASS .flexbox div 64 >+FAIL .flexbox div 65 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div> >+offsetLeft expected 198 but got 8 >+FAIL .flexbox div 66 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div> >+offsetLeft expected 168 but got 8 >+FAIL .flexbox div 67 assert_equals: >+<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div> >+offsetLeft expected 178 but got 18 >+FAIL .flexbox div 68 assert_equals: >+<div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div> >+offsetLeft expected 178 but got 18 >+FAIL .flexbox div 69 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div> >+offsetLeft expected 128 but got 8 >+FAIL .flexbox div 70 assert_equals: >+<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div> >+offsetLeft expected 138 but got 18 >+FAIL .flexbox div 71 assert_equals: >+<div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div> >+offsetLeft expected 138 but got 18 >+FAIL .flexbox div 72 assert_equals: >+<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div> >+offsetLeft expected 168 but got 48 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..90116e54974cdb088bd8aee1870d257eaea0a26b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001a.html >@@ -0,0 +1,182 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines, >+ testing each possible value of the 'align-content' property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'align-content' in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ height: 10px; /* Short, to force us to wrap */ >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ margin-bottom: 2px; >+ background: lightgray; >+ } >+ div.a { >+ width: 10px; >+ height: 10px; >+ flex: none; >+ background: lightgreen; >+ } >+ div.b { >+ width: auto; /* width comes from contents */ >+ height: 10px; >+ flex: none; >+ background: pink; >+ } >+ div.c { >+ width: 40px; >+ height: 10px; >+ flex: none; >+ background: orange; >+ } >+ >+ /* Inside of 'b': */ >+ div.fixedSizeChild { >+ width: 30px; >+ height: 5px; >+ background: purple; >+ } >+ </style> >+ <script src="/resources/testharness.js"></script> >+ <script src="/resources/testharnessreport.js"></script> >+ <script src="/resources/check-layout-th.js"></script> >+ </head> >+ <body onload="checkLayout('.flexbox div')"> >+ >+ <!-- default (stretch) --> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="20"></div> >+ <div class="b" data-expected-width="110" data-expected-height="10" data-offset-x="98" data-offset-y="20"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="20"></div></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="32"></div> >+ <div class="b" data-expected-width="70" data-expected-height="10" data-offset-x="58" data-offset-y="32"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="58" data-offset-y="32"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="128" data-offset-y="32"></div> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="44"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="56"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="56"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="56"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="68"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="68"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="68"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="68"></div> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="80"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="92"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="92"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="92"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="104"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="104"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="104"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="104"></div> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="116"></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="88" data-offset-y="128"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="128"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="128"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="68" data-offset-y="140"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="140"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="140"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="108" data-offset-y="140"></div> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="152"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="164"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="164"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="164"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="176"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="176"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="176"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="176"></div> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="188"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="48" data-offset-y="200"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="200"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="200"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="28" data-offset-y="212"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="212"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="212"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="148" data-offset-y="212"></div> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="224"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="61" data-offset-y="236"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="236"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="125" data-offset-y="236"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="38" data-offset-y="248"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="248"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="248"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="138" data-offset-y="248"></div> >+ </div> >+ >+ <!-- start --> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="260"></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="272"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="272"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="272"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="284"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="284"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="284"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="284"></div> >+ </div> >+ >+ <!-- end --> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001b-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001b-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..fd22bfeb3cedc567459b8eff8e10760e03d730f7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001b-expected.txt >@@ -0,0 +1,90 @@ >+ >+PASS .flexbox div 1 >+PASS .flexbox div 2 >+PASS .flexbox div 3 >+PASS .flexbox div 4 >+PASS .flexbox div 5 >+PASS .flexbox div 6 >+PASS .flexbox div 7 >+PASS .flexbox div 8 >+PASS .flexbox div 9 >+PASS .flexbox div 10 >+PASS .flexbox div 11 >+PASS .flexbox div 12 >+PASS .flexbox div 13 >+PASS .flexbox div 14 >+PASS .flexbox div 15 >+PASS .flexbox div 16 >+PASS .flexbox div 17 >+PASS .flexbox div 18 >+PASS .flexbox div 19 >+PASS .flexbox div 20 >+PASS .flexbox div 21 >+PASS .flexbox div 22 >+PASS .flexbox div 23 >+PASS .flexbox div 24 >+PASS .flexbox div 25 >+PASS .flexbox div 26 >+PASS .flexbox div 27 >+PASS .flexbox div 28 >+PASS .flexbox div 29 >+PASS .flexbox div 30 >+PASS .flexbox div 31 >+PASS .flexbox div 32 >+PASS .flexbox div 33 >+PASS .flexbox div 34 >+PASS .flexbox div 35 >+PASS .flexbox div 36 >+PASS .flexbox div 37 >+PASS .flexbox div 38 >+PASS .flexbox div 39 >+PASS .flexbox div 40 >+PASS .flexbox div 41 >+PASS .flexbox div 42 >+PASS .flexbox div 43 >+PASS .flexbox div 44 >+PASS .flexbox div 45 >+PASS .flexbox div 46 >+PASS .flexbox div 47 >+PASS .flexbox div 48 >+PASS .flexbox div 49 >+PASS .flexbox div 50 >+PASS .flexbox div 51 >+PASS .flexbox div 52 >+PASS .flexbox div 53 >+PASS .flexbox div 54 >+PASS .flexbox div 55 >+PASS .flexbox div 56 >+PASS .flexbox div 57 >+PASS .flexbox div 58 >+PASS .flexbox div 59 >+PASS .flexbox div 60 >+PASS .flexbox div 61 >+PASS .flexbox div 62 >+PASS .flexbox div 63 >+PASS .flexbox div 64 >+FAIL .flexbox div 65 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div> >+offsetLeft expected 198 but got 8 >+FAIL .flexbox div 66 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div> >+offsetLeft expected 168 but got 8 >+FAIL .flexbox div 67 assert_equals: >+<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div> >+offsetLeft expected 178 but got 18 >+FAIL .flexbox div 68 assert_equals: >+<div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div> >+offsetLeft expected 178 but got 18 >+FAIL .flexbox div 69 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div> >+offsetLeft expected 128 but got 8 >+FAIL .flexbox div 70 assert_equals: >+<div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div> >+offsetLeft expected 138 but got 18 >+FAIL .flexbox div 71 assert_equals: >+<div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div> >+offsetLeft expected 138 but got 18 >+FAIL .flexbox div 72 assert_equals: >+<div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div> >+offsetLeft expected 168 but got 48 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..9a67cc4d996f8a66ed4d0ae3402b2197389546f5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001b.html >@@ -0,0 +1,183 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines, >+ testing each possible value of the 'align-content' property. Additionally, >+ the flex container derives its height from the "max-height" property.--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'align-content' in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ max-height: 10px; /* Short, to force us to wrap */ >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ margin-bottom: 2px; >+ background: lightgray; >+ } >+ div.a { >+ width: 10px; >+ height: 10px; >+ flex: none; >+ background: lightgreen; >+ } >+ div.b { >+ width: auto; /* width comes from contents */ >+ height: 10px; >+ flex: none; >+ background: pink; >+ } >+ div.c { >+ width: 40px; >+ height: 10px; >+ flex: none; >+ background: orange; >+ } >+ >+ /* Inside of 'b': */ >+ div.fixedSizeChild { >+ width: 30px; >+ height: 5px; >+ background: purple; >+ } >+ </style> >+ <script src="/resources/testharness.js"></script> >+ <script src="/resources/testharnessreport.js"></script> >+ <script src="/resources/check-layout-th.js"></script> >+ </head> >+ <body onload="checkLayout('.flexbox div')"> >+ >+ <!-- default (stretch) --> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="20"></div> >+ <div class="b" data-expected-width="110" data-expected-height="10" data-offset-x="98" data-offset-y="20"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="20"></div></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="32"></div> >+ <div class="b" data-expected-width="70" data-expected-height="10" data-offset-x="58" data-offset-y="32"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="58" data-offset-y="32"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="128" data-offset-y="32"></div> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="44"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="56"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="56"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="56"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="68"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="68"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="68"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="68"></div> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="80"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="92"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="92"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="92"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="104"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="104"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="104"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="104"></div> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="116"></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="88" data-offset-y="128"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="128"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="98" data-offset-y="128"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="68" data-offset-y="140"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="140"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="140"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="108" data-offset-y="140"></div> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="152"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="164"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="164"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="164"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="176"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="176"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="176"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="176"></div> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="188"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="48" data-offset-y="200"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="200"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="200"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="28" data-offset-y="212"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="212"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="212"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="148" data-offset-y="212"></div> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="103" data-offset-y="224"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="61" data-offset-y="236"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="236"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="125" data-offset-y="236"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="38" data-offset-y="248"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="248"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="78" data-offset-y="248"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="138" data-offset-y="248"></div> >+ </div> >+ >+ <!-- start --> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="260"></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="272"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="272"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="272"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="8" data-offset-y="284"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="284"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="18" data-offset-y="284"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="48" data-offset-y="284"></div> >+ </div> >+ >+ <!-- end --> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="198" data-offset-y="296"></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="168" data-offset-y="308"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="308"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="178" data-offset-y="308"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="10" data-expected-height="10" data-offset-x="128" data-offset-y="320"></div> >+ <div class="b" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="320"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="5" data-offset-x="138" data-offset-y="320"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="10" data-offset-x="168" data-offset-y="320"></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-002-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..3cb192577871999f8a598eecbca41bfa3741dc1e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-002-expected.txt >@@ -0,0 +1,90 @@ >+ >+PASS .flexbox div 1 >+PASS .flexbox div 2 >+PASS .flexbox div 3 >+PASS .flexbox div 4 >+PASS .flexbox div 5 >+PASS .flexbox div 6 >+PASS .flexbox div 7 >+PASS .flexbox div 8 >+PASS .flexbox div 9 >+PASS .flexbox div 10 >+PASS .flexbox div 11 >+PASS .flexbox div 12 >+PASS .flexbox div 13 >+PASS .flexbox div 14 >+PASS .flexbox div 15 >+PASS .flexbox div 16 >+PASS .flexbox div 17 >+PASS .flexbox div 18 >+PASS .flexbox div 19 >+PASS .flexbox div 20 >+PASS .flexbox div 21 >+PASS .flexbox div 22 >+PASS .flexbox div 23 >+PASS .flexbox div 24 >+PASS .flexbox div 25 >+PASS .flexbox div 26 >+PASS .flexbox div 27 >+PASS .flexbox div 28 >+PASS .flexbox div 29 >+PASS .flexbox div 30 >+PASS .flexbox div 31 >+PASS .flexbox div 32 >+PASS .flexbox div 33 >+PASS .flexbox div 34 >+PASS .flexbox div 35 >+PASS .flexbox div 36 >+PASS .flexbox div 37 >+PASS .flexbox div 38 >+PASS .flexbox div 39 >+PASS .flexbox div 40 >+PASS .flexbox div 41 >+PASS .flexbox div 42 >+PASS .flexbox div 43 >+PASS .flexbox div 44 >+PASS .flexbox div 45 >+PASS .flexbox div 46 >+PASS .flexbox div 47 >+PASS .flexbox div 48 >+PASS .flexbox div 49 >+PASS .flexbox div 50 >+PASS .flexbox div 51 >+PASS .flexbox div 52 >+PASS .flexbox div 53 >+PASS .flexbox div 54 >+PASS .flexbox div 55 >+PASS .flexbox div 56 >+FAIL .flexbox div 57 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div> >+offsetLeft expected 8 but got 198 >+FAIL .flexbox div 58 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div> >+offsetLeft expected 38 but got 198 >+FAIL .flexbox div 59 assert_equals: >+<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div> >+offsetLeft expected 8 but got 168 >+FAIL .flexbox div 60 assert_equals: >+<div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div> >+offsetLeft expected 8 but got 168 >+FAIL .flexbox div 61 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div> >+offsetLeft expected 78 but got 198 >+FAIL .flexbox div 62 assert_equals: >+<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div> >+offsetLeft expected 48 but got 168 >+FAIL .flexbox div 63 assert_equals: >+<div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div> >+offsetLeft expected 48 but got 168 >+FAIL .flexbox div 64 assert_equals: >+<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div> >+offsetLeft expected 8 but got 128 >+PASS .flexbox div 65 >+PASS .flexbox div 66 >+PASS .flexbox div 67 >+PASS .flexbox div 68 >+PASS .flexbox div 69 >+PASS .flexbox div 70 >+PASS .flexbox div 71 >+PASS .flexbox div 72 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3cffd3388b2ea5a6eec598da51d3f003fe6203b5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-002.html >@@ -0,0 +1,182 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of column wrap-reverse flex containers, with 1-3 flex lines, >+ testing each possible value of the 'align-content' property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'align-content' in a column wrap-reverse flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ height: 20px; /* Short, to force us to wrap */ >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap-reverse; >+ margin-bottom: 2px; >+ background: lightgray; >+ } >+ div.a { >+ width: 10px; >+ height: 20px; >+ flex: none; >+ background: lightgreen; >+ } >+ div.b { >+ width: auto; /* width comes from contents */ >+ height: 20px; >+ flex: none; >+ background: pink; >+ } >+ div.c { >+ width: 40px; >+ height: 20px; >+ flex: none; >+ background: orange; >+ } >+ >+ /* Inside of 'b': */ >+ div.fixedSizeChild { >+ width: 30px; >+ height: 10px; >+ background: purple; >+ } >+ </style> >+ <script src="/resources/testharness.js"></script> >+ <script src="/resources/testharnessreport.js"></script> >+ <script src="/resources/check-layout-th.js"></script> >+ </head> >+ <body onload="checkLayout('.flexbox div')"> >+ >+ <!-- default (stretch) --> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="30"></div> >+ <div class="b" data-expected-width="110" data-expected-height="20" data-offset-x="8" data-offset-y="30"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="30"></div></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="52"></div> >+ <div class="b" data-expected-width="70" data-expected-height="20" data-offset-x="88" data-offset-y="52"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="88" data-offset-y="52"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="48" data-offset-y="52"></div> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="74"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="96"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="96"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="96"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="118"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="118"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="118"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="118"></div> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="140"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="162"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="162"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="162"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="184"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="184"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="184"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="184"></div> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="206"></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="118" data-offset-y="228"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="88" data-offset-y="228"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="88" data-offset-y="228"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="138" data-offset-y="250"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="250"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="250"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="68" data-offset-y="250"></div> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="272"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="294"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="294"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="294"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="316"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="316"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="316"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="316"></div> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="338"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="158" data-offset-y="360"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="360"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="360"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="178" data-offset-y="382"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="382"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="382"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="28" data-offset-y="382"></div> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="404"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="145" data-offset-y="426"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="61" data-offset-y="426"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="61" data-offset-y="426"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="168" data-offset-y="448"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="108" data-offset-y="448"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="108" data-offset-y="448"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="38" data-offset-y="448"></div> >+ </div> >+ >+ <!-- start --> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: start"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div> >+ </div> >+ >+ <!-- end --> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="536"></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="558"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="558"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="558"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: end"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="580"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="580"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="580"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="580"></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wmvert-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wmvert-001-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..3cb192577871999f8a598eecbca41bfa3741dc1e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wmvert-001-expected.txt >@@ -0,0 +1,90 @@ >+ >+PASS .flexbox div 1 >+PASS .flexbox div 2 >+PASS .flexbox div 3 >+PASS .flexbox div 4 >+PASS .flexbox div 5 >+PASS .flexbox div 6 >+PASS .flexbox div 7 >+PASS .flexbox div 8 >+PASS .flexbox div 9 >+PASS .flexbox div 10 >+PASS .flexbox div 11 >+PASS .flexbox div 12 >+PASS .flexbox div 13 >+PASS .flexbox div 14 >+PASS .flexbox div 15 >+PASS .flexbox div 16 >+PASS .flexbox div 17 >+PASS .flexbox div 18 >+PASS .flexbox div 19 >+PASS .flexbox div 20 >+PASS .flexbox div 21 >+PASS .flexbox div 22 >+PASS .flexbox div 23 >+PASS .flexbox div 24 >+PASS .flexbox div 25 >+PASS .flexbox div 26 >+PASS .flexbox div 27 >+PASS .flexbox div 28 >+PASS .flexbox div 29 >+PASS .flexbox div 30 >+PASS .flexbox div 31 >+PASS .flexbox div 32 >+PASS .flexbox div 33 >+PASS .flexbox div 34 >+PASS .flexbox div 35 >+PASS .flexbox div 36 >+PASS .flexbox div 37 >+PASS .flexbox div 38 >+PASS .flexbox div 39 >+PASS .flexbox div 40 >+PASS .flexbox div 41 >+PASS .flexbox div 42 >+PASS .flexbox div 43 >+PASS .flexbox div 44 >+PASS .flexbox div 45 >+PASS .flexbox div 46 >+PASS .flexbox div 47 >+PASS .flexbox div 48 >+PASS .flexbox div 49 >+PASS .flexbox div 50 >+PASS .flexbox div 51 >+PASS .flexbox div 52 >+PASS .flexbox div 53 >+PASS .flexbox div 54 >+PASS .flexbox div 55 >+PASS .flexbox div 56 >+FAIL .flexbox div 57 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div> >+offsetLeft expected 8 but got 198 >+FAIL .flexbox div 58 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div> >+offsetLeft expected 38 but got 198 >+FAIL .flexbox div 59 assert_equals: >+<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div> >+offsetLeft expected 8 but got 168 >+FAIL .flexbox div 60 assert_equals: >+<div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div> >+offsetLeft expected 8 but got 168 >+FAIL .flexbox div 61 assert_equals: >+<div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div> >+offsetLeft expected 78 but got 198 >+FAIL .flexbox div 62 assert_equals: >+<div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div> >+offsetLeft expected 48 but got 168 >+FAIL .flexbox div 63 assert_equals: >+<div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div> >+offsetLeft expected 48 but got 168 >+FAIL .flexbox div 64 assert_equals: >+<div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div> >+offsetLeft expected 8 but got 128 >+PASS .flexbox div 65 >+PASS .flexbox div 66 >+PASS .flexbox div 67 >+PASS .flexbox div 68 >+PASS .flexbox div 69 >+PASS .flexbox div 70 >+PASS .flexbox div 71 >+PASS .flexbox div 72 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wmvert-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wmvert-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..474eb6d3f88791d1776a0500cba26b2b7adb15c4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wmvert-001.html >@@ -0,0 +1,182 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines, >+ testing each possible value of the 'align-content' property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'align-content' in a vertical writing-mode flex container</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> >+ <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ height: 20px; /* Short, to force us to wrap */ >+ display: flex; >+ flex-wrap: wrap; >+ margin-bottom: 2px; >+ background: lightgray; >+ writing-mode: vertical-lr; >+ } >+ div.a { >+ width: 10px; >+ height: 20px; >+ flex: none; >+ background: lightgreen; >+ } >+ div.b { >+ width: auto; >+ height: 20px; /* height comes from contents */ >+ flex: none; >+ background: pink; >+ } >+ div.c { >+ width: 40px; >+ height: 20px; >+ flex: none; >+ background: orange; >+ } >+ >+ /* Inside of 'b': */ >+ div.fixedSizeChild { >+ width: 30px; >+ height: 10px; >+ background: purple; >+ } >+ </style> >+ <script src="/resources/testharness.js"></script> >+ <script src="/resources/testharnessreport.js"></script> >+ <script src="/resources/check-layout-th.js"></script> >+ </head> >+ <body onload="checkLayout('.flexbox div')"> >+ >+ <!-- default (stretch) --> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="8"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="30"></div> >+ <div class="b" data-expected-width="110" data-expected-height="20" data-offset-x="98" data-offset-y="30"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="30"></div></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="52"></div> >+ <div class="b" data-expected-width="70" data-expected-height="20" data-offset-x="58" data-offset-y="52"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="58" data-offset-y="52"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="52"></div> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="74"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="96"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="18" data-offset-y="96"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="96"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-start"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="118"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="18" data-offset-y="118"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="18" data-offset-y="118"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="48" data-offset-y="118"></div> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="140"></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="168" data-offset-y="162"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="178" data-offset-y="162"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="162"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: flex-end"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="128" data-offset-y="184"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="138" data-offset-y="184"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="184"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="168" data-offset-y="184"></div> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="206"></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="88" data-offset-y="228"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="98" data-offset-y="228"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="98" data-offset-y="228"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: center"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="68" data-offset-y="250"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="250"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="250"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="108" data-offset-y="250"></div> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="272"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="294"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="178" data-offset-y="294"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="178" data-offset-y="294"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-between"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="316"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="316"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="316"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="168" data-offset-y="316"></div> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="338"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="48" data-offset-y="360"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="138" data-offset-y="360"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="138" data-offset-y="360"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-around"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="28" data-offset-y="382"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="382"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="382"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="148" data-offset-y="382"></div> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="103" data-offset-y="404"></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="61" data-offset-y="426"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="125" data-offset-y="426"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="125" data-offset-y="426"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: space-evenly"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="448"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="78" data-offset-y="448"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="78" data-offset-y="448"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="138" data-offset-y="448"></div> >+ </div> >+ >+ <!-- start --> >+ <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="8" data-offset-y="470"></div> >+ </div> >+ <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="38" data-offset-y="492"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="8" data-offset-y="492"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="8" data-offset-y="492"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="78" data-offset-y="514"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="48" data-offset-y="514"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="48" data-offset-y="514"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="8" data-offset-y="514"></div> >+ </div> >+ >+ <!-- end --> >+ <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="536"></div> >+ </div> >+ <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="558"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="558"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="558"></div></div> >+ </div> >+ <div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse"> >+ <div class="a" data-expected-width="10" data-expected-height="20" data-offset-x="198" data-offset-y="580"></div> >+ <div class="b" data-expected-width="30" data-expected-height="20" data-offset-x="168" data-offset-y="580"><div class="fixedSizeChild" data-expected-width="30" data-expected-height="10" data-offset-x="168" data-offset-y="580"></div></div> >+ <div class="c" data-expected-width="40" data-expected-height="20" data-offset-x="128" data-offset-y="580"></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_center-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_center-expected.html >index 47a1564212a6389434d060922bf866cfa54355da..e6a3d8820b635ce27eb401d68ae8643ebc39321d 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_center-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_center-expected.html >@@ -2,7 +2,7 @@ > <html> > <head> > <title>CSS Flexible Box Test: align-content_center</title> >-<link rel="stylesheet" href="support/test-style.css"> >+<link rel="stylesheet" href="../support/test-style.css"> > <style> > #test { > height: 200px; >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_flex-end-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_flex-end-expected.html >index de7b69796b49ad1d947c9a85e7073760a44e7613..03ebcbed245e0c4353f185100bb2a73039858131 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_flex-end-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_flex-end-expected.html >@@ -2,7 +2,7 @@ > <html> > <head> > <title>CSS Flexible Box Test: align-content_flex-end</title> >-<link rel="stylesheet" href="support/test-style.css"> >+<link rel="stylesheet" href="../support/test-style.css"> > <style> > #test { > height: 200px; >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_flex-start-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_flex-start-expected.html >index 9021cc19800a412fb1448390a9c0c4b680be0482..061bec5e24fc2130d62075bff6b9c67e26ce97b1 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_flex-start-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_flex-start-expected.html >@@ -2,7 +2,7 @@ > <html> > <head> > <title>CSS Flexible Box Test: align-content_flex-start</title> >-<link rel="stylesheet" href="support/test-style.css"> >+<link rel="stylesheet" href="../support/test-style.css"> > <style> > #test { > height: 200px; >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_space-around-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_space-around-expected.html >index e9bedcae37537217942fdfc57bafd055147de33f..cab31db1f007b648d8c5a1afd211d70689669540 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_space-around-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_space-around-expected.html >@@ -2,7 +2,7 @@ > <html> > <head> > <title>CSS Flexible Box Test: align-content_space-around</title> >-<link rel="stylesheet" href="support/test-style.css"> >+<link rel="stylesheet" href="../support/test-style.css"> > <style> > #test { > height: 210px; >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_space-between-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_space-between-expected.html >index 3fcb4a9db47ddefb450a5e54da4b51d2fb9e80c5..97b56e23ef0d9efe91edd37250b1ce2df4400edd 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_space-between-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_space-between-expected.html >@@ -2,7 +2,7 @@ > <html> > <head> > <title>CSS Flexible Box Test: align-content_space-between</title> >-<link rel="stylesheet" href="support/test-style.css"> >+<link rel="stylesheet" href="../support/test-style.css"> > <style> > #test { > height: 200px; >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_stretch-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_stretch-expected.html >index 8b24cdadd355217c0034963eca190dbc90e6ce5a..f66a1ad9595a746c902f28990db8101ed23df9d5 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_stretch-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content_stretch-expected.html >@@ -2,7 +2,7 @@ > <html> > <head> > <title>CSS Flexible Box Test: align-content_stretch</title> >-<link rel="stylesheet" href="support/test-style.css"> >+<link rel="stylesheet" href="../support/test-style.css"> > <style> > #test { > height: 210px; >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-007.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-007.html >index 01e8f001a8a39c8726cf9a9453dfad07d0e1b83a..704c82fc6ad92410ff50ba4e5bbe02913ab33fe9 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-007.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-007.html >@@ -10,6 +10,6 @@ > <!-- This makes sure that we only see green if the flex items are sized correctly --> > <div style="position: absolute; width: 100px; height: 100px; background: green;"></div> > >-<div style="display: flex; flex-direction: column; width: 100px; height: 100px; line-height: 20px; align-items: center; background: green;"> >+<div style="display: flex; flex-direction: column; width: 100px; height: 100px; line-height: 20px; align-items: center;"> > <img src="../support/red-rect.svg"> > </div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-self-015-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-self-015-expected.html >index 9215c293d48a2c95e7199beff02f344156e561e4..415a36f42dec838b3419b80d0d9b5fc2f536808e 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-self-015-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-self-015-expected.html >@@ -1,7 +1,7 @@ > <!DOCTYPE html> > <html> > <head> >-<link href="support/flexbox.css" rel="stylesheet"> >+<link href="../support/flexbox.css" rel="stylesheet"> > <style> > .flexbox { > border: 1px solid black; >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/auto-margins-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/auto-margins-003-expected.html >index 53acef7344384df4c3ac86107bf5fd7c85aa8df3..4c8f69c8a738fd3736408be342d81aa318d33902 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/auto-margins-003-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/auto-margins-003-expected.html >@@ -1,7 +1,7 @@ > <!DOCTYPE html> > <html> > <head> >-<link href="support/flexbox.css" rel="stylesheet"> >+<link href="../support/flexbox.css" rel="stylesheet"> > <style> > .flexbox { > border: 1px solid black; >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-001-print-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-001-print-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d4a678d0746e87768b6a5be24a66b5f79e35a116 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-001-print-expected.html >@@ -0,0 +1,26 @@ >+<!DOCTYPE html> >+<!-- Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ --> >+<html> >+ <meta charset="utf-8"> >+ <title>CSS Flexbox Test Reference: Test for pagination of a nested float element in a flex item in a printing context</title> >+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> >+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> >+ >+ <style> >+ @page { size:5in 3in; margin:0.5in; } >+ >+ html, body { >+ margin: 0; >+ } >+ #target { >+ background: green; >+ width: 2in; >+ height: 6in; /* Expected to cover 3 pages. */ >+ } >+ </style> >+ >+ <body> >+ <div id="target"></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-001-print.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-001-print.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2fbf939f6a54c9056b4bd39fe0466f0df25f0bb0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-001-print.html >@@ -0,0 +1,44 @@ >+<!DOCTYPE html> >+<!-- Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ --> >+<html> >+ <meta charset="utf-8"> >+ <title>CSS Flexbox Test: Test for pagination of a nested float element in a flex item in a printing context</title> >+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> >+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> >+ <link rel="help" href="https://drafts.csswg.org/css-break/#possible-breaks"> >+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1559961"> >+ <link rel="match" href="break-nested-float-in-flex-item-print-ref.html"> >+ >+ <style> >+ @page { size:5in 3in; margin:0.5in; } >+ >+ html, body { >+ margin: 0; >+ } >+ #flex { >+ display: flex; >+ flex-wrap: nowrap; >+ flex-direction: column; >+ } >+ #target { >+ float: left; >+ background: green; >+ width: 2in; >+ height: 6in; /* Expected to cover 3 pages. */ >+ } >+ </style> >+ >+ <body> >+ <div id="flex"> >+ <div> >+ <div> >+ <div> >+ <!-- target needs to be deeply nested under a flex item. --> >+ <div id="target"></div> >+ </div> >+ </div> >+ </div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-002-print-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-002-print-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d4a678d0746e87768b6a5be24a66b5f79e35a116 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-002-print-expected.html >@@ -0,0 +1,26 @@ >+<!DOCTYPE html> >+<!-- Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ --> >+<html> >+ <meta charset="utf-8"> >+ <title>CSS Flexbox Test Reference: Test for pagination of a nested float element in a flex item in a printing context</title> >+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> >+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> >+ >+ <style> >+ @page { size:5in 3in; margin:0.5in; } >+ >+ html, body { >+ margin: 0; >+ } >+ #target { >+ background: green; >+ width: 2in; >+ height: 6in; /* Expected to cover 3 pages. */ >+ } >+ </style> >+ >+ <body> >+ <div id="target"></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-002-print.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-002-print.html >new file mode 100644 >index 0000000000000000000000000000000000000000..cc6037a87132d343e8ecfc6d633685a76ea92e15 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-002-print.html >@@ -0,0 +1,45 @@ >+<!DOCTYPE html> >+<!-- Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ --> >+<html> >+ <meta charset="utf-8"> >+ <title>CSS Flexbox Test: Test for pagination of a nested float element with clearance in a flex item in a printing context</title> >+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> >+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> >+ <link rel="help" href="https://drafts.csswg.org/css-break/#possible-breaks"> >+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1559961"> >+ <link rel="match" href="break-nested-float-in-flex-item-print-ref.html"> >+ >+ <style> >+ @page { size:5in 3in; margin:0.5in; } >+ >+ html, body { >+ margin: 0; >+ } >+ #flex { >+ display: flex; >+ flex-wrap: nowrap; >+ flex-direction: column; >+ } >+ #target { >+ float: left; >+ background: green; >+ width: 2in; >+ height: 6in; /* Expected to cover 3 pages. */ >+ } >+ </style> >+ >+ <body> >+ <div id="flex"> >+ <div> >+ <div> >+ <div> >+ <!-- target needs to be deeply nested under a flex item. --> >+ <div id="target"></div> >+ <div style="clear:both"></div> >+ </div> >+ </div> >+ </div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/canvas-dynamic-change-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/canvas-dynamic-change-001.html >index 38aa0006d5799f684c16bcb893c6783f184a182e..09d524e7356f49c72f407713b23e70cedf5c7838 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/canvas-dynamic-change-001.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/canvas-dynamic-change-001.html >@@ -6,6 +6,7 @@ > <link href="support/flexbox.css" rel="stylesheet"> > <style> > .red { >+ width: 600px; > height: 400px; > background: red; > } >@@ -20,7 +21,10 @@ canvas { > > <div class="red"> > <div class="flexbox column"> >- <canvas id="canvas" data-expected-height="400"></canvas> >+ <!-- The height=400 attribute makes the aspect ratio be 300x400. 300 from >+ the fallback width of replaced elements. 400 from the attribute. >+ After stretching to 600px wide, the height should be 800px. --> >+ <canvas id="canvas" data-expected-height="800"></canvas> > </div> > </div> > >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..83d9f4c9d79440ce71c225bcef846869978e6ac4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash-expected.txt >@@ -0,0 +1,9 @@ >+layer at (0,0) size 800x600 >+ RenderView at (0,0) size 800x600 >+layer at (0,0) size 800x8 >+ RenderBlock {HTML} at (0,0) size 800x8 >+layer at (8,8) size 100x100 >+ RenderFlexibleBox {DIV} at (0,0) size 100x100 >+ RenderBlock (anonymous) at (0,0) size 8x100 >+ RenderText {#text} at (0,0) size 8x17 >+ text run at (0,0) width 8: "x" >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3197d5b796b032742fa44bbd42ba6fe803268d69 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html >@@ -0,0 +1,37 @@ >+<!DOCTYPE html> >+<html> >+ <meta charset="UTF-8"> >+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> >+ <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> >+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1678469"> >+ <meta name="assert" content="This test ensures that the browser does not crash after removing the element 'c'."> >+ >+ <style> >+ html { columns: 0 } >+ body { >+ transform: rotate(14deg); >+ } >+ #flex-container { >+ display: flex; >+ contain: size layout; >+ position: absolute; >+ width: 100px; >+ height: 100px; >+ } >+ </style> >+ >+ <script> >+ function boom() { >+ let flex = document.getElementById('flex-container'); >+ let c = document.getElementById('c'); >+ flex.removeChild(c); >+ } >+ </script> >+ >+ <body onload="boom()"> >+ <div id="flex-container"> >+ x >+ <div id="c"></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-img-expand-evenly-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-img-expand-evenly-expected.html >index 3ec9d86d750eecb1286aaef8c563b7870f895c20..146242074b223b53936ececd82d0a40c4d4cc95c 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-img-expand-evenly-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-img-expand-evenly-expected.html >@@ -28,7 +28,7 @@ > <!-- It is important that there is no linebreak between the <img> tags. > The line break would be rendered as whitespace, breaking the test. > --> >- <img src="support/solidblue.png" /><img src="support/solidblue.png" /><img src="support/solidblue.png" /> >+ <img src="../support/solidblue.png" /><img src="../support/solidblue.png" /><img src="../support/solidblue.png" /> > </div> > > >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-expected.html >index 91eb06c19a680371ea93aa910ba23a9a40a651ce..21e7a010c7e63ef35c48c3da272daea2fa7f19b7 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-expected.html >@@ -4,27 +4,21 @@ > <meta charset="utf-8" /> > <title>CSS Reftest Reference</title> > <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org"> >- <style type="text/css"> >- .container { >- color: white; >- } >+ >+ <style> > .item { >- writing-mode: vertical-rl; >- background: green; >- height: 3em; >- width: 3em; >- line-height: 1.5em; >+ width: 15px; >+ height: 45px; >+ float: left; > } > </style> > </head> >-<body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> > >- <div class="container"> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- </div> >+<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > >-</body> >-</html> >+<div style="height: 90px; width: 30px; border: 2px solid black;"> >+ <div class="item" style="background: grey"></div> >+ <div class="item" style="background: orange"></div> >+ <div class="item" style="background: yellow"></div> >+ <div class="item" style="background: blue"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-expected.html >index 91eb06c19a680371ea93aa910ba23a9a40a651ce..21e7a010c7e63ef35c48c3da272daea2fa7f19b7 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-expected.html >@@ -4,27 +4,21 @@ > <meta charset="utf-8" /> > <title>CSS Reftest Reference</title> > <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org"> >- <style type="text/css"> >- .container { >- color: white; >- } >+ >+ <style> > .item { >- writing-mode: vertical-rl; >- background: green; >- height: 3em; >- width: 3em; >- line-height: 1.5em; >+ width: 15px; >+ height: 45px; >+ float: left; > } > </style> > </head> >-<body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> > >- <div class="container"> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- </div> >+<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > >-</body> >-</html> >+<div style="height: 90px; width: 30px; border: 2px solid black;"> >+ <div class="item" style="background: grey"></div> >+ <div class="item" style="background: orange"></div> >+ <div class="item" style="background: yellow"></div> >+ <div class="item" style="background: blue"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-expected.html >index 91eb06c19a680371ea93aa910ba23a9a40a651ce..21e7a010c7e63ef35c48c3da272daea2fa7f19b7 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-expected.html >@@ -4,27 +4,21 @@ > <meta charset="utf-8" /> > <title>CSS Reftest Reference</title> > <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org"> >- <style type="text/css"> >- .container { >- color: white; >- } >+ >+ <style> > .item { >- writing-mode: vertical-rl; >- background: green; >- height: 3em; >- width: 3em; >- line-height: 1.5em; >+ width: 15px; >+ height: 45px; >+ float: left; > } > </style> > </head> >-<body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> > >- <div class="container"> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- </div> >+<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > >-</body> >-</html> >+<div style="height: 90px; width: 30px; border: 2px solid black;"> >+ <div class="item" style="background: grey"></div> >+ <div class="item" style="background: orange"></div> >+ <div class="item" style="background: yellow"></div> >+ <div class="item" style="background: blue"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse-expected.html >index 91eb06c19a680371ea93aa910ba23a9a40a651ce..21e7a010c7e63ef35c48c3da272daea2fa7f19b7 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse-expected.html >@@ -4,27 +4,21 @@ > <meta charset="utf-8" /> > <title>CSS Reftest Reference</title> > <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org"> >- <style type="text/css"> >- .container { >- color: white; >- } >+ >+ <style> > .item { >- writing-mode: vertical-rl; >- background: green; >- height: 3em; >- width: 3em; >- line-height: 1.5em; >+ width: 15px; >+ height: 45px; >+ float: left; > } > </style> > </head> >-<body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> > >- <div class="container"> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- </div> >+<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > >-</body> >-</html> >+<div style="height: 90px; width: 30px; border: 2px solid black;"> >+ <div class="item" style="background: grey"></div> >+ <div class="item" style="background: orange"></div> >+ <div class="item" style="background: yellow"></div> >+ <div class="item" style="background: blue"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html >index 3d0d6a5fa21a4131eccac0ebea4cdfbff1bc6053..4aa864b8ffab1cc719636938aa9733db7dec05ed 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html >@@ -18,39 +18,26 @@ > display: flex; > flex-flow: row-reverse wrap-reverse; > writing-mode: vertical-rl; >- color: white; >- >- height: 9em; >+ border: 2px solid black; >+ height: 90px; > } > .item { >- background: green; >- height: 3em; >- width: 1.5em; >- line-height: 1.5em; >+ width: 15px; >+ height: 45px; > > /* make sure UA that doesn't support writing mode and flexbox fails. */ > float: right; > } >- .error { >- position: absolute; >- background: red; >- height: 9em; >- width: 3em; >- z-index: -1; >- } > </style> > </head> > <body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> >+<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > >- <div class="error"></div> > <div class="container"> >- <div class="item">ï½ï½ï½</div> >- <div class="item">ï½ï½ ï½</div> >- <div class="item">ï½ï½ï½</div> >- <div class="item">ï¼ï¼ï¼</div> >- <div class="item">ï¼ï¼ï¼</div> >- <div class="item">ï¼ï¼ï¼</div> >+ <div class="item" style="background: yellow"></div> >+ <div class="item" style="background: grey"></div> >+ <div class="item" style="background: blue"></div> >+ <div class="item" style="background: orange"></div> > </div> > </body> > </html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap.html >index 8242f221597a0d397826319eccd879058b39c077..41550e0dc2457ac299c5b9c445a3f00e50bdd137 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse-wrap.html >@@ -18,39 +18,26 @@ > display: flex; > flex-flow: row-reverse wrap; > writing-mode: vertical-rl; >- color: white; >- >- height: 9em; >+ border: 2px solid black; >+ height: 90px; > } > .item { >- background: green; >- height: 3em; >- width: 1.5em; >- line-height: 1.5em; >+ width: 15px; >+ height: 45px; > > /* make sure UA that doesn't support writing mode and flexbox fails. */ > float: right; > } >- .error { >- position: absolute; >- background: red; >- height: 9em; >- width: 3em; >- z-index: -1; >- } > </style> > </head> > <body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> >+<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > >- <div class="error"></div> > <div class="container"> >- <div class="item">ï¼ï¼ï¼</div> >- <div class="item">ï¼ï¼ï¼</div> >- <div class="item">ï¼ï¼ï¼</div> >- <div class="item">ï½ï½ï½</div> >- <div class="item">ï½ï½ ï½</div> >- <div class="item">ï½ï½ï½</div> >+ <div class="item" style="background: blue"></div> >+ <div class="item" style="background: orange"></div> >+ <div class="item" style="background: yellow"></div> >+ <div class="item" style="background: grey"></div> > </div> > </body> > </html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse.html >index d5a857eaf252ed3e3fa46cd75e368fffb4f12bac..1b36e7e0621ceda4a936e719be7520ab1be49e2c 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-reverse.html >@@ -18,34 +18,35 @@ > display: flex; > flex-flow: row-reverse; > writing-mode: vertical-rl; >- color: white; >+ border: 2px solid black; >+ height: 90px; > } > .item { >- background: green; >- height: 3em; >- width: 3em; >- line-height: 1.5em; >+ line-height: 0; > > /* make sure UA that doesn't support writing mode and flexbox fails. */ > float: right; > } >- .error { >- position: absolute; >- background: red; >- height: 9em; >- width: 3em; >- z-index: -1; >+ .color-block { >+ display: inline-block; >+ width: 15px; >+ height: 45px; > } > </style> > </head> > <body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> >- >- <div class="error"></div> >+ <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > <div class="container"> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >+ <div class="item"> >+ <span class=color-block style="background: blue;"></span> >+ <br /> >+ <span class=color-block style="background: yellow;"></span> >+ </div> >+ <div class="item"> >+ <span class=color-block style="background: orange;"></span> >+ <br /> >+ <span class=color-block style="background: grey;"></span> >+ </div> > </div> > </body> > </html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-expected.html >index 91eb06c19a680371ea93aa910ba23a9a40a651ce..21e7a010c7e63ef35c48c3da272daea2fa7f19b7 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-expected.html >@@ -4,27 +4,21 @@ > <meta charset="utf-8" /> > <title>CSS Reftest Reference</title> > <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org"> >- <style type="text/css"> >- .container { >- color: white; >- } >+ >+ <style> > .item { >- writing-mode: vertical-rl; >- background: green; >- height: 3em; >- width: 3em; >- line-height: 1.5em; >+ width: 15px; >+ height: 45px; >+ float: left; > } > </style> > </head> >-<body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> > >- <div class="container"> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- </div> >+<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > >-</body> >-</html> >+<div style="height: 90px; width: 30px; border: 2px solid black;"> >+ <div class="item" style="background: grey"></div> >+ <div class="item" style="background: orange"></div> >+ <div class="item" style="background: yellow"></div> >+ <div class="item" style="background: blue"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse-expected.html >index 91eb06c19a680371ea93aa910ba23a9a40a651ce..21e7a010c7e63ef35c48c3da272daea2fa7f19b7 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse-expected.html >@@ -4,27 +4,21 @@ > <meta charset="utf-8" /> > <title>CSS Reftest Reference</title> > <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org"> >- <style type="text/css"> >- .container { >- color: white; >- } >+ >+ <style> > .item { >- writing-mode: vertical-rl; >- background: green; >- height: 3em; >- width: 3em; >- line-height: 1.5em; >+ width: 15px; >+ height: 45px; >+ float: left; > } > </style> > </head> >-<body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> > >- <div class="container"> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- </div> >+<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > >-</body> >-</html> >+<div style="height: 90px; width: 30px; border: 2px solid black;"> >+ <div class="item" style="background: grey"></div> >+ <div class="item" style="background: orange"></div> >+ <div class="item" style="background: yellow"></div> >+ <div class="item" style="background: blue"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse.html >index 94d4346ba5e7fa2e349cbb36f2a054097a8424e4..01048564df6efd31cfe60bfc766bfe7bed3fd98c 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap-reverse.html >@@ -18,39 +18,25 @@ > display: flex; > flex-flow: row wrap-reverse; > writing-mode: vertical-rl; >- color: white; >- >- height: 9em; >+ border: 2px solid black; >+ height: 90px; > } > .item { >- background: green; >- height: 3em; >- width: 1.5em; >- line-height: 1.5em; >+ width: 15px; >+ height: 45px; > > /* make sure UA that doesn't support writing mode and flexbox fails. */ > float: right; > } >- .error { >- position: absolute; >- background: red; >- height: 9em; >- width: 3em; >- z-index: -1; >- } > </style> > </head> > <body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> >- >- <div class="error"></div> >+<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > <div class="container"> >- <div class="item">ï½ï½ï½</div> >- <div class="item">ï½ï½ ï½</div> >- <div class="item">ï½ï½ï½</div> >- <div class="item">ï¼ï¼ï¼</div> >- <div class="item">ï¼ï¼ï¼</div> >- <div class="item">ï¼ï¼ï¼</div> >+ <div class="item" style="background: grey"></div> >+ <div class="item" style="background: yellow"></div> >+ <div class="item" style="background: orange"></div> >+ <div class="item" style="background: blue"></div> > </div> > </body> > </html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap.html >index 22ed901ba8882070b64e150ab46d2f9dd20dc6e5..0cbc469c8fde1812ac4c16d6eb03c888923aa667 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row-wrap.html >@@ -18,39 +18,26 @@ > display: flex; > flex-flow: row wrap; > writing-mode: vertical-rl; >- color: white; >- >- height: 9em; >+ border: 2px solid black; >+ height: 90px; > } > .item { >- background: green; >- height: 3em; >- width: 1.5em; >- line-height: 1.5em; >+ width: 15px; >+ height: 45px; > > /* make sure UA that doesn't support writing mode and flexbox fails. */ > float: right; > } >- .error { >- position: absolute; >- background: red; >- height: 9em; >- width: 3em; >- z-index: -1; >- } > </style> > </head> > <body> >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> >+<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > >- <div class="error"></div> > <div class="container"> >- <div class="item">ï¼ï¼ï¼</div> >- <div class="item">ï¼ï¼ï¼</div> >- <div class="item">ï¼ï¼ï¼</div> >- <div class="item">ï½ï½ï½</div> >- <div class="item">ï½ï½ ï½</div> >- <div class="item">ï½ï½ï½</div> >+ <div class="item" style="background: orange"></div> >+ <div class="item" style="background: blue"></div> >+ <div class="item" style="background: grey"></div> >+ <div class="item" style="background: yellow"></div> > </div> > </body> > </html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row.html >index 15f4f69c3ba0e680f7679fccc499279ec444151e..f34b7aa10bd68ae9676f3d090876b612e75e1de6 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/css-flexbox-row.html >@@ -18,35 +18,35 @@ > display: flex; > flex-flow: row; > writing-mode: vertical-rl; >- color: white; >+ border: 2px solid black; >+ height: 90px; > } > .item { >- background: green; >- height: 3em; >- width: 3em; >- line-height: 1.5em; >+ line-height: 0; > > /* make sure UA that doesn't support writing mode and flexbox fails. */ > float: right; > } >- .error { >- position: absolute; >- background: red; >- height: 9em; >- width: 3em; >- z-index: -1; >+ .color-block { >+ display: inline-block; >+ width: 15px; >+ height: 45px; > } > </style> > </head> > <body> >- >- <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> >- >- <div class="error"></div> >+ <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. > <div class="container"> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ ï½</div> >- <div class="item">ï¼ï¼ï¼<br />ï½ï½ï½</div> >+ <div class="item"> >+ <span class=color-block style="background: orange;"></span> >+ <br /> >+ <span class=color-block style="background: grey;"></span> >+ </div> >+ <div class="item"> >+ <span class=color-block style="background: blue;"></span> >+ <br /> >+ <span class=color-block style="background: yellow;"></span> >+ </div> > </div> > </body> > </html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..af030931ddad15ca5613b29ae6c468f9a04c53db >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-expected.html >@@ -0,0 +1,10 @@ >+<!DOCTYPE html> >+<div style="display: flex; width: 100px; border: solid; align-items: baseline;"> >+ <div style="width: 50px; height: 50px;"> >+ <div style="width: 50px; height: 50px; position: relative; overflow: auto;"> >+ <canvas width=10 height=10 style="width: 80%; background: green;"></canvas> >+ <div id="target" style="position: absolute; width: 10px; height: 10px; background: red; top: 100px;"></div> >+ </div> >+ </div> >+ <div style="width: 50px; height: 50px; background: green;"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..af030931ddad15ca5613b29ae6c468f9a04c53db >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested-expected.html >@@ -0,0 +1,10 @@ >+<!DOCTYPE html> >+<div style="display: flex; width: 100px; border: solid; align-items: baseline;"> >+ <div style="width: 50px; height: 50px;"> >+ <div style="width: 50px; height: 50px; position: relative; overflow: auto;"> >+ <canvas width=10 height=10 style="width: 80%; background: green;"></canvas> >+ <div id="target" style="position: absolute; width: 10px; height: 10px; background: red; top: 100px;"></div> >+ </div> >+ </div> >+ <div style="width: 50px; height: 50px; background: green;"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested.html >new file mode 100644 >index 0000000000000000000000000000000000000000..803b31410dbe07b56d39019de8426dc2575b4e7c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested.html >@@ -0,0 +1,17 @@ >+<!DOCTYPE html> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#baseline-participation"> >+<link rel="match" href="dynamic-baseline-change-ref.html"> >+<meta name="assert" content="This test ensures proper baseline alignment for a sub-tree which adds a scrollbar."> >+<div style="display: flex; width: 100px; border: solid; align-items: baseline;"> >+ <div style="width: 50px; height: 50px;"> >+ <div style="width: 50px; height: 50px; position: relative; overflow: auto;"> >+ <canvas width=10 height=10 style="width: 80%; background: green;"></canvas> <!-- Baseline of the canvas will move when a scrollbar is added. --> >+ <div id="target" style="position: absolute; width: 10px; height: 10px; background: red; top: 0;"></div> >+ </div> >+ </div> >+ <div style="width: 50px; height: 50px; background: green;"></div> <!-- Baseline is synthesized at the block-end edge. --> >+</div> >+<script> >+ document.body.offsetTop; >+ document.getElementById('target').style.top = '100px'; >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f13b87f0c1431010137bc76d516f92173c7aa1ed >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change.html >@@ -0,0 +1,15 @@ >+<!DOCTYPE html> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#baseline-participation"> >+<link rel="match" href="dynamic-baseline-change-ref.html"> >+<meta name="assert" content="This test ensures proper baseline alignment for a sub-tree which adds a scrollbar."> >+<div style="display: flex; width: 100px; border: solid; align-items: baseline;"> >+ <div style="width: 50px; height: 50px; position: relative; overflow: auto;"> >+ <canvas width=10 height=10 style="width: 80%; background: green;"></canvas> <!-- Baseline of the canvas will move when a scrollbar is added. --> >+ <div id="target" style="position: absolute; width: 10px; height: 10px; background: red; top: 0;"></div> >+ </div> >+ <div style="width: 50px; height: 50px; background: green;"></div> <!-- Baseline is synthesized at the block-end edge. --> >+</div> >+<script> >+ document.body.offsetTop; >+ document.getElementById('target').style.top = '100px'; >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-grid-flex-abspos-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-grid-flex-abspos-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..04556d7f0dc631569feab549f660722287e70281 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-grid-flex-abspos-expected.txt >@@ -0,0 +1,18 @@ >+This crashed Chrome 84. >+Test >+Outer is a regular div. >+Test >+relpos element is a regular div, not flexbox. >+Test >+Relpos flexbox has a % height descendant. The height of the flexbox grid item is supposed to be definite, allowing the %height flex item to resolve. This fails in chrome because of https://crbug.com/1018439 >+Test >+ >+PASS .relpos 1 >+PASS .relpos 2 >+PASS .relpos 3 >+PASS .relpos 4 >+PASS .relpos 5 >+PASS .relpos 6 >+PASS .relpos 7 >+PASS .relpos 8 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-grid-flex-abspos.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-grid-flex-abspos.html >new file mode 100644 >index 0000000000000000000000000000000000000000..73318466f0e415dd3ce3c5959344590dcf53a8d7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-grid-flex-abspos.html >@@ -0,0 +1,82 @@ >+<!DOCTYPE html> >+<title>grid items and abspos flex children</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" /> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-overview" title="Note at bottom of this section: 'the size of a grid item which is stretched is also considered definite.'"> >+<link rel="bookmark" href="https://crbug.com/1091588" /> >+<link rel="bookmark" href="https://crbug.com/1018439" /> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<style> >+.grid { >+ display: grid; >+} >+ >+.flexbox { >+ display: flex; >+} >+ >+.relpos { >+ position: relative; >+} >+ >+.abspos { >+ position: absolute; >+ border: 1px solid; >+} >+ >+/* These are just for making the test look better. */ >+p { >+ margin: 0px; >+} >+p + div { >+ margin-bottom: 40px; >+} >+</style> >+ >+<p>This crashed Chrome 84.</p> >+<div class=grid> >+ <div class="relpos flexbox" data-expected-height=20> >+ <div class=abspos>Test</div> >+ <div style="height: 20px;"></div> >+ </div> >+</div> >+ >+<p>Outer is a regular div.</p> >+<div> >+ <div class="relpos flexbox" data-expected-height=20> >+ <div class=abspos>Test</div> >+ <div style="height: 20px;"></div> >+ </div> >+</div> >+ >+<p>relpos element is a regular div, not flexbox.</p> >+<div class=grid> >+ <div class="relpos" data-expected-height=20> >+ <div class=abspos>Test</div> >+ <div style="height: 20px;"></div> >+ </div> >+</div> >+ >+<p>Relpos flexbox has a % height descendant. The height of the flexbox grid item is supposed to be definite, allowing the %height flex item to resolve. >+ >+This fails in chrome because of https://crbug.com/1018439</p> >+<div class=grid> >+ <div class="relpos flexbox" data-expected-height=20> >+ <div class=abspos>Test</div> >+ <div style="height: 20px;"></div> >+ <div style="height: 50%" data-expected-height=10></div> >+ </div> >+</div> >+ >+<script> >+ checkLayout('.relpos'); >+ // Changing the abspos border shouldn't change the size of any inflow element. >+ for (abspos of document.querySelectorAll(".abspos")) { >+ abspos.style.borderWidth = "10px"; >+ } >+ checkLayout('.relpos'); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fieldset-as-item-overflow-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fieldset-as-item-overflow-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..94e64dd1b829f68a935679ee6c26659437b730a7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fieldset-as-item-overflow-expected.html >@@ -0,0 +1,6 @@ >+<!DOCTYPE html> >+<div style="width: 100px; height: 100px; border: solid;"> >+ <div style="overflow-y: scroll; max-height: 100%;"> >+ <div style="height: 200px; background: green;"></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fieldset-as-item-overflow.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fieldset-as-item-overflow.html >new file mode 100644 >index 0000000000000000000000000000000000000000..17bc82a0b51a7f76253e1ca9f75c9840abbd366f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fieldset-as-item-overflow.html >@@ -0,0 +1,9 @@ >+<!DOCTYPE html> >+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1149714"> >+<link rel="match" href="fieldset-as-item-overflow-ref.html"> >+<meta name="assert" content="A fieldset element when flex-shrink is applied has scrollable overflow."> >+<div style="display: flex; flex-direction: column; width: 100px; height: 100px; border: solid;"> >+ <fieldset style="margin: 0; border: none; padding: 0; overflow-y: scroll; overflow-x: hidden; flex-grow: 1;"> >+ <div style="height: 200px; background: green;"></div> >+ </fieldset> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-018-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-018-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-018-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-018.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-018.html >new file mode 100644 >index 0000000000000000000000000000000000000000..04b12875c05b6ba2e3871271ec365bfe1d7d345f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-018.html >@@ -0,0 +1,13 @@ >+<!DOCTYPE html> >+<title>SVG as flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> >+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths"> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> >+<meta name="assert" content="Flex base size of svg item with aspect ratio + no intrinsic width or height honors transferred max-width." /> >+ >+<p>Test passes if there is a filled green square.</p> >+ >+<div style="display: flex; flex-direction: column; align-items: flex-start; width: 200px;"> >+ <svg viewBox="0 0 1 1" style="max-width: 100px; background: green;"></svg> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html >new file mode 100644 >index 0000000000000000000000000000000000000000..e28829036052006620ae2d00478d12322ce3cdbc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html >@@ -0,0 +1,13 @@ >+<!DOCTYPE html> >+<title>SVG as flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> >+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths"> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> >+<meta name="assert" content="Flex base size of svg item with aspect ratio + no intrinsic width or height honors transferred max-height." /> >+ >+<p>Test passes if there is a filled green square.</p> >+ >+<div style="display: flex; align-items: flex-start; height: 200px;"> >+ <svg viewBox="0 0 1 1" style="max-height: 100px; background: green;"></svg> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-001-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..deff9a11bee41292f986953fdd21d9cef3562ff4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-001-expected.txt >@@ -0,0 +1,48 @@ >+Test1: "width: 100%" >+ >+ >+ >+ >+ >+ >+Test2: "width: calc(100%)" >+ >+ >+ >+ >+ >+ >+Test3: "width: calc(140px + 100%)" >+ >+ >+ >+ >+ >+ >+ >+PASS .flexbox 1 >+PASS .flexbox 2 >+PASS .flexbox 3 >+PASS .flexbox 4 >+PASS .flexbox 5 >+PASS .flexbox 6 >+PASS .flexbox 7 >+PASS .flexbox 8 >+PASS .flexbox 9 >+PASS .flexbox 10 >+FAIL .flexbox 11 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="text" class="test3" data-expected-width="140"> >+ </div> >+width expected 140 but got 100 >+FAIL .flexbox 12 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="range" class="test3" data-expected-width="140"> >+ </div> >+width expected 140 but got 100 >+PASS .flexbox 13 >+PASS .flexbox 14 >+PASS .flexbox 15 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..9725512cd8027b8b8fe4bd966f96db1b5242456e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-001.html >@@ -0,0 +1,149 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <meta charset="utf-8"> >+ <title>CSS Flexbox Test: Testing automatic minimun size of <input> flex items in a row flex container</title> >+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> >+ <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> >+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> >+ <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution"> >+ <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero"> >+ <link rel="stylesheet" href="/fonts/ahem.css"> >+ <meta name="assert" content="This test verifies that an <input> flex item should resolve its percentage part of main size to zero when computing specified size suggestion."> >+ >+ <script src="/resources/testharness.js"></script> >+ <script src="/resources/testharnessreport.js"></script> >+ <script src="/resources/check-layout-th.js"></script> >+ >+ <style> >+ .flexbox { >+ display: flex; >+ width: 300px; >+ height: 40px; >+ border: 1px solid black; >+ margin-bottom: 5px; >+ } >+ .spacer { >+ /* Just to occupy some space, so that the flex algorithm will try to shrink >+ the <input> element below its percentage specified width. */ >+ flex: 0 0 200px; >+ background: lightgray; >+ } >+ input { >+ font: 20px/1 Ahem; >+ background: lightblue; >+ /* Get rid of native theming and UA default styles. */ >+ appearance: none; >+ border: 0; >+ padding: 0; >+ margin: 0; >+ } >+ .test1 { >+ width: 100%; >+ } >+ .test2 { >+ width: calc(100%); >+ } >+ .test3 { >+ width: calc(140px + 100%); >+ } >+ </style> >+ >+ <body onload="checkLayout('.flexbox')"> >+ <p>Test1: "width: 100%"</p> >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="text" >+ class="test1" data-expected-width="100"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="range" >+ class="test1" data-expected-width="100"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="button" value="XXXXXXX" >+ class="test1" data-expected-width="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="submit" value="XXXXXXX" >+ class="test1" data-expected-width="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="reset" value="XXXXXXX" >+ class="test1" data-expected-width="140"> >+ </div> >+ >+ <p>Test2: "width: calc(100%)"</p> >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="text" >+ class="test2" data-expected-width="100"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="range" >+ class="test2" data-expected-width="100"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="button" value="XXXXXXX" >+ class="test2" data-expected-width="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="submit" value="XXXXXXX" >+ class="test2" data-expected-width="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="reset" value="XXXXXXX" >+ class="test2" data-expected-width="140"> >+ </div> >+ >+ <p>Test3: "width: calc(140px + 100%)"</p> >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="text" >+ class="test3" data-expected-width="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="range" >+ class="test3" data-expected-width="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="button" value="XXXXXXX" >+ class="test3" data-expected-width="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="submit" value="XXXXXXX" >+ class="test3" data-expected-width="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="reset" value="XXXXXXX" >+ class="test3" data-expected-width="140"> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-002-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..7878af77e63db365dfd6c7a0311a912ac579424d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-002-expected.txt >@@ -0,0 +1,93 @@ >+Test1: "height: 100%" >+ >+ >+ >+ >+ >+ >+Test2: "height: calc(100%)" >+ >+ >+ >+ >+ >+ >+Test3: "height: calc(140px + 100%)" >+ >+ >+ >+ >+ >+ >+ >+PASS .flexbox 1 >+PASS .flexbox 2 >+FAIL .flexbox 3 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="button" value="XXXXXXX" class="test1" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+FAIL .flexbox 4 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="submit" value="XXXXXXX" class="test1" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+FAIL .flexbox 5 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="reset" value="XXXXXXX" class="test1" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+PASS .flexbox 6 >+PASS .flexbox 7 >+FAIL .flexbox 8 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="button" value="XXXXXXX" class="test2" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+FAIL .flexbox 9 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="submit" value="XXXXXXX" class="test2" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+FAIL .flexbox 10 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="reset" value="XXXXXXX" class="test2" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+FAIL .flexbox 11 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="text" class="test3" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+FAIL .flexbox 12 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="range" class="test3" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+FAIL .flexbox 13 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="button" value="XXXXXXX" class="test3" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+FAIL .flexbox 14 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="submit" value="XXXXXXX" class="test3" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+FAIL .flexbox 15 assert_equals: >+<div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="reset" value="XXXXXXX" class="test3" data-expected-height="140"> >+ </div> >+height expected 140 but got 100 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d1a14b9bfe3cbb05f598dee987ccd41ec5d4013e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-002.html >@@ -0,0 +1,151 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <meta charset="utf-8"> >+ <title>CSS Flexbox Test: Testing automatic minimun size of <input> flex items in a column flex container</title> >+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> >+ <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> >+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> >+ <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution"> >+ <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero"> >+ <link rel="stylesheet" href="/fonts/ahem.css"> >+ <meta name="assert" content="This test verifies that an <input> flex item should resolve its percentage part of main size to zero when computing specified size suggestion."> >+ >+ <script src="/resources/testharness.js"></script> >+ <script src="/resources/testharnessreport.js"></script> >+ <script src="/resources/check-layout-th.js"></script> >+ >+ <style> >+ .flexbox { >+ display: inline-flex; >+ flex-direction: column; >+ width: 40px; >+ height: 300px; >+ border: 1px solid black; >+ margin-bottom: 40px; >+ } >+ .spacer { >+ /* Just to occupy some space, so that the flex algorithm will try to shrink >+ the <input> element below its percentage specified height. */ >+ flex: 0 0 200px; >+ background: lightgray; >+ } >+ input { >+ writing-mode: vertical-lr; >+ font: 20px/1 Ahem; >+ background: lightblue; >+ /* Get rid of native theming and UA default styles. */ >+ appearance: none; >+ border: 0; >+ padding: 0; >+ margin: 0; >+ } >+ .test1 { >+ height: 100%; >+ } >+ .test2 { >+ height: calc(100%); >+ } >+ .test3 { >+ height: calc(140px + 100%); >+ } >+ </style> >+ >+ <body onload="checkLayout('.flexbox')"> >+ <p>Test1: "height: 100%"</p> >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="text" >+ class="test1" data-expected-height="100"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="range" >+ class="test1" data-expected-height="100"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="button" value="XXXXXXX" >+ class="test1" data-expected-height="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="submit" value="XXXXXXX" >+ class="test1" data-expected-height="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="reset" value="XXXXXXX" >+ class="test1" data-expected-height="140"> >+ </div> >+ >+ <p>Test2: "height: calc(100%)"</p> >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="text" >+ class="test2" data-expected-height="100"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="range" >+ class="test2" data-expected-height="100"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="button" value="XXXXXXX" >+ class="test2" data-expected-height="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="submit" value="XXXXXXX" >+ class="test2" data-expected-height="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="reset" value="XXXXXXX" >+ class="test2" data-expected-height="140"> >+ </div> >+ >+ <p>Test3: "height: calc(140px + 100%)"</p> >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="text" >+ class="test3" data-expected-height="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="range" >+ class="test3" data-expected-height="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="button" value="XXXXXXX" >+ class="test3" data-expected-height="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="submit" value="XXXXXXX" >+ class="test3" data-expected-height="140"> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="spacer"></div> >+ <input type="reset" value="XXXXXXX" >+ class="test3" data-expected-height="140"> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-size-layout-001-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-size-layout-001-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-size-layout-001-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-size-layout-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-size-layout-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..fde2a311268737f7cbf749b92f50ea5e7546c463 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-size-layout-001.html >@@ -0,0 +1,49 @@ >+<!doctype html> >+<html class=reftest-wait> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href=""> >+<meta name="assert" content="Flex items with contain: layout size are sized properly."> >+<link rel="bookmark" href="https://crbug.com/1108675"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<style> >+#flex { >+ display: flex; >+ width: 100px; >+ height: 100px; >+} >+#grid { >+ background-color: green; >+ display: grid; >+ flex: 1; >+ contain: layout size; >+} >+.item { >+ height: 50px; >+ width: 50px; >+} >+#reference-overlapped-red { >+ position: absolute; >+ background-color: red; >+ width: 100px; >+ height: 100px; >+ z-index: -1; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div id="reference-overlapped-red"></div> >+ >+<div id="flex"> >+ <div id="grid" data-expected-height=100 data-expected-width=100> >+ <div class="item"></div> >+ </div> >+</div> >+ >+<script> >+ document.body.offsetTop; >+ let item = document.querySelector(".item"); >+ let cloned = item.cloneNode(true); >+ let parent = item.parentElement; >+ parent.appendChild(cloned); >+ document.documentElement.classList.remove("reftest-wait"); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-vertical-align-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-vertical-align-expected.html >index f3c82c9e3ecb1cb68945e3642c4eb43a2f7ba046..82d7a6ea317dc33c00c5e36f0276496f3fcb0710 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-vertical-align-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-vertical-align-expected.html >@@ -1,5 +1,5 @@ > <!DOCTYPE html> >-<link href="support/flexbox.css" rel="stylesheet"> >+<link href="../support/flexbox.css" rel="stylesheet"> > > <style> > .flexbox { >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-005.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-005.xht >index 795dda5713b4f3358846a9f725c8653182c20fee..b180d8d47ae3973b84440ed9db1e750fde83977a 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-005.xht >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-005.xht >@@ -5,7 +5,7 @@ > <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> > <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> > <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> >- <meta name="assert" content="Checks that minimum height for flex items is the specified size, as the min-content size of the image corresponds to that." /> >+ <meta name="assert" content="Checks that automatic minimum height for flex items is the specified size suggestion, when that is the smallest of the available suggestions." /> > <style type="text/css"><![CDATA[ > #reference-overlapped-red { > position: absolute; >@@ -32,7 +32,7 @@ > > <div id="reference-overlapped-red"></div> > <div id="constrained-flex"> >- <img id="test-flex-item-overlapping-green" src="support/60x60-green.png" /> >+ <img id="test-flex-item-overlapping-green" src="support/200x200-green.png" /> > </div> > </body> > </html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-007.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-007.xht >index e0e612627482d576acb6dd0857cc9f78f7cfa9e4..790ecb9141e40ecd583d0541cabb52939d5cfa37 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-007.xht >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-007.xht >@@ -29,6 +29,9 @@ > </head> > <body> > <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <!-- flex base size = 100 due to part B. For automatic minimum size: >+ transferred size suggestion = 100, content size suggestion = 100. >+ --> > > <div id="reference-overlapped-red"></div> > <div id="constrained-flex"> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-013.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-013.html >index 9989b6463780fad120724ab52998353958650c81..a039c4ac5f4e21e3b54476b644ca9129f8e5f046 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-013.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-013.html >@@ -29,7 +29,6 @@ > .tall { > width: 50px; > height: 100px; >- background: green; > } > </style> > <body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-025-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-025-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..7b01e31524c3afa791473dc991c2bf0066102446 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-025-expected.txt >@@ -0,0 +1,24 @@ >+ >+FAIL .outer-column-flexbox > div 1 assert_equals: >+<div style="flex-basis: 100px; height: 200px;" data-expected-height="100"> >+ <div style="height: 100%; background: green;" data-expected-height="100"></div> >+ </div> >+height expected 100 but got 200 >+PASS .outer-column-flexbox > div 2 >+FAIL .outer-column-flexbox > div 3 assert_equals: >+<div style="flex-basis: 100px; height: 200px;" data-expected-height="100"> >+ <div style="display: grid; height: 100%; background: green" data-expected-height="100"></div> >+ </div> >+height expected 100 but got 200 >+FAIL .outer-column-flexbox > div 4 assert_equals: >+<div style="flex-basis: 100px; height: 200px;" data-expected-height="100"> >+ <table data-expected-height="100" style="height: 100%; width: 100%; background: green"> >+ <tbody><tr><td> >+ <div style="height: 50px;"></div> >+ </td> >+ </tr></tbody></table> >+ </div> >+height expected 100 but got 200 >+Test passes if there is a sequence of filled green squares. >+ >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-025.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-025.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2c1f6fa64c6711b5c4c6dd32d5e2055ff6e47689 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-025.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> >+<link rel="bookmark" href="https://crbug.com/1033476"> >+<meta name="assert" content="Column flex item's height does not influence its min-height content size suggestion in a varitey of scenarios."> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<style> >+.outer-column-flexbox { >+ display: flex; >+ flex-direction: column; >+ width: 100px; >+ margin-bottom: 10px; /* Just for visually spacing things out */ >+} >+</style> >+ >+<body onload="checkLayout('.outer-column-flexbox > div');"> >+ >+<div id=log></div> >+ >+<p>Test passes if there is a sequence of filled green squares.</p> >+ >+<!-- %height of descendant is not resolved against specified height for purposes of min-content sizing. --> >+<div class=outer-column-flexbox> >+ <div style="flex-basis: 100px; height: 200px;" data-expected-height=100> >+ <div style="height: 100%; background: green;" data-expected-height=100></div> >+ </div> >+</div> >+ >+<!-- Same as above, but with an orthogonal writing mode flex item. --> >+<div class=outer-column-flexbox> >+ <div style="flex-basis: 100px; height: 200px; width: 100px; writing-mode: vertical-rl;" data-expected-height=100> >+ <div style="height: 100%; background: green;" data-expected-height=100></div> >+ </div> >+</div> >+ >+<!-- Same as #1 but with a grid child of the flex item. --> >+<div class=outer-column-flexbox> >+ <div style="flex-basis: 100px; height: 200px;" data-expected-height=100> >+ <div style="display: grid; height: 100%; background: green" data-expected-height=100></div> >+ </div> >+</div> >+ >+<!-- Same as #1 but with a table child of the flex item that has a >0 intrinsic block size. --> >+<div class=outer-column-flexbox> >+ <div style="flex-basis: 100px; height: 200px;" data-expected-height=100> >+ <table data-expected-height=100 style="height: 100%; width: 100%; background: green"> >+ <td> >+ <div style="height: 50px;"></div> >+ </td> >+ </table> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026.html >new file mode 100644 >index 0000000000000000000000000000000000000000..9f46c953c4a8396c7dcb58012b16235c0b9e5377 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026.html >@@ -0,0 +1,16 @@ >+<!DOCTYPE html> >+<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> >+<meta name="assert" content="Child in nested column flexbox's grows to its parent's flex height, not its parent's specified height."> >+<link href="support/flexbox.css" rel="stylesheet"> >+ >+<p>Test passes if there is a filled green square.</p> >+ >+<div class="flexbox column" style="height: 100px;"> >+ <!-- min-height: auto resolves to 0 because content-size suggestion is 0. --> >+ <div class="flexbox column" style="flex: 1 0 0px; height: 200px"> >+ <!-- min-height: auto resolves to 0 because content-size suggestion is 0. --> >+ <div style="flex: 1 0 0px; width: 100px; background: green;"></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-027-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-027-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-027-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-027.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-027.html >new file mode 100644 >index 0000000000000000000000000000000000000000..052ff6a5bd89c56b51d76a1782ac87d1a9d1e2c3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-027.html >@@ -0,0 +1,34 @@ >+<!DOCTYPE html> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> >+<meta name="assert" content="Nested flex item shrinks correctly when its parent has a % height that resolves to smaller than the item's flex-basis." /> >+<p>Test passes if there is a filled green square.</p> >+ >+<style> >+.OuterFlexbox { >+ display: flex; >+ flex-direction: column; >+ height: 100px; >+ width: 100px; >+} >+ >+.InnerFlexbox { >+ display: flex; >+ flex-direction: column; >+ height: 100%; >+} >+ >+.InnerFlexbox-body { >+ background: green; >+ min-height: 0; >+} >+</style> >+ >+<div class="OuterFlexbox"> >+ <div class="InnerFlexbox"> >+ <div class="InnerFlexbox-body"> >+ <div style="height: 200px;"> >+ </div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-028-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-028-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-028-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-028.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-028.html >new file mode 100644 >index 0000000000000000000000000000000000000000..45cf76837d345b8e84daec72462f8ae8c42f19b5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-028.html >@@ -0,0 +1,14 @@ >+<!DOCTYPE html> >+<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> >+<meta name="assert" content="Intermediate column flex item's specified min-height is honored."> >+<link href="support/flexbox.css" rel="stylesheet"> >+ >+<p>Test passes if there is a filled green square.</p> >+ >+<div class="flexbox column"> >+ <div class="flexbox column" style="flex: 1 0 0px; min-height: 100px"> >+ <div style="flex: 1 0 0px; width: 100px; background: green;"></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029.html >new file mode 100644 >index 0000000000000000000000000000000000000000..62b77b92fc91f206d96b6208d65bfb3bd524088f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029.html >@@ -0,0 +1,22 @@ >+<!DOCTYPE html> >+<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> >+<meta name="assert" content="Inner column flexbox doesn't wrap its items because its min-size reported to the outer flexbox accommated the sum of the items' intrinsic block sizes."> >+ >+<p>Test passes if there is a filled green square.</p> >+ >+<div style="display: flex; flex-direction: column;"> >+ <!-- min-height is min(100, 500) = 100 --> >+ <!-- Final height is 100px. --> >+ <div style="display: flex; flex-direction: column; flex-wrap: wrap; flex: 1 0 0px; height: 500px"> >+ <!-- min-height is 50 --> >+ <div style="flex: 1 0 0px; width: 100px; background: green;"> >+ <div style="height: 50px;"></div> >+ </div> >+ <!-- min-height is 50 --> >+ <div style="flex: 1 0 0px; width: 100px; background: green;"> >+ <div style="height: 50px;"></div> >+ </div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-030-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-030-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-030-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-030.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-030.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a3dc56e59e433e64a6f024c5d9ea8264cb658210 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-030.html >@@ -0,0 +1,23 @@ >+<!DOCTYPE html> >+<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property" /> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> >+<meta name="assert" content="Inner column flexbox wraps its items when they don't fit in the vertical available space."> >+ >+<p>Test passes if there is a filled green square.</p> >+ >+<div style="display: flex; flex-direction: column; width: 100px;"> >+ <!-- min-height is min(200, 70) = 70 --> >+ <!-- Final height is 70px. Items each have height 100px. They won't both fit, so they need to be wrapped. --> >+ <div style="display: flex; flex-direction: column; flex-wrap: wrap; flex: 1 0 0px; height: 70px"> >+ <!-- min-height is 100 --> >+ <div style="flex: 1 0 0px; width: 50px; background: green;"> >+ <div style="height: 100px;"></div> >+ </div> >+ <!-- min-height is 100 --> >+ <div style="flex: 1 0 0px; width: 50px; background: green;"> >+ <div style="height: 100px;"></div> >+ </div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-size-003-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-size-003-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..d1fa4df1f1d6bcbe4f496f5941d6a9ece3cce718 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-size-003-expected.txt >@@ -0,0 +1,5 @@ >+ >+PASS img 1 >+PASS img 2 >+ >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-size-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-size-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..95d9e37d0bdcccbc3f418dc007948425577396f2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-size-003.html >@@ -0,0 +1,23 @@ >+<!doctype html> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> >+<link rel="help" href="https://crbug.com/1151608"> >+<meta name="assert" content="automatic minimum size computation doesn't overflow when multiplying by the aspect ratio" /> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<body onload="checkLayout('img')"> >+ >+<div id=log></div> >+ >+<div style="display: flex; width: 300px;"> >+ <img src="data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='8000' height='8000' xmlns='http://www.w3.org/2000/svg' %3E%3C/svg%3E" data-expected-width=8000 style="height: 8000px;"> >+</div> >+ >+<div style="display: flex; flex-direction: column; height: 300px;"> >+ <img src="data:image/svg+xml,%3Csvg viewBox='0 0 1 1' width='8000' height='8000' xmlns='http://www.w3.org/2000/svg' %3E%3C/svg%3E" data-expected-height=8000 style="width: 8000px;"> >+</div> >+ >+</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-005.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-005.xht >index 109cc96865b8749acced0393e098af5b199e9ecc..486b6959974c251331dd5c75b1b834fd301ecd00 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-005.xht >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-005.xht >@@ -5,7 +5,7 @@ > <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> > <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" /> > <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> >- <meta name="assert" content="Checks that minimum width for flex items is the specified size, as the min-content size of the image corresponds to that." /> >+ <meta name="assert" content="Checks that automatic minimum width for flex items is the specified size suggestion, when that is the smallest of the available suggestions." /> > <style type="text/css"><![CDATA[ > #reference-overlapped-red { > position: absolute; >@@ -30,7 +30,7 @@ > > <div id="reference-overlapped-red"></div> > <div id="constrained-flex"> >- <img id="test-flex-item-overlapping-green" src="support/60x60-green.png" /> >+ <img id="test-flex-item-overlapping-green" src="support/200x200-green.png" /> > </div> > </body> > </html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-013.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-013.html >index 6ee9ed10b5663b381f0238096117e8d70ca0347b..9f358d66d7f1b5c4ba2e3c6d9ca790b5309d66d4 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-013.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-013.html >@@ -2,8 +2,9 @@ > <title>Flex transferred minimum width</title> > <link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> > <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> >+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5663" /> > <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> >-<meta name="assert" content="min-width: auto ignores transferred size suggestion when item has a definite main size"> >+<meta name="assert" content="min-width: auto ignores transferred size suggestion when item has a definite specified main size"> > > <style> > #reference-overlapped-red { >@@ -19,13 +20,16 @@ > > <div id="reference-overlapped-red"></div> > <div style="width:100px; height: 75px; background: green;"></div> >-<div style="display: flex; width: 0px"> >+<div style="display: flex; width: 0px; height: 25px;"> > <!-- >- content size suggestion is 300px. >- specified size suggestion is 100px. >- transferred size suggestion is 50px, but that is ignored because there is a >- specified size. The ignoring is from the spec text that says, >- (capitalization added): >+ content size suggestion is 300px >+ specified size suggestion is 100px >+ >+ Chrome 87 and Firefox 84a1 disagree about transferred size suggestion here >+ (Chrome says undefined. Firefox says 300/150 * 25 = 50. See spec issue >+ above.) but it doesn't matter: this test asserts that the transferred size >+ suggestion is ignored, because of this from the spec (capitalization >+ added): > > In general, the content-based minimum size of a flex item is the smaller of > its content size suggestion and its specified size suggestion. However, if >@@ -35,5 +39,5 @@ > > So here the content-based minimum size is min(300, 100) = 100. > --> >- <img src="support/300x150-green.png" style="height: 25px; width: 100px;"> >+ <img src="support/300x150-green.png" style="width: 100px;"> > </div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d4020fe75e3ee1e52b07576132f8db2f880ebfcd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015.html >@@ -0,0 +1,15 @@ >+<!doctype html> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org" /> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes" /> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> >+<meta name="assert" content="Column flexbox's imposed definite size on row flexbox is honored when resolving percentages in automatic minimum size algorithm."> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div style="display: flex; flex-direction: column; width: 100px; height: 444px;"> >+ <div style="flex-basis: 100px; display: flex; min-height: 0px;"> >+ <!-- min-width is min-height transferred through the aspect ratio: 1 x 100% x 100px = 100px --> >+ <img src="support/200x200-green.png" style="min-height: 100%;"> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-016-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-016-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-016-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-016.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-016.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a3f4eb4a85cebf937e5568f7431358af71e388e3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-016.html >@@ -0,0 +1,13 @@ >+<!DOCTYPE html> >+<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> >+<meta name="assert" content="Height of flex item in row flexbox is not ignored when resolving percentages of its descendants to determine content based minimum size suggestion."> >+ >+<p>Test passes if there is a filled green square.</p> >+ >+<div style="display: flex; width: 0px; height: 20px;"> >+ <div style="flex-basis: 50px; height: 100px;"> >+ <img src="support/200x200-green.png" style="height: 100%"> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-items-center-nested-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-items-center-nested-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2473417b82b333e93baf1889f0fb229211591e2f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-items-center-nested-001-expected.html >@@ -0,0 +1,16 @@ >+<!doctype html> >+<title>CSS Test Reference</title> >+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez"> >+<style> >+html, body { margin: 0; padding: 0; } >+ >+.content { >+ margin-top: 100px; >+ width: 200px; >+ height: 200px; >+ background: blue; >+} >+</style> >+<body> >+ <div class="content"></div> >+</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-items-center-nested-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-items-center-nested-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b6e2fdff0aaffc2df8187389183cd170bf6fb301 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-items-center-nested-001.html >@@ -0,0 +1,47 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test: Flexbox nested containers with align-items: center and flexible items</title> >+<link rel="match" href="flexbox-align-items-center-nested-001-ref.html"> >+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property"> >+<style> >+html, body { margin: 0; padding: 0; } >+body { >+ height: 400px; >+ position: relative; >+} >+ >+.container-0 { >+ display: flex; >+ position: absolute; >+ height: 100%; >+ flex-direction: column; >+} >+ >+.container-1 { >+ flex: 1 0 auto; >+ display: flex; >+ align-items: center; >+} >+ >+.container-2 { >+ height: 100%; >+ display: flex; >+ align-items: center; >+} >+ >+.content { >+ width: 200px; >+ height: 200px; >+ background: blue; >+} >+</style> >+<body> >+ <div class="container-0"> >+ <div class="container-1"> >+ <div class="container-2"> >+ <div class="content"></div> >+ </div> >+ </div> >+ </div> >+</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..e5efb756093f8d26d445cc957ce7b2e4da8dd277 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a-expected.xhtml >@@ -0,0 +1,73 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for behavior of the 'baseline' value for align-items and >+ align-self. >+ >+ NOTE: For multi-line 'display: block' elements in the testcase (and inline >+ content that gets wrapped in an anonymous block), we add an inline-table >+ wrapper here in the reference case, so that we get first-line baseline >+ alignment instead of the last-line baseline-alignment that an inline-block >+ would give us. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ display: block; >+ border: 1px dashed blue; >+ font: 14px sans-serif; >+ } >+ >+ div { display: inline-block; } >+ table { display: inline-table; } >+ >+ .big { >+ height: 100px; >+ font: 24px sans-serif; >+ margin-top: 20px; >+ } >+ .super { >+ vertical-align: super; >+ font-size: 12px; >+ } >+ .sub { >+ vertical-align: sub; >+ font-size: 12px; >+ } >+ >+ .lime { background: lime; } >+ .yellow { background: yellow; } >+ .orange { background: orange; } >+ .pink { background: pink; } >+ .aqua { background: aqua; } >+ .tan { background: tan; } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="lime">blk_1line</div >+ ><table cellspacing="0" cellpadding="0" >+ class="yellow">blk<br/>2lines</table >+ ><div class="orange"><span class="super">super</span></div >+ ><div class="pink"><span class="sub">sub</span></div >+ ><table cellspacing="0" cellpadding="0" >+ class="aqua big">big<br/>text<br/>3lines</table >+ ><table class="tan" cellspacing="0" cellpadding="0"> >+ <i>ital<br/>ic</i> >+ </table> >+ </div> >+ <div class="flexbox"> >+ <div class="lime">blk_1line</div >+ ><div class="yellow">blk<br/>2lines</div >+ ><div class="orange"><span class="super">super</span></div >+ ><div class="pink"><span class="sub">sub</span></div >+ ><div class="aqua big">big<br/>text<br/>3lines</div >+ ><div class="tan"><i>ital<br/>ic</i></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..0460f4162f5f424b4693c19cab688f5b5db16fa3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml >@@ -0,0 +1,70 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for behavior of the 'baseline' value for align-items (and >+ align-self, implicitly). This test baseline-aligns various types of >+ content, and the flexbox's vertical size depends on the aggregate >+ post-alignment height of its children. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> >+ <link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/> >+ <style> >+ .flexbox { >+ display: flex; >+ border: 1px dashed blue; >+ font: 14px sans-serif; >+ } >+ .base { >+ align-items: baseline; >+ } >+ .lastbase { >+ align-items: last baseline; >+ } >+ >+ .big { >+ height: 100px; >+ font: 24px sans-serif; >+ margin-top: 20px; >+ } >+ .super { >+ vertical-align: super; >+ font-size: 12px; >+ } >+ .sub { >+ vertical-align: sub; >+ font-size: 12px; >+ } >+ >+ .lime { background: lime; } >+ .yellow { background: yellow; } >+ .orange { background: orange; } >+ .pink { background: pink; } >+ .aqua { background: aqua; } >+ .tan { background: tan; } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox base"> >+ <div class="lime">blk_1line</div> >+ <div class="yellow">blk<br/>2lines</div> >+ <div class="orange"><span class="super">super</span></div> >+ <div class="pink"><span class="sub">sub</span></div> >+ <div class="aqua big">big<br/>text<br/>3lines</div> >+ <i class="tan">ital<br/>ic</i> >+ </div> >+ <div class="flexbox lastbase"> >+ <div class="lime">blk_1line</div> >+ <div class="yellow">blk<br/>2lines</div> >+ <div class="orange"><span class="super">super</span></div> >+ <div class="pink"><span class="sub">sub</span></div> >+ <div class="aqua big">big<br/>text<br/>3lines</div> >+ <i class="tan">ital<br/>ic</i> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..e5efb756093f8d26d445cc957ce7b2e4da8dd277 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b-expected.xhtml >@@ -0,0 +1,73 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for behavior of the 'baseline' value for align-items and >+ align-self. >+ >+ NOTE: For multi-line 'display: block' elements in the testcase (and inline >+ content that gets wrapped in an anonymous block), we add an inline-table >+ wrapper here in the reference case, so that we get first-line baseline >+ alignment instead of the last-line baseline-alignment that an inline-block >+ would give us. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ display: block; >+ border: 1px dashed blue; >+ font: 14px sans-serif; >+ } >+ >+ div { display: inline-block; } >+ table { display: inline-table; } >+ >+ .big { >+ height: 100px; >+ font: 24px sans-serif; >+ margin-top: 20px; >+ } >+ .super { >+ vertical-align: super; >+ font-size: 12px; >+ } >+ .sub { >+ vertical-align: sub; >+ font-size: 12px; >+ } >+ >+ .lime { background: lime; } >+ .yellow { background: yellow; } >+ .orange { background: orange; } >+ .pink { background: pink; } >+ .aqua { background: aqua; } >+ .tan { background: tan; } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="lime">blk_1line</div >+ ><table cellspacing="0" cellpadding="0" >+ class="yellow">blk<br/>2lines</table >+ ><div class="orange"><span class="super">super</span></div >+ ><div class="pink"><span class="sub">sub</span></div >+ ><table cellspacing="0" cellpadding="0" >+ class="aqua big">big<br/>text<br/>3lines</table >+ ><table class="tan" cellspacing="0" cellpadding="0"> >+ <i>ital<br/>ic</i> >+ </table> >+ </div> >+ <div class="flexbox"> >+ <div class="lime">blk_1line</div >+ ><div class="yellow">blk<br/>2lines</div >+ ><div class="orange"><span class="super">super</span></div >+ ><div class="pink"><span class="sub">sub</span></div >+ ><div class="aqua big">big<br/>text<br/>3lines</div >+ ><div class="tan"><i>ital<br/>ic</i></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..3a656e41e94041274f0e763a1b11789e886da419 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml >@@ -0,0 +1,73 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for behavior of the 'baseline' value for align-items (and >+ align-self, implicitly). This test baseline-aligns various types of >+ content, and the flexbox's vertical size depends on the aggregate >+ post-alignment height of its children. This test also uses >+ "flex-wrap: wrap-reverse" to make the cross-axis bottom-to-top instead >+ of top-to-bottom. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a wrap-reverse flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> >+ <link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/> >+ <style> >+ .flexbox { >+ display: flex; >+ flex-wrap: wrap-reverse; >+ border: 1px dashed blue; >+ font: 14px sans-serif; >+ } >+ .base { >+ align-items: baseline; >+ } >+ .lastbase { >+ align-items: last baseline; >+ } >+ >+ .big { >+ height: 100px; >+ font: 24px sans-serif; >+ margin-top: 20px; >+ } >+ .super { >+ vertical-align: super; >+ font-size: 12px; >+ } >+ .sub { >+ vertical-align: sub; >+ font-size: 12px; >+ } >+ >+ .lime { background: lime; } >+ .yellow { background: yellow; } >+ .orange { background: orange; } >+ .pink { background: pink; } >+ .aqua { background: aqua; } >+ .tan { background: tan; } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox base"> >+ <div class="lime">blk_1line</div> >+ <div class="yellow">blk<br/>2lines</div> >+ <div class="orange"><span class="super">super</span></div> >+ <div class="pink"><span class="sub">sub</span></div> >+ <div class="aqua big">big<br/>text<br/>3lines</div> >+ <i class="tan">ital<br/>ic</i> >+ </div> >+ <div class="flexbox lastbase"> >+ <div class="lime">blk_1line</div> >+ <div class="yellow">blk<br/>2lines</div> >+ <div class="orange"><span class="super">super</span></div> >+ <div class="pink"><span class="sub">sub</span></div> >+ <div class="aqua big">big<br/>text<br/>3lines</div> >+ <i class="tan">ital<br/>ic</i> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..7cfded59991cd7da9d09bee267d4954202dc8712 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002-expected.xhtml >@@ -0,0 +1,82 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ width: 40px; >+ height: 40px; >+ border: 1px solid gray; >+ margin: 5px; /* just for visual separation */ >+ float: left; >+ } >+ >+ .flexbox > * { >+ background: yellow; >+ border: 1px solid black; >+ height: 20px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- ZEROTH ROW: NO MARGINS --> >+ <!-- No margins on flex item: --> >+ <div class="flexbox"> >+ <div>a</div> >+ </div> >+ >+ >+ <!-- FIRST ROW: SETTING MARGIN-TOP: --> >+ <br style="clear: both"/> >+ >+ <!-- auto: --> >+ <div class="flexbox"> >+ <div style="margin-top: 18px">a</div> >+ </div> >+ >+ <!-- Negative: --> >+ <div class="flexbox"> >+ <div style="margin-top: -4px">a</div> >+ </div> >+ >+ <!-- Small: --> >+ <div class="flexbox"> >+ <div style="margin-top: 4px">a</div> >+ </div> >+ >+ <!-- Large (pushing us out of container): --> >+ <div class="flexbox"> >+ <div style="margin-top: 25px">a</div> >+ </div> >+ >+ >+ <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> >+ <br style="clear: both"/> >+ >+ <!-- auto: --> >+ <div class="flexbox"> >+ <div>a</div> >+ </div> >+ >+ <!-- Negative: --> >+ <div class="flexbox"> >+ <div>a</div> >+ </div> >+ >+ <!-- Small: --> >+ <div class="flexbox"> >+ <div>a</div> >+ </div> >+ >+ <!-- Large: --> >+ <div class="flexbox"> >+ <div>a</div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..8aa364ec51a4ea9dd1232a7fb0519cdbc225ccc8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml >@@ -0,0 +1,90 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how a baseline-aligned flex item's position is impacted by >+ cross-axis margins, in a fixed-size flex container. >+ --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> >+ <link rel="match" href="flexbox-align-self-baseline-horiz-002-ref.xhtml"/> >+ <style> >+ .flexbox { >+ display: flex; >+ align-items: baseline; >+ width: 40px; >+ height: 40px; >+ border: 1px solid gray; >+ margin: 5px; /* just for visual separation */ >+ float: left; >+ } >+ >+ .flexbox > * { >+ background: yellow; >+ border: 1px solid black; >+ height: 20px; >+ flex: 1; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- ZEROTH ROW: NO MARGINS --> >+ <!-- No margins on flex item: --> >+ <div class="flexbox"> >+ <div>a</div> >+ </div> >+ >+ >+ <!-- FIRST ROW: SETTING MARGIN-TOP: --> >+ <br style="clear: both"/> >+ >+ <!-- auto: --> >+ <div class="flexbox"> >+ <div style="margin-top: auto">a</div> >+ </div> >+ >+ <!-- Negative: --> >+ <div class="flexbox"> >+ <div style="margin-top: -4px">a</div> >+ </div> >+ >+ <!-- Small: --> >+ <div class="flexbox"> >+ <div style="margin-top: 4px">a</div> >+ </div> >+ >+ <!-- Large (pushing us out of container): --> >+ <div class="flexbox"> >+ <div style="margin-top: 25px">a</div> >+ </div> >+ >+ >+ <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> >+ <br style="clear: both"/> >+ >+ <!-- auto: --> >+ <div class="flexbox"> >+ <div style="margin-bottom: auto">a</div> >+ </div> >+ >+ <!-- Negative: --> >+ <div class="flexbox"> >+ <div style="margin-bottom: -4px">a</div> >+ </div> >+ >+ <!-- Small: --> >+ <div class="flexbox"> >+ <div style="margin-bottom: 4px">a</div> >+ </div> >+ >+ <!-- Large: --> >+ <div class="flexbox"> >+ <div style="margin-bottom: 25px">a</div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..6e941360fb1e62075baa6c3058362c126dd2d6ab >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003-expected.xhtml >@@ -0,0 +1,82 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ width: 40px; >+ height: 40px; >+ border: 1px solid gray; >+ margin: 5px; /* just for visual separation */ >+ float: left; >+ } >+ >+ .flexbox > * { >+ background: yellow; >+ border: 1px solid black; >+ height: 20px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- ZEROTH ROW: NO MARGINS --> >+ <!-- No margins on flex item: --> >+ <div class="flexbox"> >+ <div style="margin-top: 18px">a</div> >+ </div> >+ >+ >+ <!-- FIRST ROW: SETTING MARGIN-TOP: --> >+ <br style="clear: both"/> >+ >+ <!-- auto: --> >+ <div class="flexbox"> >+ <div style="margin-top: 18px">a</div> >+ </div> >+ >+ <!-- Negative: --> >+ <div class="flexbox"> >+ <div style="margin-top: 18px">a</div> >+ </div> >+ >+ <!-- Small: --> >+ <div class="flexbox"> >+ <div style="margin-top: 18px">a</div> >+ </div> >+ >+ <!-- Large (pushing us out of container): --> >+ <div class="flexbox"> >+ <div style="margin-top: 18px">a</div> >+ </div> >+ >+ >+ <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> >+ <br style="clear: both"/> >+ >+ <!-- auto: --> >+ <div class="flexbox"> >+ <div>a</div> >+ </div> >+ >+ <!-- Negative: --> >+ <div class="flexbox"> >+ <div style="margin-top: 22px">a</div> >+ </div> >+ >+ <!-- Small: --> >+ <div class="flexbox"> >+ <div style="margin-top: 14px">a</div> >+ </div> >+ >+ <!-- Large: --> >+ <div class="flexbox"> >+ <div style="margin-top: -7px">a</div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..0b8e8499c3ff10498eed8bf6a9e791472e4c43d4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml >@@ -0,0 +1,92 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how a baseline-aligned flex item's position is impacted by >+ cross-axis margins, in a fixed-size flex container with the cross axis >+ reversed via "flex-wrap: wrap-reverse". >+ --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> >+ <link rel="match" href="flexbox-align-self-baseline-horiz-003-ref.xhtml"/> >+ <style> >+ .flexbox { >+ display: flex; >+ align-items: baseline; >+ flex-wrap: wrap-reverse; /* Just to flip cross-axis */ >+ width: 40px; >+ height: 40px; >+ border: 1px solid gray; >+ margin: 5px; /* just for visual separation */ >+ float: left; >+ } >+ >+ .flexbox > * { >+ background: yellow; >+ border: 1px solid black; >+ height: 20px; >+ flex: 1; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- ZEROTH ROW: NO MARGINS --> >+ <!-- No margins on flex item: --> >+ <div class="flexbox"> >+ <div>a</div> >+ </div> >+ >+ >+ <!-- FIRST ROW: SETTING MARGIN-TOP: --> >+ <br style="clear: both"/> >+ >+ <!-- auto: --> >+ <div class="flexbox"> >+ <div style="margin-top: auto">a</div> >+ </div> >+ >+ <!-- Negative: --> >+ <div class="flexbox"> >+ <div style="margin-top: -4px">a</div> >+ </div> >+ >+ <!-- Small: --> >+ <div class="flexbox"> >+ <div style="margin-top: 4px">a</div> >+ </div> >+ >+ <!-- Large (pushing us out of container): --> >+ <div class="flexbox"> >+ <div style="margin-top: 25px">a</div> >+ </div> >+ >+ >+ <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> >+ <br style="clear: both"/> >+ >+ <!-- auto: --> >+ <div class="flexbox"> >+ <div style="margin-bottom: auto">a</div> >+ </div> >+ >+ <!-- Negative: --> >+ <div class="flexbox"> >+ <div style="margin-bottom: -4px">a</div> >+ </div> >+ >+ <!-- Small: --> >+ <div class="flexbox"> >+ <div style="margin-bottom: 4px">a</div> >+ </div> >+ >+ <!-- Large: --> >+ <div class="flexbox"> >+ <div style="margin-bottom: 25px">a</div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..73a31237552c988af781b2c4154296c25a8a53e8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004-expected.xhtml >@@ -0,0 +1,56 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for behavior of the 'baseline' value for align-items and >+ align-self, in a multi-line flex container. >+ >+ This reference case just consists of three single-line flex containers, >+ to match the testcase's one flex container with three flex lines. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ display: flex; >+ align-items: baseline; >+ width: 90px; >+ } >+ >+ .flexbox > * { >+ width: 28px; >+ background: yellow; >+ border: 1px solid black; >+ } >+ >+ .big { font: 24px sans-serif; } >+ .medium { font: 14px sans-serif; } >+ .small { font: 8px sans-serif; } >+ >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <!-- First flex line: Just 3 different sizes of text --> >+ <div class="big">a</div> >+ <div class="small">b</div> >+ <div class="medium">c</div> >+ </div> >+ <div class="flexbox"> >+ <!-- Second flex line: different margin/padding amounts on each item, >+ and one non-baseline-aligned item.--> >+ <div class="medium" style="padding-top: 10px">d</div> >+ <div class="medium" style="margin-bottom: 8px">e</div> >+ <div class="medium" style="align-self: stretch">f</div> >+ </div> >+ <div class="flexbox"> >+ <!-- Third flex line: other margin/padding amounts on each item --> >+ <div class="small" style="margin-top: 20px">g</div> >+ <div class="big">h</div> >+ <div class="medium" style="padding-bottom: 6px">i</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..14fbf4bc6e7c674ccb8b2ff4b41e85e8fcb7e6b2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml >@@ -0,0 +1,56 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for behavior of the 'baseline' value for align-items (and >+ align-self, implicitly), in a multi-line flex container. >+ This test baseline-aligns variously-sized flex items, and the container's >+ vertical size depends on the aggregate post-alignment height of its items. >+ --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> >+ <link rel="match" href="flexbox-align-self-baseline-horiz-004-ref.xhtml"/> >+ <style> >+ .flexbox { >+ display: flex; >+ flex-wrap: wrap; >+ align-items: baseline; >+ width: 90px; >+ } >+ >+ .flexbox > * { >+ width: 28px; /* 3 items per Flex Line */ >+ background: yellow; >+ border: 1px solid black; >+ } >+ >+ .big { font: 24px sans-serif; } >+ .medium { font: 14px sans-serif; } >+ .small { font: 8px sans-serif; } >+ >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <!-- First flex line: Just 3 different sizes of text --> >+ <div class="big">a</div> >+ <div class="small">b</div> >+ <div class="medium">c</div> >+ >+ <!-- Second flex line: different margin/padding amounts on each item, >+ and one non-baseline-aligned item.--> >+ <div class="medium" style="padding-top: 10px">d</div> >+ <div class="medium" style="margin-bottom: 8px">e</div> >+ <div class="medium" style="align-self: stretch">f</div> >+ >+ <!-- Third flex line: other margin/padding amounts on each item --> >+ <div class="small" style="margin-top: 20px">g</div> >+ <div class="big">h</div> >+ <div class="medium" style="padding-bottom: 6px">i</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..e8b2791f44d4ae3de515e4e74a9d4d53f73c3699 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005-expected.xhtml >@@ -0,0 +1,58 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for behavior of the 'baseline' value for align-items and >+ align-self, in a multi-line flex container. >+ >+ This reference case just consists of three single-line flex containers, >+ to match the testcase's one flex container with three flex lines. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ display: flex; >+ align-items: baseline; >+ width: 90px; >+ } >+ >+ .flexbox > * { >+ width: 28px; >+ background: yellow; >+ border: 1px solid black; >+ } >+ >+ .big { font: 24px sans-serif; } >+ .medium { font: 14px sans-serif; } >+ .small { font: 8px sans-serif; } >+ >+ </style> >+ </head> >+ <body> >+ <!-- Note: The lines are reversed here with respect to the testcase, >+ due to the testcase's "wrap-reverse". --> >+ <div class="flexbox"> >+ <!-- Third flex line: other margin/padding amounts on each item --> >+ <div class="small" style="margin-top: 20px">g</div> >+ <div class="big">h</div> >+ <div class="medium" style="padding-bottom: 6px">i</div> >+ </div> >+ <div class="flexbox"> >+ <!-- Second flex line: different margin/padding amounts on each item, >+ and one non-baseline-aligned item.--> >+ <div class="medium" style="padding-top: 10px">d</div> >+ <div class="medium" style="margin-bottom: 8px">e</div> >+ <div class="medium" style="align-self: stretch">f</div> >+ </div> >+ <div class="flexbox"> >+ <!-- First flex line: Just 3 different sizes of text --> >+ <div class="big">a</div> >+ <div class="small">b</div> >+ <div class="medium">c</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..cfe0d1b02b46d462a48d0e629c7fa2cf8ef60086 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml >@@ -0,0 +1,56 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for behavior of the 'baseline' value for align-items (and >+ align-self, implicitly), in a wrap-reverse multi-line flex container. >+ This test baseline-aligns variously-sized flex items, and the container's >+ vertical size depends on the aggregate post-alignment height of its items. >+ --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> >+ <link rel="match" href="flexbox-align-self-baseline-horiz-005-ref.xhtml"/> >+ <style> >+ .flexbox { >+ display: flex; >+ flex-wrap: wrap-reverse; >+ align-items: baseline; >+ width: 90px; >+ } >+ >+ .flexbox > * { >+ width: 28px; /* 3 items per Flex Line */ >+ background: yellow; >+ border: 1px solid black; >+ } >+ >+ .big { font: 24px sans-serif; } >+ .medium { font: 14px sans-serif; } >+ .small { font: 8px sans-serif; } >+ >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <!-- First flex line: Just 3 different sizes of text --> >+ <div class="big">a</div> >+ <div class="small">b</div> >+ <div class="medium">c</div> >+ >+ <!-- Second flex line: different margin/padding amounts on each item, >+ and one non-baseline-aligned item.--> >+ <div class="medium" style="padding-top: 10px">d</div> >+ <div class="medium" style="margin-bottom: 8px">e</div> >+ <div class="medium" style="align-self: stretch">f</div> >+ >+ <!-- Third flex line: other margin/padding amounts on each item --> >+ <div class="small" style="margin-top: 20px">g</div> >+ <div class="big">h</div> >+ <div class="medium" style="padding-bottom: 6px">i</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..50036ff6d271ca2db4ef779ebf4429907a8aec2e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006-expected.xhtml >@@ -0,0 +1,51 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for behavior of the 'baseline' value for align-items and >+ align-self when tested against content with an orthogonal writing-mode. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> >+ <style> >+ .container { >+ display: flex; >+ border: 1px dashed blue; >+ font: 14px sans-serif; >+ height: 50px; >+ } >+ >+ .ortho { writing-mode: vertical-rl; >+ width: 17px; >+ height: 40px; >+ float: left; } >+ .offset { margin-top: 10px; >+ margin-bottom: 3px; } >+ >+ .start { align-self: flex-start; } >+ .end { align-self: flex-end; } >+ >+ .lime { background: lime; } >+ .yellow { background: yellow; } >+ .orange { background: orange; } >+ .pink { background: pink; } >+ </style> >+ </head> >+ <body> >+ <div class="container"> >+ <div class="lime ortho start">ortho</div >+ ><div class="yellow offset start">one line</div >+ ><div class="orange offset start">two<br/>lines</div >+ ><div class="pink offset start">offset</div> >+ </div> >+ <div class="container"> >+ <div class="lime ortho end">ortho</div >+ ><div class="yellow offset end">one line</div >+ ><div class="orange offset end">two<br/>lines</div >+ ><div class="pink offset end">offset</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..417f966587d30e2308a52f8880b503dddd970c41 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml >@@ -0,0 +1,54 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for behavior of the 'baseline' value for align-items (and >+ align-self, implicitly). This test baseline-aligns various types of >+ content against content that is exempt from alignment due to an >+ orthognal writing-mode. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.</title> >+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> >+ <link rel="match" href="flexbox-align-self-baseline-horiz-006-ref.xhtml"/> >+ <style> >+ .container { >+ display: flex; >+ border: 1px dashed blue; >+ font: 14px sans-serif; >+ height: 50px; >+ } >+ >+ .base { align-items: baseline; } >+ .lastbase { align-items: last baseline; } >+ >+ .ortho { writing-mode: vertical-rl; >+ width: 17px; >+ height: 40px; } >+ .offset { margin-top: 10px; >+ margin-bottom: 3px; } >+ >+ .lime { background: lime; } >+ .yellow { background: yellow; } >+ .orange { background: orange; } >+ .pink { background: pink; } >+ </style> >+ </head> >+ <body> >+ <div class="container base"> >+ <div class="lime ortho">ortho</div> >+ <div class="yellow">one line</div> >+ <div class="orange">two<br/>lines</div> >+ <div class="pink offset">offset</div> >+ </div> >+ <div class="container lastbase"> >+ <div class="lime ortho">ortho</div> >+ <div class="yellow">one line</div> >+ <div class="orange">two<br/>lines</div> >+ <div class="pink offset">offset</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..37520d66c5256f489ca516c8ffb256729d97a2bf >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007-expected.xhtml >@@ -0,0 +1,41 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for behavior of 'baseline' and 'last baseline' values >+ for align-items and align-self. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> >+ <style> >+ .container { >+ display: flex; >+ border: 1px dashed blue; >+ font: 14px sans-serif; >+ height: 50px; >+ } >+ >+ .start { align-self: flex-start; } >+ .end { align-self: flex-end; } >+ >+ .offset { margin-top: 10px; >+ margin-bottom: 3px; } >+ >+ .lime { background: lime; } >+ .yellow { background: yellow; } >+ .orange { background: orange; } >+ .pink { background: pink; } >+ </style> >+ </head> >+ <body> >+ <div class="container"> >+ <div class="lime offset start">one line (first)</div >+ ><div class="yellow offset end">one line (last)</div >+ ><div class="orange offset end">two<br/>lines and offset (last)</div >+ ><div class="pink offset start">offset (first)</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..50d74f5ebf645f078682f217eb514e59ebebab42 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml >@@ -0,0 +1,44 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for behavior of 'baseline' and 'last baseline' values >+ for align-items (and align-self, implicitly). This test confirms >+ non-interference between the 'baseline' and 'last baseline' items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title> >+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> >+ <link rel="match" href="flexbox-align-self-baseline-horiz-007-ref.xhtml"/> >+ <style> >+ .container { >+ display: flex; >+ border: 1px dashed blue; >+ font: 14px sans-serif; >+ height: 50px; >+ } >+ >+ .base { align-self: baseline; } >+ .lastbase { align-self: last baseline; } >+ >+ .offset { margin-top: 10px; >+ margin-bottom: 3px; } >+ >+ .lime { background: lime; } >+ .yellow { background: yellow; } >+ .orange { background: orange; } >+ .pink { background: pink; } >+ </style> >+ </head> >+ <body> >+ <div class="container"> >+ <div class="lime base">one line (first)</div> >+ <div class="yellow lastbase">one line (last)</div> >+ <div class="orange offset lastbase">two<br/>lines and offset (last)</div> >+ <div class="pink offset base">offset (first)</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..19049d3895c7611c665161058f1c31b5e5414a04 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008-expected.xhtml >@@ -0,0 +1,53 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for behavior of 'baseline' and 'last baseline' values >+ for align-items and align-self for sideways writing modes. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> >+ <style> >+ .container { >+ float: left; >+ display: flex; >+ writing-mode: sideways-rl; >+ border: 1px dashed blue; >+ font: 14px sans-serif; >+ width: 80px; >+ } >+ >+ .reverse { flex-flow: row wrap-reverse; } >+ >+ .start { align-self: start; } >+ .end { align-self: end; } >+ >+ .offset { margin-right: 10px; >+ margin-left: 3px; } >+ >+ .lime { background: lime; } >+ .yellow { background: yellow; } >+ .orange { background: orange; } >+ .pink { background: pink; } >+ >+ .ib { display: inline-block; } >+ </style> >+ </head> >+ <body> >+ <div class="container"> >+ <div class="lime offset start">one line (first)</div >+ ><div class="yellow offset end">one line (last)</div >+ ><div class="orange offset end">two<br/>lines and offset (last)</div >+ ><div class="pink offset start">offset (first)</div> >+ </div> >+ <div class="container reverse"> >+ <div class="lime offset end">one line (first)</div >+ ><div class="offset start"><div class="yellow ib">one line (last)</div >+ ><div class="orange ib">two<br/>lines and offset (last)</div></div >+ ><div class="pink offset end">offset (first)</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..00bc4d9fce8033483de8f6e9172a166842a8ccf0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml >@@ -0,0 +1,55 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for behavior of 'baseline' and 'last baseline' values >+ for align-items (and align-self, implicitly) for sideways >+ writing modes. This test confirms non-interference between the >+ 'baseline' and 'last baseline' items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title> >+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/> >+ <link rel="match" href="flexbox-align-self-baseline-horiz-008-ref.xhtml"/> >+ <style> >+ .container { >+ float: left; >+ display: flex; >+ writing-mode: sideways-rl; >+ border: 1px dashed blue; >+ font: 14px sans-serif; >+ width: 80px; >+ } >+ >+ .reverse { flex-flow: row wrap-reverse; } >+ >+ .base { align-self: baseline; } >+ .lastbase { align-self: last baseline; } >+ >+ .offset { margin-right: 10px; >+ margin-left: 3px; } >+ >+ .lime { background: lime; } >+ .yellow { background: yellow; } >+ .orange { background: orange; } >+ .pink { background: pink; } >+ </style> >+ </head> >+ <body> >+ <div class="container"> >+ <div class="lime base">one line (first)</div> >+ <div class="yellow lastbase">one line (last)</div> >+ <div class="orange offset lastbase">two<br/>lines and offset (last)</div> >+ <div class="pink offset base">offset (first)</div> >+ </div> >+ <div class="container reverse"> >+ <div class="lime base">one line (first)</div> >+ <div class="yellow lastbase">one line (last)</div> >+ <div class="orange offset lastbase">two<br/>lines and offset (last)</div> >+ <div class="pink offset base">offset (first)</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-block-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-block-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..a95a724811d0bfedeff62a4d387775ac3683da08 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-block-expected.xhtml >@@ -0,0 +1,91 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior, using floated divs >+ in place of flex items and using margin-top in place of the align-items / >+ align-self properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ height: 200px; >+ width: 560px; >+ font-size: 10px; >+ line-height: 10px; >+ } >+ >+ .flexbox > div { >+ width: 40px; >+ float: left; >+ } >+ >+ .big { >+ height: 100px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ } >+ .flex-end { >+ background: orange; >+ } >+ .center { >+ background: lightblue; >+ } >+ .baseline { >+ background: teal; >+ } >+ .stretch { >+ background: pink; >+ } >+ .auto { >+ background: yellow; >+ } >+ .unspecified { >+ background: lightgreen; >+ } >+ .initial { >+ background: aqua; >+ } >+ .inherit { >+ background: violet; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end" style="margin-top: 190px">end</div> >+ <div class="flex-end big" style="margin-top: 100px">a b c d e f</div> >+ <div class="center" style="margin-top: 95px">center</div> >+ <div class="center big" style="margin-top: 50px">a b c d e f</div> >+ <!-- We use inline-blocks inside of a wrapper-block as references for the >+ baseline-aligned flex items, since inline-blocks get >+ baseline-aligned in block layout. We also need to specify the widths >+ manually here since the "flexbox > div" child-selector doesn't >+ handle these guys (since they're grandchildren). >+ --> >+ <div style="width: 80px"> >+ <div class="baseline" >+ style="width: 40px; display: inline-block">base</div >+ ><div class="baseline big" >+ style="width: 40px; display: inline-block">abc</div> >+ </div> >+ <div class="stretch" style="height: 100%">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ <div class="auto" style="margin-top: 95px">auto</div> >+ <div class="unspecified" style="margin-top: 95px">unspec</div> >+ <div class="initial" style="margin-top: 95px">initial</div> >+ <div class="inherit" style="margin-top: 190px">inherit</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..365354506f86a16a2f2313296d5d99fa284400ab >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml >@@ -0,0 +1,97 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-horiz-001-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ height: 200px; >+ display: inline-flex; >+ font-size: 10px; >+ line-height: 10px; >+ >+ /* Any children whose align-self is 'auto' (or unspecified, or >+ initial) will end up taking this value from us: */ >+ align-items: center; >+ >+ /* Any children whose align-self is 'inherit' will end up >+ inheriting this value from us: */ >+ align-self: flex-end; >+ } >+ >+ .flexbox > div { >+ width: 40px; >+ } >+ >+ .big { >+ height: 100px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ .auto { >+ background: yellow; >+ align-self: auto; >+ } >+ .unspecified { >+ background: lightgreen; >+ } >+ .initial { >+ background: aqua; >+ align-self: initial; >+ } >+ .inherit { >+ background: violet; >+ align-self: inherit; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ <div class="auto">auto</div> >+ <div class="unspecified">unspec</div> >+ <div class="initial">initial</div> >+ <div class="inherit">inherit</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-table-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-table-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..a95a724811d0bfedeff62a4d387775ac3683da08 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-table-expected.xhtml >@@ -0,0 +1,91 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior, using floated divs >+ in place of flex items and using margin-top in place of the align-items / >+ align-self properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ height: 200px; >+ width: 560px; >+ font-size: 10px; >+ line-height: 10px; >+ } >+ >+ .flexbox > div { >+ width: 40px; >+ float: left; >+ } >+ >+ .big { >+ height: 100px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ } >+ .flex-end { >+ background: orange; >+ } >+ .center { >+ background: lightblue; >+ } >+ .baseline { >+ background: teal; >+ } >+ .stretch { >+ background: pink; >+ } >+ .auto { >+ background: yellow; >+ } >+ .unspecified { >+ background: lightgreen; >+ } >+ .initial { >+ background: aqua; >+ } >+ .inherit { >+ background: violet; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end" style="margin-top: 190px">end</div> >+ <div class="flex-end big" style="margin-top: 100px">a b c d e f</div> >+ <div class="center" style="margin-top: 95px">center</div> >+ <div class="center big" style="margin-top: 50px">a b c d e f</div> >+ <!-- We use inline-blocks inside of a wrapper-block as references for the >+ baseline-aligned flex items, since inline-blocks get >+ baseline-aligned in block layout. We also need to specify the widths >+ manually here since the "flexbox > div" child-selector doesn't >+ handle these guys (since they're grandchildren). >+ --> >+ <div style="width: 80px"> >+ <div class="baseline" >+ style="width: 40px; display: inline-block">base</div >+ ><div class="baseline big" >+ style="width: 40px; display: inline-block">abc</div> >+ </div> >+ <div class="stretch" style="height: 100%">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ <div class="auto" style="margin-top: 95px">auto</div> >+ <div class="unspecified" style="margin-top: 95px">unspec</div> >+ <div class="initial" style="margin-top: 95px">initial</div> >+ <div class="inherit" style="margin-top: 190px">inherit</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..1785ca8dfc0a8bf5b52a0e870e4605902b8f2685 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml >@@ -0,0 +1,99 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the various 'align-self' property values on flex items that are tables</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-horiz-001-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ height: 200px; >+ display: inline-flex; >+ font-size: 10px; >+ line-height: 10px; >+ >+ /* Any children whose align-self is 'auto' (or unspecified, or >+ initial) will end up taking this value from us: */ >+ align-items: center; >+ >+ /* Any children whose align-self is 'inherit' will end up >+ inheriting this value from us: */ >+ align-self: flex-end; >+ } >+ >+ .flexbox > * { >+ display: table; >+ width: 40px; >+ } >+ >+ .big { >+ height: 100px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ display: block; /* XXXdholbert Hackaround for bug 799725 */ >+ } >+ .auto { >+ background: yellow; >+ align-self: auto; >+ } >+ .unspecified { >+ background: lightgreen; >+ } >+ .initial { >+ background: aqua; >+ align-self: initial; >+ } >+ .inherit { >+ background: violet; >+ align-self: inherit; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ <div class="auto">auto</div> >+ <div class="unspecified">unspec</div> >+ <div class="initial">initial</div> >+ <div class="inherit">inherit</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..bc73fa7f926715b7b813e67bf0558ba041461112 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002-expected.xhtml >@@ -0,0 +1,102 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior, using floated divs >+ in place of flex items and using relative positioning in place of the >+ align-items / align-self properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ height: 200px; >+ display: inline-block; >+ font-size: 10px; >+ line-height: 10px; >+ vertical-align: top; >+ } >+ >+ .flexbox > div { float: left } >+ .flex-start, .flex-end, .center, .baseline, .stretch, >+ .auto, .unspecified, .initial, .inherit, .self-start, .self-end { >+ width: 40px; >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ position: relative; >+ border-style: dotted; >+ } >+ >+ .big { >+ height: 100px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ } >+ .flex-end { >+ background: orange; >+ } >+ .center { >+ background: lightblue; >+ } >+ .baseline { >+ background: teal; >+ } >+ .stretch { >+ background: pink; >+ } >+ .self-start { >+ background: yellow; >+ } >+ .self-end { >+ background: purple; >+ } >+ .wmvertrev { >+ writing-mode: vertical-lr; >+ direction: rtl; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end" style="top: 172px">end</div> >+ <div class="flex-end big" style="top: 82px">a b c d e f</div> >+ <div class="center" style="top: 86px">center</div> >+ <div class="center big" style="top: 41px">a b c d e f</div> >+ </div> >+ <br/> >+ <div class="flexbox"> >+ <!-- We use inline-blocks inside of a wrapper-block as references for the >+ baseline-aligned flex items, since inline-blocks get >+ baseline-aligned in block layout. We also need to specify the widths >+ manually here since the "flexbox > div" child-selector doesn't >+ handle these guys (since they're grandchildren). >+ --> >+ <div> >+ <div class="baseline" >+ style="display: inline-block">base</div >+ ><div class="baseline big" >+ style="display: inline-block">abc</div> >+ </div> >+ <div class="stretch" style="height: 182px">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ <br/> >+ <div class="flexbox"> >+ <div class="self-start">self-start</div> >+ <div class="self-start big">a b c d e f</div> >+ <div class="self-end wmvertrev">self-end</div> >+ <div class="self-end wmvertrev big">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..d1273d1f55b8284821a8ed47b7cfc617670f8e52 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml >@@ -0,0 +1,98 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with >+ margin/border/padding values on each item. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container, with margin/padding/border on the items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-horiz-002-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ height: 200px; >+ display: inline-flex; >+ font-size: 10px; >+ line-height: 10px; >+ vertical-align: top; >+ } >+ >+ .flexbox > div { >+ width: 40px; >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ border-style: dotted; >+ } >+ >+ .big { >+ height: 100px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ .self-start { >+ background: yellow; >+ align-self: self-start; >+ } >+ .self-end { >+ background: purple; >+ align-self: self-end; >+ } >+ .wmvertrev { >+ writing-mode: vertical-lr; >+ direction: rtl; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ </div> >+ <br/> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ <br/> >+ <div class="flexbox"> >+ <div class="self-start">self-start</div> >+ <div class="self-start big">a b c d e f</div> >+ <div class="self-end wmvertrev">self-end</div> >+ <div class="self-end wmvertrev big">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-003-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-003-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..229087cb875ccd78d128fb0432fbbf64386ead45 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-003-expected.xhtml >@@ -0,0 +1,97 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior, using floated divs >+ in place of flex items and using relative positioning in place of the >+ align-items / align-self properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ padding: 3px; >+ width: 600px; >+ height: 4px; >+ font-size: 10px; >+ line-height: 10px; >+ font-family: sans-serif; >+ } >+ >+ .flexbox > div { >+ width: 40px; >+ float: left; >+ } >+ >+ .big { >+ height: 100px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ } >+ .flex-end { >+ background: orange; >+ } >+ .center { >+ background: lightblue; >+ } >+ .baseline { >+ background: teal; >+ } >+ .stretch { >+ background: pink; >+ } >+ .auto { >+ background: yellow; >+ } >+ .unspecified { >+ background: lightgreen; >+ } >+ .initial { >+ background: aqua; >+ } >+ .inherit { >+ background: violet; >+ } >+ .normal { >+ background: tan; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end" style="position: relative; top: -6px">end</div> >+ <div class="flex-end big" style="position: relative; top: -96px">a b c d e f</div> >+ <div class="center" style="position: relative; top: -3px">center</div> >+ <div class="center big" style="position: relative; top: -48px">a b c d e f</div> >+ <!-- We use inline-blocks inside of a wrapper-block as references for the >+ baseline-aligned flex items, since inline-blocks get >+ baseline-aligned in block layout. We also need to specify the widths >+ manually here since the "flexbox > div" child-selector doesn't >+ handle these guys (since they're grandchildren). >+ --> >+ <div style="width: 80px"> >+ <div class="baseline" >+ style="width: 40px; display: inline-block">base</div >+ ><div class="baseline big" >+ style="width: 40px; display: inline-block">abc</div> >+ </div> >+ <div class="stretch" style="height: 100%">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ <div class="auto" style="height: 100%">auto</div> >+ <div class="unspecified" style="height: 100%">unspec</div> >+ <div class="initial" style="height: 100%">initial</div> >+ <div class="inherit" style="height: 100%">inherit</div> >+ <div class="normal" style="height: 100%">normal</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-003.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-003.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..4414d0a0a071ddad0f342a9f25efcc5a1b944132 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-003.xhtml >@@ -0,0 +1,97 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with the >+ flex container being shorter than its items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-horiz-003-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ padding: 3px; >+ height: 4px; >+ display: inline-flex; >+ font-size: 10px; >+ line-height: 10px; >+ font-family: sans-serif; >+ } >+ >+ .flexbox > div { >+ width: 40px; >+ } >+ >+ .big { >+ height: 100px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ .auto { >+ background: yellow; >+ align-self: auto; >+ } >+ .unspecified { >+ background: lightgreen; >+ } >+ .initial { >+ background: aqua; >+ align-self: initial; >+ } >+ .inherit { >+ background: violet; >+ align-self: inherit; >+ } >+ .normal { >+ background: tan; >+ align-self: normal; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ <div class="auto">auto</div> >+ <div class="unspecified">unspec</div> >+ <div class="initial">initial</div> >+ <div class="inherit">inherit</div> >+ <div class="normal">normal</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-004-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-004-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..5143e07c489373eafc3957da4b46d94a03effb30 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-004-expected.xhtml >@@ -0,0 +1,89 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior, using floated divs >+ in place of flex items and using relative positioning in place of the >+ align-items / align-self properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ padding: 3px; >+ height: 4px; >+ display: inline-block; >+ font-size: 10px; >+ line-height: 10px; >+ font-family: sans-serif; >+ margin-top: 20px; >+ margin-bottom: 120px; >+ vertical-align: top; >+ } >+ >+ .flexbox > div { float: left } >+ .flex-start, .flex-end, .center, .baseline, .stretch, >+ .auto, .unspecified, .initial, .inherit { >+ width: 40px; >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ position: relative; >+ border-style: dotted; >+ } >+ >+ .big { >+ height: 100px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ } >+ .flex-end { >+ background: orange; >+ } >+ .center { >+ background: lightblue; >+ } >+ .baseline { >+ background: teal; >+ } >+ .stretch { >+ background: pink; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end" style="top: -24px">end</div> >+ <div class="flex-end big" style="top: -114px">a b c d e f</div> >+ <div class="center" style="top: -12px">center</div> >+ <div class="center big" style="top: -57px">a b c d e f</div> >+ </div> >+ <br/> >+ <div class="flexbox"> >+ <!-- We use inline-blocks inside of a wrapper-block as references for the >+ baseline-aligned flex items, since inline-blocks get >+ baseline-aligned in block layout. We also need to specify the widths >+ manually here since the "flexbox > div" child-selector doesn't >+ handle these guys (since they're grandchildren). >+ --> >+ <div> >+ <div class="baseline" >+ style="display: inline-block">base</div >+ ><div class="baseline big" >+ style="display: inline-block">abc</div> >+ </div> >+ <div class="stretch" style="height: 2px">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-004.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-004.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b7bdf396a077cece36dc8c6f79b11ad680db9dda >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-004.xhtml >@@ -0,0 +1,84 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with the >+ flex container being shorter than its items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items, with margin/padding/border on the items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-horiz-004-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ padding: 3px; >+ height: 4px; >+ display: inline-flex; >+ font-size: 10px; >+ line-height: 10px; >+ font-family: sans-serif; >+ margin-top: 20px; >+ margin-bottom: 120px; >+ vertical-align: top; >+ } >+ >+ .flexbox > div { >+ width: 40px; >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ border-style: dotted; >+ } >+ >+ .big { >+ height: 100px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ min-height: 2px; >+ align-self: stretch; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ </div> >+ <br/> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-005-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-005-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..48c215ad6ceb1c903e4dfe935767436de87ce4d2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-005-expected.xhtml >@@ -0,0 +1,98 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior with auto >+ margins in play. This reference case uses fixed margin-top values >+ in place of the testcase's auto margins. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ height: 140px; >+ width: 400px; >+ display: flex; >+ font-size: 10px; >+ line-height: 10px; >+ margin-bottom: 10px; >+ } >+ >+ .kidsAutoTop > div { margin-top: 130px; } >+ .kidsAutoTop > div.big { margin-top: 60px; } >+ .kidsAutoBoth > div { margin-top: 65px; } >+ .kidsAutoBoth > div.big { margin-top: 30px; } >+ >+ .flexbox > div { >+ width: 40px; >+ height: 10px; >+ } >+ >+ .flexbox > div.big { >+ height: 80px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ } >+ .flex-end { >+ background: orange; >+ } >+ .center { >+ background: lightblue; >+ } >+ .baseline { >+ background: teal; >+ } >+ .stretch { >+ background: pink; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox kidsAutoTop"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">a b c d e f</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ >+ <div class="flexbox kidsAutoBottom"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">a b c d e f</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ >+ <div class="flexbox kidsAutoBoth"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">a b c d e f</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-005.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-005.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..cff89d3251668a12e2c74a1dcc82457c5f49d8c0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-005.xhtml >@@ -0,0 +1,104 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior with auto margins in >+ play (which should negate the effects of align-items / align-self, >+ because there won't be any available space in which to align the item >+ after the auto margins are resolved). --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with auto margins in play, in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/> >+ <link rel="match" href="flexbox-align-self-horiz-005-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ height: 140px; >+ width: 400px; >+ display: flex; >+ font-size: 10px; >+ line-height: 10px; >+ margin-bottom: 10px; >+ } >+ >+ .kidsAutoTop > div { margin-top: auto; } >+ .kidsAutoBottom > div { margin-bottom: auto; } >+ .kidsAutoBoth > div { margin: auto 0; } >+ >+ .flexbox > div { >+ width: 40px; >+ } >+ >+ .flexbox > div.big { >+ height: 80px; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox kidsAutoTop"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">a b c d e f</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ >+ <div class="flexbox kidsAutoBottom"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">a b c d e f</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ >+ <div class="flexbox kidsAutoBoth"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">a b c d e f</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3ffa8647bb2676146cee6377cc6a9220f751f051 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-001-expected.html >@@ -0,0 +1,29 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- In this reference case, we just have the testcases's text placed directly >+ in the outermost wrapper-block, with a lime background on that wrapper >+ instead of on a flex item. >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.fixedWidthWrapper { >+ width: 200px; >+ /* Small enough that 3 characters can _easily_ fit in our width */ >+ font-size: 12px; >+ background: lime; >+ } >+ </style> >+</head> >+<body> >+ <div class="fixedWidthWrapper"> >+ A B C >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..578dff9cae91d6c71d3a2a28fb186b8610ec78aa >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-001.html >@@ -0,0 +1,49 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the sizing of a stretched horizontal flex container in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> >+ <link rel="match" href="flexbox-align-self-stretch-vert-001-ref.html"> >+ <meta name="assert" content="If a stretched flex item's main size is influenced by its cross size, and the flex container has a definite cross size, then the item's cross size should be resolved early so that it can be used when determining the item's main size"> >+ <meta name="assert" content="https://drafts.csswg.org/css-flexbox/issues-cr-2012#issue-23"> >+ <meta charset="utf-8"> >+ <style> >+ div.fixedWidthWrapper { >+ width: 200px; >+ /* Small enough that 3 characters can _easily_ fit in our width */ >+ font-size: 12px; >+ } >+ div.vertContainer { >+ display: flex; >+ flex-direction: column; >+ } >+ div.vertItem { >+ background: red; >+ } >+ div.horizContainer { >+ display: flex; >+ } >+ div.horizItem { >+ flex: 1; >+ background: lime; >+ } >+ </style> >+</head> >+<body> >+ <div class="fixedWidthWrapper"> >+ <div class="vertContainer"> >+ <div class="vertItem"> >+ <div class="horizContainer"> >+ <div class="horizItem">A B C</div> >+ <div class="horizItem"></div> >+ </div> >+ </div> >+ </div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..4e02cd8b10d376be8d895921da851e57f8b6a175 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-002-expected.html >@@ -0,0 +1,34 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- In this reference case, we use floated fixed-sized divs to mimic the >+ testcases's flex items. >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.container { >+ width: 100px; >+ height: 20px; >+ border: 2px solid black; >+ } >+ div.item { >+ width: 48px; >+ height: 15px; >+ float: left; >+ border: 1px dotted blue; >+ } >+ </style> >+</head> >+<body> >+ <div class="container"> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c2b90301193160fcc95aa665768b7992265ce774 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-002.html >@@ -0,0 +1,35 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the sizing of stretched flex items in a vertical multi-line flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> >+ <link rel="match" href="flexbox-align-self-stretch-vert-002-ref.html"> >+ <meta name="assert" content="In a multi-line flex container, flex items should not be stretched (in the cross axis) until after wrapping has been performed."> >+ <meta charset="utf-8"> >+ <style> >+ div.container { >+ display: flex; >+ flex-flow: column wrap; >+ width: 100px; >+ height: 20px; >+ border: 2px solid black; >+ } >+ div.item { >+ /* Tall enough to force wrapping (since parent height is 20px): */ >+ min-height: 15px; >+ border: 1px dotted blue; >+ } >+ </style> >+</head> >+<body> >+ <div class="container"> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..2288c21ace97e032b7274643cfa5ecf126f6a80a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001-expected.xhtml >@@ -0,0 +1,109 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior, using blocks in >+ place of flex items and using float and width keywords to emulate the >+ align-items / align-self properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ font-size: 10px; >+ } >+ >+ div.big { >+ font-size: 20px; >+ width: 50px; >+ } >+ >+ .flexbox > * { >+ clear: both; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ float: left; >+ } >+ .flex-end { >+ background: orange; >+ float: right; >+ } >+ .center { >+ background: lightblue; >+ margin: auto; >+ } >+ .baseline { >+ background: teal; >+ float: left; >+ } >+ .stretch { >+ background: pink; >+ width: 100%; >+ } >+ .auto { >+ background: yellow; >+ margin: auto; >+ } >+ .unspecified { >+ background: lightgreen; >+ margin: auto; >+ } >+ .initial { >+ background: aqua; >+ margin: auto; >+ } >+ .inherit { >+ background: violet; >+ float: right; >+ } >+ >+ <!-- We center shrinkwrapped text by putting it into an inline-block, and >+ then wrapping that inline-block in a helper-div that has >+ "text-align:center" set. --> >+ .centerParent { >+ text-align: center; >+ } >+ .centerParent > * { >+ display: inline-block; >+ text-align: left; /* Keep parent's centering from tweaking my text */ >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="centerParent"> >+ <div class="center">center</div> >+ </div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ <div class="centerParent"> >+ <div class="auto">auto</div> >+ </div> >+ <div class="centerParent"> >+ <div class="unspecified">unspec</div> >+ </div> >+ <div class="centerParent"> >+ <div class="initial">initial</div> >+ </div> >+ <div class="inherit">inherit</div> >+ <!-- Since the last div is floated, the container doesn't include >+ its height by default. So we add some invisible hacky text (of the >+ same font) to make sure our container is tall enough. --> >+ <span style="visibility:hidden">hacky text</span> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..4080d3488033297d681d5d77a039bdceba4c1526 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001.xhtml >@@ -0,0 +1,92 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-vert-001-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ flex-direction: column; >+ font-size: 10px; >+ >+ /* Any children whose align-self is 'auto' (or unspecified, or >+ initial) will end up taking this value from us: */ >+ align-items: center; >+ >+ /* Any children whose align-self is 'inherit' will end up >+ inheriting this value from us: */ >+ align-self: flex-end; >+ } >+ >+ .big { >+ font-size: 20px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ .auto { >+ background: yellow; >+ align-self: auto; >+ } >+ .unspecified { >+ background: lightgreen; >+ } >+ .initial { >+ background: aqua; >+ align-self: initial; >+ } >+ .inherit { >+ background: violet; >+ align-self: inherit; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ <div class="auto">auto</div> >+ <div class="unspecified">unspec</div> >+ <div class="initial">initial</div> >+ <div class="inherit">inherit</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..14b456e67128e5ffbbaf5d570016ad4670f45871 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002-expected.xhtml >@@ -0,0 +1,107 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior, using blocks in >+ place of flex items and using float and width keywords to emulate the >+ align-items / align-self properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ float: left; >+ font-size: 10px; >+ } >+ >+ .flex-start, .flex-end, .center, .baseline, .stretch, >+ .self-start, .self-end { >+ clear: both; >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ border-style: dotted; >+ } >+ >+ div.big { >+ font-size: 20px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ float: left; >+ } >+ .flex-end { >+ background: orange; >+ float: right; >+ } >+ <!-- We center shrinkwrapped text by putting it into an inline-block, and >+ then wrapping that inline-block in a helper-div that has >+ "text-align:center" set. --> >+ .centerParent { >+ text-align: center; >+ } >+ .center { >+ background: lightblue; >+ display: inline-block; >+ text-align: left; /* Keep parent's centering from tweaking my text */ >+ } >+ .baseline { >+ background: teal; >+ float: left; >+ } >+ .stretch { >+ background: pink; >+ } >+ .self-start { >+ background: yellow; >+ float: right; >+ text-align: right; >+ } >+ .self-end { >+ background: purple; >+ float: left; >+ text-align: right; >+ } >+ .clearFloats { clear: both } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="clearFloats"></div> >+ <div class="centerParent"> >+ <div class="center">center</div> >+ </div> >+ <div class="centerParent"> >+ <div class="center big">a b c d e f</div> >+ </div> >+ </div> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="clearFloats"></div> >+ <div class="stretch">stretch</div> >+ <!-- Force a 3px + 1px = 4px margin between this and the previous div >+ (to thwart the effects of margin-collapsing). This is the only >+ place we need this hack, because everywhere else in this test >+ we use floats or inline-blocks, whose margins don't collapse. --> >+ <div class="stretch big" style="margin-top: 4px">a b c d e f</div> >+ </div> >+ <div class="flexbox"> >+ <div class="self-start">self-start</div> >+ <div class="self-start big">a b c d e f</div> >+ <div class="self-end">self-end</div> >+ <div class="self-end big">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..2ff89bdf5f52c8e040dd665d53888c0566cafc5d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002.xhtml >@@ -0,0 +1,94 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with >+ margin/border/padding values on each item. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-vert-002-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ flex-direction: column; >+ float: left; >+ font-size: 10px; >+ } >+ >+ .flexbox > div { >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ >+ border-style: dotted; >+ } >+ >+ div.big { >+ font-size: 20px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ .self-start { >+ background: yellow; >+ align-self: self-start; >+ } >+ .self-end { >+ background: purple; >+ align-self: self-end; >+ } >+ .dirrtl { >+ direction: rtl; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ </div> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ <div class="flexbox"> >+ <div class="self-start dirrtl">self-start</div> >+ <div class="self-start dirrtl big">a b c d e f</div> >+ <div class="self-end dirrtl">self-end</div> >+ <div class="self-end dirrtl big">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-003-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-003-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..4412b3931972988975a3f185a0d0b296abe3821b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-003-expected.xhtml >@@ -0,0 +1,80 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior, using blocks in >+ place of flex items and using float and width keywords to emulate the >+ align-items / align-self properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 4px; >+ font-family: sans-serif; >+ font-size: 10px; >+ margin-left: 80px; >+ } >+ >+ div.big { >+ font-size: 18px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ float: left; >+ } >+ .flex-end { >+ background: orange; >+ float: right; >+ } >+ <!-- We center shrinkwrapped text by putting it into an inline-block, and >+ then wrapping that inline-block in a helper-div that has >+ "text-align:center" set. For this to work, the parent has to be at >+ least as wide as the centered content inside of it, so we make it >+ large with a negative margin such that its center aligns with the >+ 4px-wide container's center. --> >+ .centerParent { >+ text-align: center; >+ width: 100px; >+ margin-left: -48px; >+ } >+ .center { >+ background: lightblue; >+ display: inline-block; >+ text-align: left; /* Keep parent's centering from tweaking my text */ >+ } >+ .baseline { >+ background: teal; >+ float: left; >+ } >+ .stretch { >+ background: pink; >+ } >+ .clearFloats { clear: both } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b</div> >+ <div class="centerParent clearFloats"> >+ <div class="center">center</div> >+ </div> >+ <div class="centerParent"> >+ <div class="center big">a b</div> >+ </div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch clearFloats">stretch</div> >+ <div class="stretch big">a b</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-003.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-003.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..23b320941365cfd7ea49068342878de77d8b016a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-003.xhtml >@@ -0,0 +1,68 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with the >+ flex container being skinnier than its items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-vert-003-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 4px; >+ display: flex; >+ flex-direction: column; >+ font-family: sans-serif; >+ font-size: 10px; >+ margin-left: 80px; >+ } >+ >+ div.big { >+ font-size: 18px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b</div> >+ <div class="center">center</div> >+ <div class="center big">a b</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-004-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-004-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b63c2c7fbcb27b4b64b111498ecdd5c6db8e6cae >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-004-expected.xhtml >@@ -0,0 +1,96 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior, using blocks in >+ place of flex items and using float and width keywords to emulate the >+ align-items / align-self properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 4px; >+ float: left; >+ font-family: sans-serif; >+ font-size: 10px; >+ margin-left: 80px; >+ } >+ >+ .flex-start, .flex-end, .center, .baseline, .stretch { >+ clear: both; >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ border-style: dotted; >+ } >+ >+ div.big { >+ font-size: 18px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ float: left; >+ } >+ .flex-end { >+ background: orange; >+ float: right; >+ } >+ <!-- We center shrinkwrapped text by putting it into an inline-block, and >+ then wrapping that inline-block in a helper-div that has >+ "text-align:center" set. For this to work, the parent has to be at >+ least as wide as the centered content inside of it, so we make it >+ large with a negative margin such that its center aligns with the >+ 4px-wide container's center. --> >+ .centerParent { >+ text-align: center; >+ width: 100px; >+ margin-left: -48px; >+ } >+ .center { >+ background: lightblue; >+ display: inline-block; >+ text-align: left; /* Keep parent's centering from tweaking my text */ >+ } >+ .baseline { >+ background: teal; >+ float: left; >+ } >+ .stretch { >+ background: pink; >+ } >+ .clearFloats { clear: both } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b</div> >+ <div class="centerParent"> >+ <div class="center">center</div> >+ </div> >+ <div class="centerParent"> >+ <div class="center big">a b</div> >+ </div> >+ </div> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="clearFloats"></div> >+ <div class="stretch">stretch</div> >+ <!-- Force a 3px + 1px = 4px margin between this and the previous div >+ (to thwart the effects of margin-collapsing). This is the only >+ place we need this hack, because everywhere else in this test >+ we use floats or inline-blocks, whose margins don't collapse. --> >+ <div class="stretch big" style="margin-top: 4px">a b</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-004.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-004.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..4c52875747ad84892fa38cdfcf11888e3db10cda >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-004.xhtml >@@ -0,0 +1,79 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with the >+ flex container being skinnier than its items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-vert-004-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 4px; >+ display: flex; >+ flex-direction: column; >+ float: left; >+ font-family: sans-serif; >+ font-size: 10px; >+ margin-left: 80px; >+ } >+ >+ .flexbox > div { >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ >+ border-style: dotted; >+ } >+ >+ div.big { >+ font-size: 18px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b</div> >+ <div class="center">center</div> >+ <div class="center big">a b</div> >+ </div> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..5c2f62abebac7efb66369e4464a53b288f2a1d8c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001-expected.xhtml >@@ -0,0 +1,112 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior in a vertical >+ "direction: rtl" flex container, using blocks in place of flex items and >+ using float and width keywords to emulate the align-items / align-self >+ properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ direction: rtl; >+ font-family: sans-serif; >+ font-size: 10px; >+ } >+ >+ div.big { >+ font-size: 20px; >+ width: 50px; >+ } >+ >+ .flexbox > * { >+ clear: both; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ float: right; >+ } >+ .flex-end { >+ background: orange; >+ float: left; >+ } >+ .center { >+ background: lightblue; >+ margin: auto; >+ } >+ .baseline { >+ background: teal; >+ float: right; >+ } >+ .stretch { >+ background: pink; >+ width: 100%; >+ } >+ .auto { >+ background: yellow; >+ margin: auto; >+ } >+ .unspecified { >+ background: lightgreen; >+ margin: auto; >+ } >+ .initial { >+ background: aqua; >+ margin: auto; >+ } >+ .inherit { >+ background: violet; >+ float: left; >+ } >+ >+ <!-- We center shrinkwrapped text by putting it into an inline-block, and >+ then wrapping that inline-block in a helper-div that has >+ "text-align:center" set. --> >+ .centerParent { >+ text-align: center; >+ } >+ .centerParent > * { >+ display: inline-block; >+ text-align: left; /* Keep parent's centering from tweaking my text */ >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="centerParent"> >+ <div class="center">center</div> >+ </div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ <div class="centerParent"> >+ <div class="auto">auto</div> >+ </div> >+ <div class="centerParent"> >+ <div class="unspecified">unspec</div> >+ </div> >+ <div class="centerParent"> >+ <div class="initial">initial</div> >+ </div> >+ <div class="inherit">inherit</div> >+ <!-- Since the last div is floated, the container doesn't include >+ its height by default. So we add some invisible hacky text (of the >+ same font) to make sure our container is tall enough. --> >+ <span style="visibility:hidden">hacky text</span> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..1016c28f824e86dc7608f0b81af3f4989160eb0d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml >@@ -0,0 +1,95 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with >+ "direction: rtl" to swap the horizontal (cross) axis. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container with 'direction: rtl'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-vert-rtl-001-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ flex-direction: column; >+ direction: rtl; >+ font-family: sans-serif; >+ font-size: 10px; >+ >+ /* Any children whose align-self is 'auto' (or unspecified, or >+ initial) will end up taking this value from us: */ >+ align-items: center; >+ >+ /* Any children whose align-self is 'inherit' will end up >+ inheriting this value from us: */ >+ align-self: flex-end; >+ } >+ >+ .big { >+ font-size: 20px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ .auto { >+ background: yellow; >+ align-self: auto; >+ } >+ .unspecified { >+ background: lightgreen; >+ } >+ .initial { >+ background: aqua; >+ align-self: initial; >+ } >+ .inherit { >+ background: violet; >+ align-self: inherit; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ <div class="auto">auto</div> >+ <div class="unspecified">unspec</div> >+ <div class="initial">initial</div> >+ <div class="inherit">inherit</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..16cd5611c8c80e11984024a61d1133c7039233dd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-002-expected.xhtml >@@ -0,0 +1,93 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior in a vertical >+ "direction: rtl" flex container, using blocks in place of flex items and >+ using float and width keywords to emulate the align-items / align-self >+ properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ float: left; >+ direction: rtl; >+ font-family: sans-serif; >+ font-size: 10px; >+ } >+ >+ .flex-start, .flex-end, .center, .baseline, .stretch { >+ clear: both; >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ border-style: dotted; >+ } >+ >+ div.big { >+ font-size: 20px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ float: right; >+ } >+ .flex-end { >+ background: orange; >+ float: left; >+ } >+ <!-- We center shrinkwrapped text by putting it into an inline-block, and >+ then wrapping that inline-block in a helper-div that has >+ "text-align:center" set. --> >+ .centerParent { >+ text-align: center; >+ } >+ .center { >+ background: lightblue; >+ display: inline-block; >+ text-align: right; /* Keep parent's centering from tweaking my text */ >+ } >+ .baseline { >+ background: teal; >+ float: right; >+ } >+ .stretch { >+ background: pink; >+ } >+ .clearFloats { clear: both } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="clearFloats"></div> >+ <div class="centerParent"> >+ <div class="center">center</div> >+ </div> >+ <div class="centerParent"> >+ <div class="center big">a b c d e f</div> >+ </div> >+ </div> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="clearFloats"></div> >+ <div class="stretch">stretch</div> >+ <!-- Force a 3px + 1px = 4px margin between this and the previous div >+ (to thwart the effects of margin-collapsing). This is the only >+ place we need this hack, because everywhere else in this test >+ we use floats or inline-blocks, whose margins don't collapse. --> >+ <div class="stretch big" style="margin-top: 4px">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..a3a81e25d10a86d8a729ecec36afb1d0e0bf578d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml >@@ -0,0 +1,80 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with >+ margin/border/padding values on each, and with "direction: rtl" to swap >+ the horizontal (cross) axis item. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction: rtl'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-vert-rtl-002-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ flex-direction: column; >+ direction: rtl; >+ float: left; >+ font-family: sans-serif; >+ font-size: 10px; >+ } >+ >+ .flexbox > div { >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ >+ border-style: dotted; >+ } >+ >+ div.big { >+ font-size: 20px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ </div> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-003-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-003-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..5be37085af697afb5c53eba4e450050c02fa94ae >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-003-expected.xhtml >@@ -0,0 +1,82 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior in a vertical >+ "direction: rtl" flex container, using blocks in place of flex items and >+ using float and width keywords to emulate the align-items / align-self >+ properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 4px; >+ font-family: sans-serif; >+ direction: rtl; >+ font-size: 10px; >+ margin-left: 80px; >+ } >+ >+ div.big { >+ font-size: 18px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ float: right; >+ } >+ .flex-end { >+ background: orange; >+ float: left; >+ } >+ <!-- We center shrinkwrapped text by putting it into an inline-block, and >+ then wrapping that inline-block in a helper-div that has >+ "text-align:center" set. For this to work, the parent has to be at >+ least as wide as the centered content inside of it, so we make it >+ large with a negative margin such that its center aligns with the >+ 4px-wide container's center. --> >+ .centerParent { >+ text-align: center; >+ width: 100px; >+ margin-right: -48px; >+ } >+ .center { >+ background: lightblue; >+ display: inline-block; >+ text-align: right; /* Keep parent's centering from tweaking my text */ >+ } >+ .baseline { >+ background: teal; >+ float: right; >+ } >+ .stretch { >+ background: pink; >+ } >+ .clearFloats { clear: both } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b</div> >+ <div class="centerParent clearFloats"> >+ <div class="center">center</div> >+ </div> >+ <div class="centerParent"> >+ <div class="center big">a b</div> >+ </div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch clearFloats">stretch</div> >+ <div class="stretch big">a b</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..9a3bfccb35abbcda22341a143510344ba88c2437 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml >@@ -0,0 +1,70 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with the >+ flex container being skinnier than its items, and with "direction: rtl" to >+ swap the horizontal (cross) axis. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items and with 'direction: rtl'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-vert-rtl-003-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 4px; >+ display: flex; >+ flex-direction: column; >+ direction: rtl; >+ font-family: sans-serif; >+ font-size: 10px; >+ margin-left: 80px; >+ } >+ >+ div.big { >+ font-size: 18px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b</div> >+ <div class="center">center</div> >+ <div class="center big">a b</div> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-004-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-004-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..faeb28662f71d7c8fe05d075aa7581acaf286c8c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-004-expected.xhtml >@@ -0,0 +1,98 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior in a vertical >+ "direction: rtl" flex container, using blocks in place of flex items and >+ using float and width keywords to emulate the align-items / align-self >+ properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 4px; >+ float: left; >+ direction: rtl; >+ font-family: sans-serif; >+ font-size: 10px; >+ margin-left: 80px; >+ } >+ >+ .flex-start, .flex-end, .center, .baseline, .stretch { >+ clear: both; >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ border-style: dotted; >+ } >+ >+ div.big { >+ font-size: 18px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ float: right; >+ } >+ .flex-end { >+ background: orange; >+ float: left; >+ } >+ <!-- We center shrinkwrapped text by putting it into an inline-block, and >+ then wrapping that inline-block in a helper-div that has >+ "text-align:center" set. For this to work, the parent has to be at >+ least as wide as the centered content inside of it, so we make it >+ large with a negative margin such that its center aligns with the >+ 4px-wide container's center. --> >+ .centerParent { >+ text-align: center; >+ width: 100px; >+ margin-right: -48px; >+ } >+ .center { >+ background: lightblue; >+ display: inline-block; >+ text-align: right; /* Keep parent's centering from tweaking my text */ >+ } >+ .baseline { >+ background: teal; >+ float: right; >+ } >+ .stretch { >+ background: pink; >+ } >+ .clearFloats { clear: both } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b</div> >+ <div class="clearFloats"></div> >+ <div class="stretch">stretch</div> >+ <!-- Force a 3px + 1px = 4px margin between this and the previous div >+ (to thwart the effects of margin-collapsing). This is the only >+ place we need this hack, because everywhere else in this test >+ we use floats or inline-blocks, whose margins don't collapse. --> >+ <div class="stretch big" style="margin-top: 4px">a b</div> >+ <div class="centerParent"> >+ <div class="center">center</div> >+ </div> >+ <div class="centerParent"> >+ <div class="center big">a b</div> >+ </div> >+ </div> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..4f4f49afda37f66b50e6b502bf0244540d1bf84e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml >@@ -0,0 +1,88 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with the >+ flex container being skinnier than its items, and with "direction: rtl" to >+ swap the horizontal (cross) axis. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items and with 'direction: rtl'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-vert-rtl-004-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 4px; >+ display: flex; >+ flex-direction: column; >+ direction: rtl; >+ float: left; >+ font-family: sans-serif; >+ font-size: 10px; >+ margin-left: 80px; >+ } >+ >+ .flexbox > div { >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ >+ border-style: dotted; >+ } >+ >+ div.big { >+ font-size: 18px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- (NOTE: this test has the "stretch" divs and the "flex-end" divs >+ swapped in the ordering, with respect to the other >+ flexbox-align-self-* testcases. That's because "stretch" and >+ "flex-end" overflow in opposite directions, and in RTL mode (with 2 >+ flex containers side by side), they overflow *at* each other and >+ overlap. If we swap them, they float away from each other and we can >+ still see them.) --> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b</div> >+ <div class="center">center</div> >+ <div class="center big">a b</div> >+ </div> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b0c46adcb9d786cc5d7fb1455aea7c6e9dcc7d77 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005-expected.xhtml >@@ -0,0 +1,105 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for align-items / align-self behavior, using blocks in >+ place of flex items and using float and width keywords to emulate the >+ align-items / align-self properties. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ float: left; >+ font-size: 10px; >+ direction: rtl; >+ } >+ >+ .flex-start, .flex-end, .center, .baseline, .stretch, .self-start, .self-end { >+ clear: both; >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ border-style: dotted; >+ } >+ >+ div.big { >+ font-size: 20px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ float: right; >+ } >+ .flex-end { >+ background: orange; >+ float: left; >+ } >+ <!-- We center shrinkwrapped text by putting it into an inline-block, and >+ then wrapping that inline-block in a helper-div that has >+ "text-align:center" set. --> >+ .centerParent { >+ text-align: center; >+ } >+ .center { >+ background: lightblue; >+ display: inline-block; >+ text-align: right; /* Keep parent's centering from tweaking my text */ >+ } >+ .baseline { >+ background: teal; >+ float: right; >+ } >+ .stretch { >+ background: pink; >+ } >+ .self-start { >+ background: yellow; >+ float: right; >+ } >+ .self-end { >+ background: purple; >+ float: left; >+ } >+ .clearFloats { clear: both } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="clearFloats"></div> >+ <div class="centerParent"> >+ <div class="center">center</div> >+ </div> >+ <div class="centerParent"> >+ <div class="center big">a b c d e f</div> >+ </div> >+ </div> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="clearFloats"></div> >+ <div class="stretch">stretch</div> >+ <!-- Force a 3px + 1px = 4px margin between this and the previous div >+ (to thwart the effects of margin-collapsing). This is the only >+ place we need this hack, because everywhere else in this test >+ we use floats or inline-blocks, whose margins don't collapse. --> >+ <div class="stretch big" style="margin-top: 4px">a b c d e f</div> >+ </div> >+ <div class="flexbox"> >+ <div class="self-start">self-start</div> >+ <div class="self-start big">a b c d e f</div> >+ <div class="self-end">self-end</div> >+ <div class="self-end big">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..420c334c841efb113d7e769deb3062097ff54307 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml >@@ -0,0 +1,92 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for align-items / align-self behavior, with all the possible >+ values included on different items within a flex container, and with >+ margin/border/padding values on each item. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction:rtl'</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/> >+ <link rel="match" href="flexbox-align-self-vert-rtl-005-ref.xhtml"/> >+ <style> >+ .flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ flex-direction: column; >+ float: left; >+ font-size: 10px; >+ direction: rtl; >+ } >+ >+ .flexbox > div { >+ margin: 1px 2px 3px 4px; >+ border-width: 2px 3px 4px 5px; >+ padding: 3px 4px 5px 6px; >+ >+ border-style: dotted; >+ } >+ >+ div.big { >+ font-size: 20px; >+ width: 50px; >+ } >+ >+ /* Classes for each of the various align-self values */ >+ .flex-start { >+ background: lime; >+ align-self: flex-start; >+ } >+ .flex-end { >+ background: orange; >+ align-self: flex-end; >+ } >+ .center { >+ background: lightblue; >+ align-self: center; >+ } >+ .baseline { >+ background: teal; >+ align-self: baseline; >+ } >+ .stretch { >+ background: pink; >+ align-self: stretch; >+ } >+ .self-start { >+ background: yellow; >+ align-self: self-start; >+ } >+ .self-end { >+ background: purple; >+ align-self: self-end; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="flex-start">start</div> >+ <div class="flex-start big">a b c d e f</div> >+ <div class="flex-end">end</div> >+ <div class="flex-end big">a b c d e f</div> >+ <div class="center">center</div> >+ <div class="center big">a b c d e f</div> >+ </div> >+ <div class="flexbox"> >+ <div class="baseline">base</div> >+ <div class="baseline big">abc</div> >+ <div class="stretch">stretch</div> >+ <div class="stretch big">a b c d e f</div> >+ </div> >+ <div class="flexbox"> >+ <div class="self-start dirrtl">self-start</div> >+ <div class="self-start dirrtl big">a b c d e f</div> >+ <div class="self-end dirrtl">self-end</div> >+ <div class="self-end dirrtl big nowidth">a b c d e f</div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-anonymous-items-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-anonymous-items-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8f99ea1d56ae19136b91c460003ebdab1bd821b6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-anonymous-items-001-expected.html >@@ -0,0 +1,15 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+</head> >+<body> >+ a a<div style="display:inline-block">b b</div>x x >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-anonymous-items-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-anonymous-items-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0c85c46d55adf19f16b1196cf19cdb4c6c23d3ca >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-anonymous-items-001.html >@@ -0,0 +1,26 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> >+ <link rel="match" href="flexbox-anonymous-items-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ a a >+ <div style="order: 1">x x</div> >+ b b >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..84e231512e3afcba20f68f6f688ea19224dce18b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001-expected.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex, and with the >+ unaligned children taken out of baseline-alignment with >+ "vertical-align:top". >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ body { >+ margin: 0; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ .flexContainer { >+ display: inline-block; >+ background: lightblue; >+ vertical-align: top; >+ } >+ .hugeAndUnaligned { >+ font-size: 35px; >+ line-height: 35px; >+ vertical-align: top; >+ } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ } >+ .flexContainer > * { display: inline; } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer"> >+ <div class="smallFont">b</div >+ ><div>c</div >+ ><div class="hugeAndUnaligned">d</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="hugeAndUnaligned">e</div >+ ><div>f</div >+ ><div class="smallFont">g</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="hugeAndUnaligned">h</div >+ ><div class="smallFont">i</div >+ ><div>j</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a7308f74876ee406e41b20824c0acf244599400f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html >@@ -0,0 +1,62 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a horizontal flex container >+ with several flex items, some of which have "align-self:baseline". The >+ spec says this about this case: >+ If any of the flex items on the flex container's first line >+ participate in baseline alignment, the flex container's >+ main-axis baseline is the baseline of those flex items. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a horizontal flex container with baseline-aligned flex items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-align-self-baseline-horiz-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ body { >+ margin: 0; >+ font-size: 20px; >+ line-height: 20px; >+ } >+ .flexContainer { >+ display: inline-flex; >+ background: lightblue; >+ align-items: baseline; >+ } >+ .hugeAndUnaligned { >+ font-size: 35px; >+ line-height: 35px; >+ /* This one flex item won't be baseline-aligned, so it won't impact >+ the flex container's positioning */ >+ align-self: stretch; >+ } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer"> >+ <div class="smallFont">b</div> >+ <div>c</div> >+ <div class="hugeAndUnaligned">d</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="hugeAndUnaligned">e</div> >+ <div>f</div> >+ <div class="smallFont">g</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="hugeAndUnaligned">h</div> >+ <div class="smallFont">i</div> >+ <div>j</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f200983b7ab17021bcd5ea3aaaaf2444e6197fd1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001-expected.html >@@ -0,0 +1,58 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex, and with the >+ unaligned children taken out of baseline-alignment with >+ "vertical-align:top". >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ body { >+ margin: 0; >+ font: 20px Ahem; >+ line-height: 20px; >+ /* Baseline is 0.8em = 16px from top */ >+ } >+ .flexContainer { >+ display: inline-block; >+ background: lightblue; >+ } >+ .hugeAndUnaligned { >+ font-size: 35px; >+ line-height: 35px; >+ vertical-align: top; >+ } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ /* Baseline is 0.8em = 8px from top */ >+ } >+ * { vertical-align: top } >+ </style> >+</head> >+<body> >+ <div style="display: inline-block; margin-top: 12px">a</div> >+ <div class="flexContainer" style="margin-top: 20px"> >+ <div class="smallFont">b</div >+ ><div>c</div >+ ><div class="hugeAndUnaligned">d</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="hugeAndUnaligned">e</div >+ ><div>f</div >+ ><div class="smallFont">g</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="hugeAndUnaligned">h</div >+ ><div class="smallFont">i</div >+ ><div>j</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..97963fb41e605cbb42c05d7d3e217e794f82c9ab >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html >@@ -0,0 +1,66 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a vertical flex container with >+ several flex items, some of which have "align-self:baseline". Since we're >+ vertical and the items' baselines are horizontal, they do not end up >+ participating in baseline alignment, so their "align-self:baseline" >+ computed style doesn't have any special effect on the container's >+ baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a vertical flex container with baseline-aligned flex items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-align-self-baseline-vert-001-ref.html"> >+ <meta charset="utf-8"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ body { >+ margin: 0; >+ font: 20px Ahem; >+ line-height: 20px; >+ /* Baseline is 0.8em = 16px from top */ >+ } >+ .flexContainer { >+ display: inline-flex; >+ flex-direction: column; >+ background: lightblue; >+ align-items: baseline; >+ } >+ .hugeAndUnaligned { >+ font-size: 35px; >+ line-height: 35px; >+ /* This one flex item won't be baseline-aligned, so it won't impact >+ the flex container's positioning */ >+ align-self: stretch; >+ } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ /* Baseline is 0.8em = 8px from top */ >+ } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer"> >+ <div class="smallFont">b</div> >+ <div>c</div> >+ <div class="hugeAndUnaligned">d</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="hugeAndUnaligned">e</div> >+ <div>f</div> >+ <div class="smallFont">g</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="hugeAndUnaligned">h</div> >+ <div class="smallFont">i</div> >+ <div>j</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..21139d36461848c9ced103a162fcde1428641dc0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001a-expected.html >@@ -0,0 +1,37 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- In this reference case, we have inline-blocks instead of inline >+ flex containers. Otherwise it's the same. --> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ body { >+ font: 20px Ahem; >+ } >+ .flexContainer { >+ display: inline-block; >+ height: 16px; >+ width: 16px; >+ background: purple; >+ border: 0px dotted black; >+ /* (Elements that want a border will set their border-width.) */ >+ } >+ </style> >+</head> >+<body> >+ A >+ <div class="flexContainer"></div> >+ <div class="flexContainer" style="padding-bottom: 20px"></div> >+ <div class="flexContainer" style="padding: 10px"></div> >+ <div class="flexContainer" style="border-width: 3px"></div> >+ <div class="flexContainer" style="border-bottom-width: 4px"></div> >+ <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..50334acc8bab8e734a59934cacdf454f8d8c0f57 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001a.html >@@ -0,0 +1,47 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a horizontal flex container >+ with no flex items. This is the main-axis baseline. The spec says this >+ about this case: >+ https://drafts.csswg.org/css-flexbox/#flex-baselines >+ "Otherwise, the flex container has no first/last main-axis baseline set, >+ and one is synthesized if needed according to the rules of its alignment context." >+ >+ The alignment context in this case is inline-level so the margin-box >+ should be used to synthesize the baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of an empty horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-empty-001-ref.html"> >+ <meta charset="utf-8"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ body { >+ font: 20px Ahem; >+ } >+ .flexContainer { >+ display: inline-flex; >+ height: 16px; >+ width: 16px; >+ background: purple; >+ border: 0px dotted black; >+ /* (Elements that want a border will set their border-width.) */ >+ } >+ </style> >+</head> >+<body> >+ A >+ <div class="flexContainer"></div> >+ <div class="flexContainer" style="padding-bottom: 20px"></div> >+ <div class="flexContainer" style="padding: 10px"></div> >+ <div class="flexContainer" style="border-width: 3px"></div> >+ <div class="flexContainer" style="border-bottom-width: 4px"></div> >+ <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..21139d36461848c9ced103a162fcde1428641dc0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001b-expected.html >@@ -0,0 +1,37 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- In this reference case, we have inline-blocks instead of inline >+ flex containers. Otherwise it's the same. --> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ body { >+ font: 20px Ahem; >+ } >+ .flexContainer { >+ display: inline-block; >+ height: 16px; >+ width: 16px; >+ background: purple; >+ border: 0px dotted black; >+ /* (Elements that want a border will set their border-width.) */ >+ } >+ </style> >+</head> >+<body> >+ A >+ <div class="flexContainer"></div> >+ <div class="flexContainer" style="padding-bottom: 20px"></div> >+ <div class="flexContainer" style="padding: 10px"></div> >+ <div class="flexContainer" style="border-width: 3px"></div> >+ <div class="flexContainer" style="border-bottom-width: 4px"></div> >+ <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2195df4f543cc6d446cdbdafbffa2b496947a87f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001b.html >@@ -0,0 +1,48 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a vertical flex container >+ with no flex items. This is the cross-axis baseline. The spec says this >+ about this case: >+ https://drafts.csswg.org/css-flexbox/#flex-baselines >+ "Otherwise, the flex container has no first/last main-axis baseline set, >+ and one is synthesized if needed according to the rules of its alignment context." >+ >+ The alignment context in this case is inline-level so the margin-box >+ should be used to synthesize the baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of an empty vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-empty-001-ref.html"> >+ <meta charset="utf-8"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ body { >+ font: 20px Ahem; >+ } >+ .flexContainer { >+ display: inline-flex; >+ flex-direction: column; >+ height: 16px; >+ width: 16px; >+ background: purple; >+ border: 0px dotted black; >+ /* (Elements that want a border will set their border-width.) */ >+ } >+ </style> >+</head> >+<body> >+ A >+ <div class="flexContainer"></div> >+ <div class="flexContainer" style="padding-bottom: 20px"></div> >+ <div class="flexContainer" style="padding: 10px"></div> >+ <div class="flexContainer" style="border-width: 3px"></div> >+ <div class="flexContainer" style="border-bottom-width: 4px"></div> >+ <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..e6f570ed2074a78bd37f3e029a0a7ae746a7d9fc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a-expected.html >@@ -0,0 +1,44 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex, and with the >+ baseline-aligned items aligned using specific font-size / line-heights, >+ and with unaligned children taken out of baseline-alignment using >+ "vertical-align:top". >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-block; >+ background: lightblue; >+ } >+ .flexContainer > * { display: inline; } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ } >+ .bigFont { >+ font-size: 20px; >+ line-height: 20px; >+ } >+ .unaligned { vertical-align: top } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer smallFont"> >+ <div class="smallFont">b</div >+ ><div class="bigFont unaligned">c</div> >+ </div> >+ <div class="flexContainer bigFont"> >+ <div class="bigFont">d</div >+ ><div class="smallFont unaligned">e</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..94bbdec20214e4cd346a151610faa42723deca41 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html >@@ -0,0 +1,47 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a horizontal flex container >+ with several flex items, none of which have "align-self:baseline". The >+ spec says this about this case: >+ ...if the flex container has at least one flex item, and its >+ first flex item has a baseline parallel to the flex >+ container's main axis, the flex container's main-axis >+ baseline is that baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-multi-item-horiz-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-flex; >+ background: lightblue; >+ } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ } >+ .bigFont { >+ font-size: 20px; >+ line-height: 20px; >+ } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer"> >+ <div class="smallFont">b</div >+ ><div class="bigFont">c</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="bigFont">d</div >+ ><div class="smallFont">e</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..e6f570ed2074a78bd37f3e029a0a7ae746a7d9fc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b-expected.html >@@ -0,0 +1,44 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex, and with the >+ baseline-aligned items aligned using specific font-size / line-heights, >+ and with unaligned children taken out of baseline-alignment using >+ "vertical-align:top". >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-block; >+ background: lightblue; >+ } >+ .flexContainer > * { display: inline; } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ } >+ .bigFont { >+ font-size: 20px; >+ line-height: 20px; >+ } >+ .unaligned { vertical-align: top } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer smallFont"> >+ <div class="smallFont">b</div >+ ><div class="bigFont unaligned">c</div> >+ </div> >+ <div class="flexContainer bigFont"> >+ <div class="bigFont">d</div >+ ><div class="smallFont unaligned">e</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d40a986405bd47fb210b139d3e9c814f6ded093d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html >@@ -0,0 +1,49 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a horizontal flex container >+ with several "order"-reordered flex items, none of which have >+ "align-self:baseline". The spec says this about this case: >+ ...if the flex container has at least one flex item, and its >+ first flex item has a baseline parallel to the flex >+ container's main axis, the flex container's main-axis >+ baseline is that baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-multi-item-horiz-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-flex; >+ background: lightblue; >+ } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ } >+ .bigFont { >+ font-size: 20px; >+ line-height: 20px; >+ } >+ .smallOrder { order: -1 } >+ .bigOrder { order: 30 } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer"> >+ <div class="bigFont">c</div >+ ><div class="smallFont smallOrder">b</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="smallFont bigOrder">e</div >+ ><div class="bigFont">d</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1cd4fa95c7cc0ca48f0e06d6afb0561ebac977ba >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a-expected.html >@@ -0,0 +1,51 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex, and with the >+ inline-blocks manually positioned with "vertical-align:top" and >+ margin-top. >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ body { >+ margin: 0; >+ font: 20px Ahem; >+ line-height: 20px; >+ /* Baseline is 0.8em = 16px from top */ >+ } >+ .flexContainer { >+ display: inline-block; >+ background: lightblue; >+ } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ /* Baseline is 0.8em = 8px from top */ >+ } >+ .bigFont { >+ font-size: 20px; >+ line-height: 20px; >+ /* Baseline is 0.8em = 16px from top */ >+ } >+ * { vertical-align: top } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer" style="margin-top: 8px"> >+ <div class="smallFont">b</div >+ ><div class="bigFont">c</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="bigFont">d</div >+ ><div class="smallFont">e</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..06c2f7063e88540bc57442c6be6b0726a56e57a6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html >@@ -0,0 +1,57 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a vertical flex container >+ with several flex items, none of which have "align-self:baseline". The >+ spec says this about this case: >+ ...if the flex container has at least one flex item, and its >+ first flex item has a baseline parallel to the flex >+ container's main axis, the flex container's main-axis >+ baseline is that baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-multi-item-vert-001-ref.html"> >+ <meta charset="utf-8"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ body { >+ margin: 0; >+ font: 20px Ahem; >+ line-height: 20px; >+ /* Baseline is 0.8em = 16px from top */ >+ } >+ .flexContainer { >+ display: inline-flex; >+ flex-direction: column; >+ background: lightblue; >+ } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ /* Baseline is 0.8em = 8px from top */ >+ } >+ .bigFont { >+ font-size: 20px; >+ line-height: 20px; >+ /* Baseline is 0.8em = 16px from top */ >+ } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer"> >+ <div class="smallFont">b</div >+ ><div class="bigFont">c</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="bigFont">d</div >+ ><div class="smallFont">e</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1cd4fa95c7cc0ca48f0e06d6afb0561ebac977ba >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b-expected.html >@@ -0,0 +1,51 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex, and with the >+ inline-blocks manually positioned with "vertical-align:top" and >+ margin-top. >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ body { >+ margin: 0; >+ font: 20px Ahem; >+ line-height: 20px; >+ /* Baseline is 0.8em = 16px from top */ >+ } >+ .flexContainer { >+ display: inline-block; >+ background: lightblue; >+ } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ /* Baseline is 0.8em = 8px from top */ >+ } >+ .bigFont { >+ font-size: 20px; >+ line-height: 20px; >+ /* Baseline is 0.8em = 16px from top */ >+ } >+ * { vertical-align: top } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer" style="margin-top: 8px"> >+ <div class="smallFont">b</div >+ ><div class="bigFont">c</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="bigFont">d</div >+ ><div class="smallFont">e</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6928bba97fb642326d2c4526ecec3054df48b878 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html >@@ -0,0 +1,59 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a vertical flex container >+ with several "order"-reordered flex items, none of which have >+ "align-self:baseline". The spec says this about this case: >+ ...if the flex container has at least one flex item, and its >+ first flex item has a baseline parallel to the flex >+ container's main axis, the flex container's main-axis >+ baseline is that baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-multi-item-vert-001-ref.html"> >+ <meta charset="utf-8"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ body { >+ margin: 0; >+ font: 20px Ahem; >+ line-height: 20px; >+ /* Baseline is 0.8em = 16px from top */ >+ } >+ .flexContainer { >+ display: inline-flex; >+ flex-direction: column; >+ background: lightblue; >+ } >+ .smallFont { >+ font-size: 10px; >+ line-height: 10px; >+ /* Baseline is 0.8em = 8px from top */ >+ } >+ .bigFont { >+ font-size: 20px; >+ line-height: 20px; >+ /* Baseline is 0.8em = 16px from top */ >+ } >+ .smallOrder { order: -1 } >+ .bigOrder { order: 30 } >+ </style> >+</head> >+<body> >+ a >+ <div class="flexContainer"> >+ <div class="bigFont">c</div >+ ><div class="smallFont smallOrder">b</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="smallFont bigOrder">e</div >+ ><div class="bigFont">d</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..66513652a60352ceafd5738a0b41fa6f506c66dd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001-expected.html >@@ -0,0 +1,65 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex, and with the >+ baseline-aligned items aligned using specific font-size / line-heights, >+ and with unaligned children taken out of baseline-alignment using >+ "vertical-align:top". >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-block; >+ width: 40px; >+ height: 40px; >+ background: lightblue; >+ } >+ .flexContainer > * { >+ width: 20px; >+ display: inline-block; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ .unaligned { vertical-align: top } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex containers with flex items that have a mix of baselines: --> >+ <div class="flexContainer medFont"> >+ <div class="medFont">b</div >+ ><div class="bigFont unaligned">c</div> >+ </div> >+ >+ <div class="flexContainer bigFont"> >+ <div class="bigFont">f</div >+ ><div class="smallFont unaligned">g</div> >+ </div> >+ >+ <!-- Flex container with second line baseline-aligned >+ (shouldn't make a difference) --> >+ <div class="flexContainer smallFont"> >+ <div class="smallFont">j</div >+ ><div class="bigFont unaligned">k</div> >+ </div> >+ n >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0faf41bb3c9cf8f6e6fa6923b50f1adc565fff55 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html >@@ -0,0 +1,83 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a horizontal flex container >+ with several flex lines. >+ The spec says this about this case: >+ [Given that the first line has no baseline-aligned items:] >+ ...if the flex container has at least one flex item, and its >+ first flex item has a baseline parallel to the flex >+ container's main axis, the flex container's main-axis >+ baseline is that baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-multi-line-horiz-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-flex; >+ flex-wrap: wrap; >+ width: 40px; >+ height: 40px; >+ background: lightblue; >+ } >+ .flexContainer > * { >+ width: 20px; >+ } >+ >+ /* We'll make the second flex line not paint anything, so that the >+ reference case doesn't need to bother matching it. */ >+ .flexContainer > *:nth-child(3), >+ .flexContainer > *:nth-child(4) { >+ visibility: hidden; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex containers with flex items that have a mix of baselines: --> >+ <div class="flexContainer"> >+ <div class="medFont">b</div >+ ><div class="bigFont">c</div >+ ><div class="bigFont">d</div >+ ><div class="medFont">e</div> >+ </div> >+ >+ <div class="flexContainer"> >+ <div class="bigFont">f</div >+ ><div class="smallFont">g</div >+ ><div class="medFont">h</div >+ ><div class="bigFont">i</div> >+ </div> >+ >+ <!-- Flex container with second line baseline-aligned >+ (shouldn't make a difference) --> >+ <div class="flexContainer"> >+ <div class="smallFont">j</div >+ ><div class="bigFont">k</div >+ ><div class="bigFont" style="align-self: baseline">l</div >+ ><div class="medFont" style="align-self: baseline">m</div> >+ </div> >+ n >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..361f0965b29b616bf2fb0510c1ea9e112dd8321a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002-expected.html >@@ -0,0 +1,69 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex, and with the >+ baseline-aligned items aligned using specific font-size / line-heights, >+ and with unaligned children taken out of baseline-alignment using >+ "vertical-align:top". >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-block; >+ width: 40px; >+ /* Split testcase's 40px height into 20px of padding-top and 20px of >+ height, to set aside space for the testcase's (invisible) second line >+ (which is above the first line, since this is wrap-reverse) */ >+ height: 20px; >+ padding-top: 20px; >+ background: lightblue; >+ } >+ .flexContainer > * { >+ width: 20px; >+ display: inline-block; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ .unaligned { vertical-align: top } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex containers with flex items that have a mix of baselines: --> >+ <div class="flexContainer medFont"> >+ <div class="medFont">b</div >+ ><div class="bigFont unaligned">c</div> >+ </div> >+ >+ <div class="flexContainer bigFont"> >+ <div class="bigFont">f</div >+ ><div class="smallFont unaligned">g</div> >+ </div> >+ >+ <!-- Flex container with second line baseline-aligned >+ (shouldn't make a difference) --> >+ <div class="flexContainer smallFont"> >+ <div class="smallFont">j</div >+ ><div class="bigFont unaligned">k</div> >+ </div> >+ n >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..bd13de7f9743aeeeada53374d506a1b59607260f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html >@@ -0,0 +1,83 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a horizontal flex container >+ with several flex lines (wrapping in the reverse direction). >+ The spec says this about this case: >+ [Given that the first line has no baseline-aligned items:] >+ ...if the flex container has at least one flex item, and its >+ first flex item has a baseline parallel to the flex >+ container's main axis, the flex container's main-axis >+ baseline is that baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-multi-line-horiz-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-flex; >+ flex-wrap: wrap-reverse; >+ width: 40px; >+ height: 40px; >+ background: lightblue; >+ } >+ .flexContainer > * { >+ width: 20px; >+ } >+ >+ /* We'll make the second flex line not paint anything, so that the >+ reference case doesn't need to bother matching it. */ >+ .flexContainer > *:nth-child(3), >+ .flexContainer > *:nth-child(4) { >+ visibility: hidden; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex containers with flex items that have a mix of baselines: --> >+ <div class="flexContainer"> >+ <div class="medFont">b</div >+ ><div class="bigFont">c</div >+ ><div class="bigFont">d</div >+ ><div class="medFont">e</div> >+ </div> >+ >+ <div class="flexContainer"> >+ <div class="bigFont">f</div >+ ><div class="smallFont">g</div >+ ><div class="medFont">h</div >+ ><div class="bigFont">i</div> >+ </div> >+ >+ <!-- Flex container with second line baseline-aligned >+ (shouldn't make a difference) --> >+ <div class="flexContainer"> >+ <div class="smallFont">j</div >+ ><div class="bigFont">k</div >+ ><div class="bigFont" style="align-self: baseline">l</div >+ ><div class="medFont" style="align-self: baseline">m</div> >+ </div> >+ n >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ef9e8051ddaceb4d6b5ef08744dae421566dc523 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003-expected.html >@@ -0,0 +1,85 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ /* We use an outer vertical flex container, wrapping two single-line >+ flex containers, to match the testcase's multi-line flex container. */ >+ .outerFlexContainer { >+ height: 100px; >+ background: lightgray; >+ display: inline-flex; >+ flex-direction: column; >+ justify-content: center; /* to mimic testcase's "align-content:center" */ >+ } >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ } >+ .flexContainer > * { >+ width: 20px; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex container with second item in first line baseline-aligned >+ (should set the container's baseline) --> >+ <div class="outerFlexContainer"> >+ <div class="flexContainer"> >+ <div class="medFont">b</div> >+ <div class="bigFont" style="align-self: baseline">c</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="medFont">d</div> >+ <div class="smallFont">e</div> >+ </div> >+ </div> >+ >+ <!-- Flex container with both items in first line baseline-aligned >+ (should set the container's baseline) --> >+ <div class="outerFlexContainer"> >+ <div class="flexContainer"> >+ <div class="smallFont" style="align-self: baseline">f</div> >+ <div class="medFont" style="align-self: baseline">g</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="bigFont">h</div> >+ <div class="smallFont">i</div> >+ </div> >+ </div> >+ >+ <!-- Flex container with all items baseline-aligned >+ (only those on first line should set the container's baseline) --> >+ <div class="outerFlexContainer"> >+ <div class="flexContainer" style="align-items: baseline"> >+ <div class="bigFont">j</div> >+ <div class="smallFont" style="padding-bottom: 20px">k</div> >+ </div> >+ <div class="flexContainer" style="align-items: baseline"> >+ <div class="smallFont">l</div> >+ <div class="medFont">m</div> >+ </div> >+ </div> >+ n >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ef7d787beb6ad8386a1e4078ad1a41bb5fc31592 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html >@@ -0,0 +1,73 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a horizontal multi-line (wrap) flex container with baseline-aligned items on first line</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-multi-line-horiz-003-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-flex; >+ flex-wrap: wrap; >+ width: 40px; >+ height: 100px; >+ background: lightgray; >+ >+ /* Use "align-content", to test that packing space is considered when >+ getting container's baseline from its first FlexLine:*/ >+ align-content: center; >+ } >+ .flexContainer > * { >+ width: 20px; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex container with second item in first line baseline-aligned >+ (should set the container's baseline) --> >+ <div class="flexContainer"> >+ <div class="medFont">b</div> >+ <div class="bigFont" style="align-self: baseline">c</div> >+ <div class="medFont">d</div> >+ <div class="smallFont">e</div> >+ </div> >+ >+ <!-- Flex container with both items in first line baseline-aligned >+ (should set the container's baseline) --> >+ <div class="flexContainer"> >+ <div class="smallFont" style="align-self: baseline">f</div> >+ <div class="medFont" style="align-self: baseline">g</div> >+ <div class="bigFont">h</div> >+ <div class="smallFont">i</div> >+ </div> >+ >+ <!-- Flex container with all items baseline-aligned, and with some padding >+ (only those on first line should set the container's baseline) --> >+ <div class="flexContainer" style="align-items: baseline"> >+ <div class="bigFont">j</div> >+ <div class="smallFont" style="padding-bottom: 20px">k</div> >+ <div class="smallFont">l</div> >+ <div class="medFont">m</div> >+ </div> >+ n >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..212b3b1e979ddd72a6aac9b22560495d1d12c68d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004-expected.html >@@ -0,0 +1,85 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ /* We use an outer vertical flex container, wrapping two single-line >+ flex containers, to match the testcase's multi-line flex container. */ >+ .outerFlexContainer { >+ height: 100px; >+ background: lightgray; >+ display: inline-flex; >+ flex-direction: column-reverse; >+ justify-content: center; /* to mimic testcase's "align-content:center" */ >+ } >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ } >+ .flexContainer > * { >+ width: 20px; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex container with second item in first line baseline-aligned >+ (should set the container's baseline) --> >+ <div class="outerFlexContainer"> >+ <div class="flexContainer"> >+ <div class="medFont">b</div> >+ <div class="bigFont" style="align-self: baseline">c</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="medFont">d</div> >+ <div class="smallFont">e</div> >+ </div> >+ </div> >+ >+ <!-- Flex container with both items in first line baseline-aligned >+ (should set the container's baseline) --> >+ <div class="outerFlexContainer"> >+ <div class="flexContainer"> >+ <div class="smallFont" style="align-self: baseline">f</div> >+ <div class="medFont" style="align-self: baseline">g</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="bigFont">h</div> >+ <div class="smallFont">i</div> >+ </div> >+ </div> >+ >+ <!-- Flex container with all items baseline-aligned >+ (only those on first line should set the container's baseline) --> >+ <div class="outerFlexContainer"> >+ <div class="flexContainer" style="align-items: baseline"> >+ <div class="bigFont">j</div> >+ <div class="smallFont" style="padding-bottom: 20px">k</div> >+ </div> >+ <div class="flexContainer" style="align-items: baseline"> >+ <div class="smallFont">l</div> >+ <div class="medFont">m</div> >+ </div> >+ </div> >+ n >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..21db212f99274d9bde5f69f080b76da64e0360f2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html >@@ -0,0 +1,73 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a horizontal multi-line (wrap-reverse) flex container with baseline-aligned items on first line</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-multi-line-horiz-004-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-flex; >+ flex-wrap: wrap-reverse; >+ width: 40px; >+ height: 100px; >+ background: lightgray; >+ >+ /* Use "align-content", to test that packing space is considered when >+ getting container's baseline from its first FlexLine:*/ >+ align-content: center; >+ } >+ .flexContainer > * { >+ width: 20px; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex container with second item in first line baseline-aligned >+ (should set the container's baseline) --> >+ <div class="flexContainer"> >+ <div class="medFont">b</div> >+ <div class="bigFont" style="align-self: baseline">c</div> >+ <div class="medFont">d</div> >+ <div class="smallFont">e</div> >+ </div> >+ >+ <!-- Flex container with both items in first line baseline-aligned >+ (should set the container's baseline) --> >+ <div class="flexContainer"> >+ <div class="smallFont" style="align-self: baseline">f</div> >+ <div class="medFont" style="align-self: baseline">g</div> >+ <div class="bigFont">h</div> >+ <div class="smallFont">i</div> >+ </div> >+ >+ <!-- Flex container with all items baseline-aligned, and with some padding >+ (only those on first line should set the container's baseline) --> >+ <div class="flexContainer" style="align-items: baseline"> >+ <div class="bigFont">j</div> >+ <div class="smallFont" style="padding-bottom: 20px">k</div> >+ <div class="smallFont">l</div> >+ <div class="medFont">m</div> >+ </div> >+ n >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ce47baa87d52cb883b16a46e886ae7a0abc959e7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001-expected.html >@@ -0,0 +1,65 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex, and with the >+ baseline-aligned items aligned using specific font-size / line-heights, >+ and with unaligned children taken out of baseline-alignment using >+ "float: left". >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-block; >+ width: 40px; >+ height: 40px; >+ background: lightblue; >+ } >+ .flexContainer > * { >+ height: 20px; >+ display: inline-block; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ .unaligned { float: left } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex containers with flex items that have a mix of baselines: --> >+ <div class="flexContainer medFont"> >+ <div class="medFont">b</div >+ ><br><div class="bigFont unaligned">c</div> >+ </div> >+ >+ <div class="flexContainer bigFont"> >+ <div class="bigFont">f</div >+ ><br><div class="smallFont unaligned">g</div> >+ </div> >+ >+ <!-- Flex container with second line baseline-aligned >+ (shouldn't make a difference) --> >+ <div class="flexContainer smallFont"> >+ <div class="smallFont">j</div >+ ><br><div class="bigFont unaligned">k</div> >+ </div> >+ n >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d2b510ade630e2f33f6a3e4de50f956c9995ee7a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html >@@ -0,0 +1,84 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a vertical flex container >+ with several flex lines. >+ The spec says this about this case: >+ [Given that the first line has no baseline-aligned items:] >+ ...if the flex container has at least one flex item, and its >+ first flex item has a baseline parallel to the flex >+ container's main axis, the flex container's main-axis >+ baseline is that baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a vertical flex container with multiple flex lines</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-multi-line-vert-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ width: 40px; >+ height: 40px; >+ background: lightblue; >+ } >+ .flexContainer > * { >+ height: 20px; >+ } >+ >+ /* We'll make the second flex line not paint anything, so that the >+ reference case doesn't need to bother matching it. */ >+ .flexContainer > *:nth-child(3), >+ .flexContainer > *:nth-child(4) { >+ visibility: hidden; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex containers with flex items that have a mix of baselines: --> >+ <div class="flexContainer"> >+ <div class="medFont">b</div >+ ><div class="bigFont">c</div >+ ><div class="bigFont">d</div >+ ><div class="medFont">e</div> >+ </div> >+ >+ <div class="flexContainer"> >+ <div class="bigFont">f</div >+ ><div class="smallFont">g</div >+ ><div class="medFont">h</div >+ ><div class="bigFont">i</div> >+ </div> >+ >+ <!-- Flex container with second line baseline-aligned >+ (shouldn't make a difference) --> >+ <div class="flexContainer"> >+ <div class="smallFont">j</div >+ ><div class="bigFont">k</div >+ ><div class="bigFont" style="align-self: baseline">l</div >+ ><div class="medFont" style="align-self: baseline">m</div> >+ </div> >+ n >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f66096644b17694c7f423013357eea049a666edd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002-expected.html >@@ -0,0 +1,71 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex, and with the >+ baseline-aligned items aligned using specific font-size / line-heights, >+ and with unaligned children taken out of baseline-alignment using >+ "float: left". >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-block; >+ /* Split testcase's 40px width into 20px of padding-left and 20px of >+ width, to set aside space for the testcase's (invisible) second line >+ (which is to the left of the first line, since this is wrap-reverse) >+ */ >+ width: 20px; >+ padding-left: 20px; >+ height: 40px; >+ background: lightblue; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 20px; >+ display: inline-block; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ .unaligned { float: left } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex containers with flex items that have a mix of baselines: --> >+ <div class="flexContainer medFont"> >+ <div class="medFont">b</div >+ ><br><div class="bigFont unaligned">c</div> >+ </div> >+ >+ <div class="flexContainer bigFont"> >+ <div class="bigFont">f</div >+ ><br><div class="smallFont unaligned">g</div> >+ </div> >+ >+ <!-- Flex container with second line baseline-aligned >+ (shouldn't make a difference) --> >+ <div class="flexContainer smallFont"> >+ <div class="smallFont">j</div >+ ><br><div class="bigFont unaligned">k</div> >+ </div> >+ n >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5bffc84630f679b5ae799cd9a75b240b5fd7fbd9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html >@@ -0,0 +1,85 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a vertical flex container >+ with several flex lines (wrapping in the reverse direction). >+ The spec says this about this case: >+ [Given that the first line has no baseline-aligned items:] >+ ...if the flex container has at least one flex item, and its >+ first flex item has a baseline parallel to the flex >+ container's main axis, the flex container's main-axis >+ baseline is that baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a vertical flex container with multiple flex lines</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-multi-line-vert-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: inline-flex; >+ flex-direction: column; >+ flex-wrap: wrap-reverse; >+ width: 40px; >+ height: 40px; >+ background: lightblue; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 20px; >+ } >+ >+ /* We'll make the second flex line not paint anything, so that the >+ reference case doesn't need to bother matching it. */ >+ .flexContainer > *:nth-child(3), >+ .flexContainer > *:nth-child(4) { >+ visibility: hidden; >+ } >+ >+ .smallFont { >+ font-size: 8px; >+ line-height: 8px; >+ } >+ .medFont { >+ font-size: 12px; >+ line-height: 12px; >+ } >+ .bigFont { >+ font-size: 16px; >+ line-height: 16px; >+ } >+ </style> >+</head> >+<body> >+ a >+ <!-- Flex containers with flex items that have a mix of baselines: --> >+ <div class="flexContainer"> >+ <div class="medFont">b</div >+ ><div class="bigFont">c</div >+ ><div class="bigFont">d</div >+ ><div class="medFont">e</div> >+ </div> >+ >+ <div class="flexContainer"> >+ <div class="bigFont">f</div >+ ><div class="smallFont">g</div >+ ><div class="medFont">h</div >+ ><div class="bigFont">i</div> >+ </div> >+ >+ <!-- Flex container with second line baseline-aligned >+ (shouldn't make a difference) --> >+ <div class="flexContainer"> >+ <div class="smallFont">j</div >+ ><div class="bigFont">k</div >+ ><div class="bigFont" style="align-self: baseline">l</div >+ ><div class="medFont" style="align-self: baseline">m</div> >+ </div> >+ n >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..afca911546d842818e6ef3d2e0a68359232ac781 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001a-expected.html >@@ -0,0 +1,44 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex. --> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ body { >+ font: 14px serif; >+ } >+ .flexContainer { >+ display: inline-block; >+ height: 16px; >+ width: 16px; >+ background: pink; >+ border: 0px dotted black; >+ /* (Elements that want a border will set their border-width.) */ >+ } >+ .abs { >+ position: absolute; >+ top: 0; >+ font-size: 8px; >+ } >+ </style> >+</head> >+<body> >+ A >+ <div class="flexContainer">a</div> >+ <div class="flexContainer" style="padding-bottom: 20px">a</div> >+ <div class="flexContainer" style="padding: 10px">a</div> >+ <div class="flexContainer" style="border-width: 3px">a</div> >+ <div class="flexContainer" style="border-bottom-width: 4px">a</div> >+ <div class="flexContainer" style="padding: 4px"> >+ <!-- (An abspos child shouldn't prevent us from getting our baseline from >+ the first flex item, which happens to be the second child.) --> >+ <div class="abs">abs</div> >+ <div style="font: 26px serif">a</div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b9df6c23f0e7e03e5670006699fd6e2c0003e81a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001a.html >@@ -0,0 +1,53 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a horizontal flex container >+ with one flex item. This is the main-axis baseline. The spec says this >+ about this case: >+ ...if the flex container has at least one flex item, and its >+ first flex item has a baseline parallel to the flex >+ container's main axis, the flex container's main-axis >+ baseline is that baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a horizontal flex container with one flex item</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-single-item-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ body { >+ font: 14px serif; >+ } >+ .flexContainer { >+ display: inline-flex; >+ height: 16px; >+ width: 16px; >+ background: pink; >+ border: 0px dotted black; >+ /* (Elements that want a border will set their border-width.) */ >+ } >+ .abs { >+ position: absolute; >+ top: 0; >+ font-size: 8px; >+ } >+ </style> >+</head> >+<body> >+ A >+ <div class="flexContainer">a</div> >+ <div class="flexContainer" style="padding-bottom: 20px">a</div> >+ <div class="flexContainer" style="padding: 10px">a</div> >+ <div class="flexContainer" style="border-width: 3px">a</div> >+ <div class="flexContainer" style="border-bottom-width: 4px">a</div> >+ <div class="flexContainer" style="padding: 4px"> >+ <!-- (An abspos child shouldn't prevent us from getting our baseline from >+ the first flex item, which happens to be the second child.) --> >+ <div class="abs">abs</div> >+ <div style="font: 26px serif">a</div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..afca911546d842818e6ef3d2e0a68359232ac781 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001b-expected.html >@@ -0,0 +1,44 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, using inline-block instead of inline-flex. --> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ body { >+ font: 14px serif; >+ } >+ .flexContainer { >+ display: inline-block; >+ height: 16px; >+ width: 16px; >+ background: pink; >+ border: 0px dotted black; >+ /* (Elements that want a border will set their border-width.) */ >+ } >+ .abs { >+ position: absolute; >+ top: 0; >+ font-size: 8px; >+ } >+ </style> >+</head> >+<body> >+ A >+ <div class="flexContainer">a</div> >+ <div class="flexContainer" style="padding-bottom: 20px">a</div> >+ <div class="flexContainer" style="padding: 10px">a</div> >+ <div class="flexContainer" style="border-width: 3px">a</div> >+ <div class="flexContainer" style="border-bottom-width: 4px">a</div> >+ <div class="flexContainer" style="padding: 4px"> >+ <!-- (An abspos child shouldn't prevent us from getting our baseline from >+ the first flex item, which happens to be the second child.) --> >+ <div class="abs">abs</div> >+ <div style="font: 26px serif">a</div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..523045894bbed0414922502f2d9fd3f2b666382e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001b.html >@@ -0,0 +1,54 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase for how we compute the baseline of a vertical flex container >+ with one flex item. This is the cross-axis baseline. The spec says this >+ about this case: >+ If the flex container has at least one flex item, and its >+ first flex item has a baseline parallel to the flex >+ container's cross axis, the flex container's cross-axis >+ baseline is that baseline. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing the baseline of a vertical flex container with one flex item</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines"> >+ <link rel="match" href="flexbox-baseline-single-item-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ body { >+ font: 14px serif; >+ } >+ .flexContainer { >+ display: inline-flex; >+ flex-direction: column; >+ height: 16px; >+ width: 16px; >+ background: pink; >+ border: 0px dotted black; >+ /* (Elements that want a border will set their border-width.) */ >+ } >+ .abs { >+ position: absolute; >+ top: 0; >+ font-size: 8px; >+ } >+ </style> >+</head> >+<body> >+ A >+ <div class="flexContainer">a</div> >+ <div class="flexContainer" style="padding-bottom: 20px">a</div> >+ <div class="flexContainer" style="padding: 10px">a</div> >+ <div class="flexContainer" style="border-width: 3px">a</div> >+ <div class="flexContainer" style="border-bottom-width: 4px">a</div> >+ <div class="flexContainer" style="padding: 4px"> >+ <!-- (An abspos child shouldn't prevent us from getting our baseline from >+ the first flex item, which happens to be the second child.) --> >+ <div class="abs">abs</div> >+ <div style="font: 26px serif">a</div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..9076e10816009918539b00c4fefa796e50cb6869 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001-expected.xhtml >@@ -0,0 +1,65 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ } >+ div.a { >+ display: inline-block; >+ background: lightgreen; >+ } >+ div.b { >+ display: inline-block; >+ background: yellow; >+ } >+ div.c { >+ display: inline-block; >+ background: orange; >+ } >+ div.auto { >+ display: inline-block; >+ background: pink; >+ } >+ div.inflex { >+ display: inline-block; >+ background: gray; >+ } >+ div.spacer { >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="width: 80px"/><div class="b" style="width: 120px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 62.5px"/><div class="c" style="width: 137.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 185px"/><div class="auto"> >+ <div class="spacer" style="width: 15px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 76px"/><div class="c" style="width: 124px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 170px"/><div class="auto"> >+ <div class="spacer" style="width: 30px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 45px"/><div class="b" style="width: 50px" >+ /><div class="inflex" style="width: 20px"/><div class="c" style="width: 85px"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..1345263df3971064483dbfbdc3bef29a76f06bcd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml >@@ -0,0 +1,65 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with blocks as flex items in a horizontal flex container, with >+ various "flex" values and various combinations of the items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ font-size: 10px; >+ display: flex; >+ } >+ div.a { >+ flex: 1 0 30px; >+ background: lightgreen; >+ } >+ div.b { >+ flex: 2 0 20px; >+ background: yellow; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ } >+ div.spacer { >+ display: inline-block; >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001v-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001v-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..9076e10816009918539b00c4fefa796e50cb6869 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001v-expected.xhtml >@@ -0,0 +1,65 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ } >+ div.a { >+ display: inline-block; >+ background: lightgreen; >+ } >+ div.b { >+ display: inline-block; >+ background: yellow; >+ } >+ div.c { >+ display: inline-block; >+ background: orange; >+ } >+ div.auto { >+ display: inline-block; >+ background: pink; >+ } >+ div.inflex { >+ display: inline-block; >+ background: gray; >+ } >+ div.spacer { >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="width: 80px"/><div class="b" style="width: 120px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 62.5px"/><div class="c" style="width: 137.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 185px"/><div class="auto"> >+ <div class="spacer" style="width: 15px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 76px"/><div class="c" style="width: 124px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 170px"/><div class="auto"> >+ <div class="spacer" style="width: 30px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 45px"/><div class="b" style="width: 50px" >+ /><div class="inflex" style="width: 20px"/><div class="c" style="width: 85px"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..f1dfdfdb86ca172056183534cf7c1d906b4c5d6f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml >@@ -0,0 +1,73 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with blocks as flex items in a horizontal flex container, with >+ various "flex" values and various combinations of the items >+ and with various writing-modes on the items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title> >+ CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container >+ (with various writing-modes on the flex items). >+ </title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ font-size: 10px; >+ display: flex; >+ } >+ div.a { >+ flex: 1 0 30px; >+ background: lightgreen; >+ writing-mode: vertical-lr; >+ } >+ div.b { >+ flex: 2 0 20px; >+ background: yellow; >+ writing-mode: vertical-rl; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ writing-mode: sideways-lr; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ writing-mode: vertical-lr; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ writing-mode: sideways-rl; >+ } >+ div.spacer { >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..c8a6ae4d338352f163289cca50267ff046744fd7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001-expected.xhtml >@@ -0,0 +1,60 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { width: 50px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ float: left; >+ } >+ div.a { >+ background: lightgreen; >+ } >+ div.b { >+ background: yellow; >+ } >+ div.c { >+ background: orange; >+ } >+ div.auto { >+ background: pink; >+ } >+ div.inflex { >+ background: gray; >+ } >+ div.spacer { >+ width: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="height: 80px"/><div class="b" style="height: 120px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="height: 62.5px"/><div class="c" style="height: 137.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="height: 185px"/><div class="auto"> >+ <div class="spacer" style="height: 15px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="height: 76px"/><div class="c" style="height: 124px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="height: 170px"/><div class="auto"> >+ <div class="spacer" style="height: 30px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="height: 45px"/><div class="b" style="height: 50px" >+ /><div class="inflex" style="height: 20px"/><div class="c" style="height: 85px"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..92c32c828caab079e80226fbcf9dae88589f3357 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001.xhtml >@@ -0,0 +1,66 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with blocks as flex items in a vertical flex container, with >+ various "flex" values and various combinations of the items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/> >+ <style> >+ div { width: 50px; } >+ div.flexbox { >+ float: left; >+ border: 1px dashed blue; >+ height: 200px; >+ font-size: 10px; >+ display: flex; >+ flex-direction: column; >+ } >+ div.a { >+ flex: 1 0 30px; >+ background: lightgreen; >+ } >+ div.b { >+ flex: 2 0 20px; >+ background: yellow; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ } >+ div.spacer { >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001v-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001v-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..c8a6ae4d338352f163289cca50267ff046744fd7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001v-expected.xhtml >@@ -0,0 +1,60 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { width: 50px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ float: left; >+ } >+ div.a { >+ background: lightgreen; >+ } >+ div.b { >+ background: yellow; >+ } >+ div.c { >+ background: orange; >+ } >+ div.auto { >+ background: pink; >+ } >+ div.inflex { >+ background: gray; >+ } >+ div.spacer { >+ width: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="height: 80px"/><div class="b" style="height: 120px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="height: 62.5px"/><div class="c" style="height: 137.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="height: 185px"/><div class="auto"> >+ <div class="spacer" style="height: 15px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="height: 76px"/><div class="c" style="height: 124px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="height: 170px"/><div class="auto"> >+ <div class="spacer" style="height: 30px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="height: 45px"/><div class="b" style="height: 50px" >+ /><div class="inflex" style="height: 20px"/><div class="c" style="height: 85px"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..da943dfc56f32501f743a0f43fc40416b8a054c4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml >@@ -0,0 +1,75 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with blocks as flex items in a vertical flex container, with >+ various "flex" values and various combinations of the items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title> >+ CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container >+ (with various writing-modes on the flex items). >+ </title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/> >+ <style> >+ div { width: 50px; } >+ div.flexbox { >+ float: left; >+ border: 1px dashed blue; >+ height: 200px; >+ font-size: 10px; >+ display: flex; >+ flex-direction: column; >+ } >+ div.a { >+ flex: 1 0 30px; >+ background: lightgreen; >+ writing-mode: vertical-lr; >+ } >+ div.b { >+ flex: 2 0 20px; >+ background: yellow; >+ writing-mode: vertical-rl; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ writing-mode: sideways-lr; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ writing-mode: vertical-lr; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ writing-mode: sideways-rl; >+ } >+ div.spacer { >+ display: inline-block; >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..274ac15fcd348463db10863f9d04b0b746edd091 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001-expected.xhtml >@@ -0,0 +1,60 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ canvas { >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <canvas/> >+ </div> >+ >+ <div class="flexbox" style="height: 22px"> >+ some words >+ <canvas style="float:right"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="width: 122.5px" >+ /><canvas style="width: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="width: 93px" >+ /><canvas style="width: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="width: 114px" >+ /><canvas style="width: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="width: 106px" >+ /><canvas style="width: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="width: 46px" >+ /><canvas style="width: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..6d3629e3267bfc74cf42eff2f6b7b53a6c0807d5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml >@@ -0,0 +1,101 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that canvas elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ canvas { >+ min-width: 0; >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <canvas/> >+ </div> >+ >+ <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> >+ <div class="flexbox"> >+ some words <canvas/> >+ </div> >+ >+ <!-- C) Two canvas elements, getting stretched by different ratios, from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <canvas style="flex: 5"/> >+ <canvas style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two canvas elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <canvas style="width: 33px; flex: 2 auto"/> >+ <canvas style="width: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <canvas style="width: 150px; flex: 1 4 auto"/> >+ <canvas style="width: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-width --> >+ <!-- Same as (D), except we've added a max-width on the second element. >+ --> >+ <div class="flexbox"> >+ <canvas style="width: 33px; flex: 2 auto"/> >+ <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-width --> >+ <!-- Same as (C), except we've added a min-width on the second element. >+ --> >+ <div class="flexbox"> >+ <canvas style="width: 33px; flex: 2 auto"/> >+ <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..274ac15fcd348463db10863f9d04b0b746edd091 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v-expected.xhtml >@@ -0,0 +1,60 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ canvas { >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <canvas/> >+ </div> >+ >+ <div class="flexbox" style="height: 22px"> >+ some words >+ <canvas style="float:right"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="width: 122.5px" >+ /><canvas style="width: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="width: 93px" >+ /><canvas style="width: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="width: 114px" >+ /><canvas style="width: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="width: 106px" >+ /><canvas style="width: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="width: 46px" >+ /><canvas style="width: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..ad623d77f7ffc72cf69d97b0c717db70a33cea38 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml >@@ -0,0 +1,105 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that canvas elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title> >+ CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container >+ (with a vertical writing-mode on the canvas flex items). >+ </title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ canvas { >+ min-width: 0; >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ writing-mode: vertical-lr; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <canvas/> >+ </div> >+ >+ <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> >+ <div class="flexbox"> >+ some words <canvas/> >+ </div> >+ >+ <!-- C) Two canvas elements, getting stretched by different ratios, from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <canvas style="flex: 5"/> >+ <canvas style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two canvas elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <canvas style="width: 33px; flex: 2 auto"/> >+ <canvas style="width: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <canvas style="width: 150px; flex: 1 4 auto"/> >+ <canvas style="width: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-width --> >+ <!-- Same as (D), except we've added a max-width on the second element. >+ --> >+ <div class="flexbox"> >+ <canvas style="width: 33px; flex: 2 auto"/> >+ <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-width --> >+ <!-- Same as (C), except we've added a min-width on the second element. >+ --> >+ <div class="flexbox"> >+ <canvas style="width: 33px; flex: 2 auto"/> >+ <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..232ae9e7674c55b1bc7de6a4f972a7f23000e4ca >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001-expected.xhtml >@@ -0,0 +1,64 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ width: 22px; >+ float: left; >+ margin-right: 10px; >+ background: lightgreen; >+ line-height: 0; >+ } >+ canvas { >+ width: 20px; >+ height: 10px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <canvas/> >+ </div> >+ >+ <div class="flexbox"> >+ <div style="font: 8px monospace; height: 188px"> >+ a b >+ </div> >+ <canvas/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="height: 122.5px" >+ /><canvas style="height: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="height: 93px" >+ /><canvas style="height: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="height: 114px" >+ /><canvas style="height: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="height: 106px" >+ /><canvas style="height: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="height: 46px" >+ /><canvas style="height: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..1bae704384c2347ed5881d5f769111c11ef5556d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml >@@ -0,0 +1,103 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that canvas elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ flex-direction: column; >+ float: left; >+ margin-right: 10px; >+ font: 8px monospace; >+ } >+ canvas { >+ width: 20px; >+ height: 10px; >+ min-height: 0; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <canvas/> >+ </div> >+ >+ <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> >+ <div class="flexbox"> >+ a b <canvas/> >+ </div> >+ >+ <!-- C) Two canvas elements, getting stretched by different ratios, from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <canvas style="flex: 5"/> >+ <canvas style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two canvas elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <canvas style="height: 33px; flex: 2 auto"/> >+ <canvas style="height: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <canvas style="height: 150px; flex: 1 4 auto"/> >+ <canvas style="height: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-height --> >+ <!-- Same as (D), except we've added a max-height on the second element. >+ --> >+ <div class="flexbox"> >+ <canvas style="height: 33px; flex: 2 auto"/> >+ <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-height --> >+ <!-- Same as (C), except we've added a min-height on the second element. >+ --> >+ <div class="flexbox"> >+ <canvas style="height: 33px; flex: 2 auto"/> >+ <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..232ae9e7674c55b1bc7de6a4f972a7f23000e4ca >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v-expected.xhtml >@@ -0,0 +1,64 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ width: 22px; >+ float: left; >+ margin-right: 10px; >+ background: lightgreen; >+ line-height: 0; >+ } >+ canvas { >+ width: 20px; >+ height: 10px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <canvas/> >+ </div> >+ >+ <div class="flexbox"> >+ <div style="font: 8px monospace; height: 188px"> >+ a b >+ </div> >+ <canvas/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="height: 122.5px" >+ /><canvas style="height: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="height: 93px" >+ /><canvas style="height: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="height: 114px" >+ /><canvas style="height: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="height: 106px" >+ /><canvas style="height: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <canvas style="height: 46px" >+ /><canvas style="height: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..057f63ae62bf430e089851e112a34280abeed6fd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml >@@ -0,0 +1,107 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that canvas elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title> >+ CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container >+ (with a vertical writing-mode on the canvas flex items). >+ </title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ flex-direction: column; >+ float: left; >+ margin-right: 10px; >+ font: 8px monospace; >+ } >+ canvas { >+ width: 20px; >+ height: 10px; >+ min-height: 0; >+ border: 1px dotted green; >+ writing-mode: vertical-lr; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <canvas/> >+ </div> >+ >+ <!-- B) Text and a canvas (ensure they aren't merged into one flex item) --> >+ <div class="flexbox"> >+ a b <canvas/> >+ </div> >+ >+ <!-- C) Two canvas elements, getting stretched by different ratios, from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <canvas style="flex: 5"/> >+ <canvas style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two canvas elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <canvas style="height: 33px; flex: 2 auto"/> >+ <canvas style="height: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <canvas style="height: 150px; flex: 1 4 auto"/> >+ <canvas style="height: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-height --> >+ <!-- Same as (D), except we've added a max-height on the second element. >+ --> >+ <div class="flexbox"> >+ <canvas style="height: 33px; flex: 2 auto"/> >+ <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-height --> >+ <!-- Same as (C), except we've added a min-height on the second element. >+ --> >+ <div class="flexbox"> >+ <canvas style="height: 33px; flex: 2 auto"/> >+ <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..edb4a42f2e342dba684eba6e1657f62d80e27414 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001-expected.xhtml >@@ -0,0 +1,65 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ margin-bottom: 5px; >+ line-height: 8px; >+ clear: all; >+ height: 22px; >+ } >+ fieldset { >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ margin: 0; >+ padding: 0; >+ float: left; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <fieldset/> >+ </div> >+ >+ <div class="flexbox" style="height: 22px"> >+ some words >+ <fieldset style="float:right"/> >+ </div> >+ >+ <div class="flexbox"> >+ <fieldset style="width: 122.5px" >+ /><fieldset style="width: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <fieldset style="width: 93px" >+ /><fieldset style="width: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <fieldset style="width: 114px" >+ /><fieldset style="width: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <fieldset style="width: 106px" >+ /><fieldset style="width: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <fieldset style="width: 46px" >+ /><fieldset style="width: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..8a504859dccc86944743b3976a7bd42653b9f6d3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml >@@ -0,0 +1,105 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that fieldset elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on fieldset flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-fieldset-horiz-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ fieldset { >+ min-width: 0; >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ margin: 0; >+ padding: 0; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <fieldset/> >+ </div> >+ >+ <!-- B) Text and a fieldset (ensure they aren't merged into one flex item) >+ --> >+ <div class="flexbox"> >+ some words <fieldset/> >+ </div> >+ >+ <!-- C) Two fieldset elements, getting stretched by different ratios, >+ from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <fieldset style="flex: 5"/> >+ <fieldset style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two fieldset elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <fieldset style="width: 33px; flex: 2 auto"/> >+ <fieldset style="width: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <fieldset style="width: 150px; flex: 1 4 auto"/> >+ <fieldset style="width: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-width --> >+ <!-- Same as (D), except we've added a max-width on the second element. >+ --> >+ <div class="flexbox"> >+ <fieldset style="width: 33px; flex: 2 auto"/> >+ <fieldset style="width: 13px; max-width: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-width --> >+ <!-- Same as (C), except we've added a min-width on the second element. >+ --> >+ <div class="flexbox"> >+ <fieldset style="width: 33px; flex: 2 auto"/> >+ <fieldset style="width: 13px; min-width: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-vert-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-vert-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..41b1930197f49c99e09c0a492604e78c1d097c0c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-vert-001-expected.xhtml >@@ -0,0 +1,66 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ width: 22px; >+ float: left; >+ margin-right: 10px; >+ background: lightgreen; >+ line-height: 0; >+ } >+ fieldset { >+ width: 20px; >+ height: 10px; >+ border: 1px dotted green; >+ margin: 0; >+ padding: 0; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <fieldset/> >+ </div> >+ >+ <div class="flexbox"> >+ <div style="font: 8px monospace; height: 188px"> >+ a b >+ </div> >+ <fieldset/> >+ </div> >+ >+ <div class="flexbox"> >+ <fieldset style="height: 122.5px" >+ /><fieldset style="height: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <fieldset style="height: 93px" >+ /><fieldset style="height: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <fieldset style="height: 114px" >+ /><fieldset style="height: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <fieldset style="height: 106px" >+ /><fieldset style="height: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <fieldset style="height: 46px" >+ /><fieldset style="height: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..75d592f4cb90358cfb44098c028e1c6fc83c2ef7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml >@@ -0,0 +1,107 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that fieldset elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on fieldset flex items in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-fieldset-vert-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ flex-direction: column; >+ float: left; >+ margin-right: 10px; >+ font: 8px monospace; >+ } >+ fieldset { >+ width: 20px; >+ height: 10px; >+ min-height: 0; >+ border: 1px dotted green; >+ margin: 0; >+ padding: 0; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <fieldset/> >+ </div> >+ >+ <!-- B) Text and a fieldset (ensure they aren't merged into one flex item) >+ --> >+ <div class="flexbox"> >+ a b <fieldset/> >+ </div> >+ >+ <!-- C) Two fieldset elements, getting stretched by different ratios, >+ from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <fieldset style="flex: 5"/> >+ <fieldset style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two fieldset elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <fieldset style="height: 33px; flex: 2 auto"/> >+ <fieldset style="height: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <fieldset style="height: 150px; flex: 1 4 auto"/> >+ <fieldset style="height: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-height --> >+ <!-- Same as (D), except we've added a max-height on the second element. >+ --> >+ <div class="flexbox"> >+ <fieldset style="height: 33px; flex: 2 auto"/> >+ <fieldset style="height: 13px; max-height: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-height --> >+ <!-- Same as (C), except we've added a min-height on the second element. >+ --> >+ <div class="flexbox"> >+ <fieldset style="height: 33px; flex: 2 auto"/> >+ <fieldset style="height: 13px; min-height: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-horiz-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-horiz-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..bee1ae0bf31fc858a8c43985acbafa87af1d8271 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-horiz-001-expected.xhtml >@@ -0,0 +1,60 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ iframe { >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <iframe/> >+ </div> >+ >+ <div class="flexbox" style="height: 22px"> >+ some words >+ <iframe style="float:right"/> >+ </div> >+ >+ <div class="flexbox"> >+ <iframe style="width: 122.5px" >+ /><iframe style="width: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <iframe style="width: 93px" >+ /><iframe style="width: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <iframe style="width: 114px" >+ /><iframe style="width: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <iframe style="width: 106px" >+ /><iframe style="width: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <iframe style="width: 46px" >+ /><iframe style="width: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..323b065199e1ca5c256ad7cd6b05927b00aa4be6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml >@@ -0,0 +1,102 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that iframe elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on iframe flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-iframe-horiz-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ iframe { >+ min-width: 0; >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <iframe/> >+ </div> >+ >+ <!-- B) Text and an iframe (ensure they aren't merged into one flex item) >+ --> >+ <div class="flexbox"> >+ some words <iframe/> >+ </div> >+ >+ <!-- C) Two iframe elements, getting stretched by different ratios, from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <iframe style="flex: 5"/> >+ <iframe style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two iframe elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <iframe style="width: 33px; flex: 2 auto"/> >+ <iframe style="width: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <iframe style="width: 150px; flex: 1 4 auto"/> >+ <iframe style="width: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-width --> >+ <!-- Same as (D), except we've added a max-width on the second element. >+ --> >+ <div class="flexbox"> >+ <iframe style="width: 33px; flex: 2 auto"/> >+ <iframe style="width: 13px; max-width: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-width --> >+ <!-- Same as (C), except we've added a min-width on the second element. >+ --> >+ <div class="flexbox"> >+ <iframe style="width: 33px; flex: 2 auto"/> >+ <iframe style="width: 13px; min-width: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..7737008f18d2e827f1579f59e786fc8b32f83507 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001-expected.xhtml >@@ -0,0 +1,64 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ width: 22px; >+ float: left; >+ margin-right: 10px; >+ background: lightgreen; >+ line-height: 0; >+ } >+ iframe { >+ width: 20px; >+ height: 10px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <iframe/> >+ </div> >+ >+ <div class="flexbox"> >+ <div style="font: 8px monospace; height: 188px"> >+ a b >+ </div> >+ <iframe/> >+ </div> >+ >+ <div class="flexbox"> >+ <iframe style="height: 122.5px" >+ /><iframe style="height: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <iframe style="height: 93px" >+ /><iframe style="height: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <iframe style="height: 114px" >+ /><iframe style="height: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <iframe style="height: 106px" >+ /><iframe style="height: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <iframe style="height: 46px" >+ /><iframe style="height: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..8b227c67c4a2287817aed818f3d756d15217ff9d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml >@@ -0,0 +1,104 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that iframe elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on iframe flex items in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-iframe-vert-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ flex-direction: column; >+ float: left; >+ margin-right: 10px; >+ font: 8px monospace; >+ } >+ iframe { >+ width: 20px; >+ height: 10px; >+ min-height: 0; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <iframe/> >+ </div> >+ >+ <!-- B) Text and an iframe (ensure they aren't merged into one flex item) >+ --> >+ <div class="flexbox"> >+ a b <iframe/> >+ </div> >+ >+ <!-- C) Two iframe elements, getting stretched by different ratios, from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <iframe style="flex: 5"/> >+ <iframe style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two iframe elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <iframe style="height: 33px; flex: 2 auto"/> >+ <iframe style="height: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <iframe style="height: 150px; flex: 1 4 auto"/> >+ <iframe style="height: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-height --> >+ <!-- Same as (D), except we've added a max-height on the second element. >+ --> >+ <div class="flexbox"> >+ <iframe style="height: 33px; flex: 2 auto"/> >+ <iframe style="height: 13px; max-height: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-height --> >+ <!-- Same as (C), except we've added a min-height on the second element. >+ --> >+ <div class="flexbox"> >+ <iframe style="height: 33px; flex: 2 auto"/> >+ <iframe style="height: 13px; min-height: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-horiz-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-horiz-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..a6cd54312466eb4c7c6621a9f198e7383b4c40f8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-horiz-001-expected.xhtml >@@ -0,0 +1,60 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ img { >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <img src="support/solidblue.png"/> >+ </div> >+ >+ <div class="flexbox" style="height: 22px"> >+ some words >+ <img src="support/solidblue.png" style="float:right"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="width: 122.5px" >+ /><img src="support/solidblue.png" style="width: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="width: 93px" >+ /><img src="support/solidblue.png" style="width: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="width: 114px" >+ /><img src="support/solidblue.png" style="width: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="width: 106px" >+ /><img src="support/solidblue.png" style="width: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="width: 46px" >+ /><img src="support/solidblue.png" style="width: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b5f3a6fce640a2af6a5e9d0ed1176c0d7e272633 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml >@@ -0,0 +1,103 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that img elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on img flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-img-horiz-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ img { >+ min-width: 0; >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png"/> >+ </div> >+ >+ <!-- B) Text and an img (ensure they aren't merged into one flex item) --> >+ <div class="flexbox"> >+ some words <img src="support/solidblue.png"/> >+ </div> >+ >+ <!-- C) Two img elements, getting stretched by different ratios, from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="flex: 5"/> >+ <img src="support/solidblue.png" style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two img elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/> >+ <img src="support/solidblue.png" style="width: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="width: 150px; flex: 1 4 auto"/> >+ <img src="support/solidblue.png" style="width: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-width --> >+ <!-- Same as (D), except we've added a max-width on the second element. >+ --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/> >+ <img src="support/solidblue.png" >+ style="width: 13px; max-width: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-width --> >+ <!-- Same as (C), except we've added a min-width on the second element. >+ --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/> >+ <img src="support/solidblue.png" >+ style="width: 13px; min-width: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..09c7fc87fbc6d6201455c569ec5e4da2cfd97c18 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001-expected.xhtml >@@ -0,0 +1,64 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ width: 22px; >+ float: left; >+ margin-right: 10px; >+ background: lightgreen; >+ line-height: 0; >+ } >+ img { >+ width: 20px; >+ height: 10px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <img src="support/solidblue.png"/> >+ </div> >+ >+ <div class="flexbox"> >+ <div style="font: 8px monospace; height: 188px"> >+ a b >+ </div> >+ <img src="support/solidblue.png"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="height: 122.5px" >+ /><img src="support/solidblue.png" style="height: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="height: 93px" >+ /><img src="support/solidblue.png" style="height: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="height: 114px" >+ /><img src="support/solidblue.png" style="height: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="height: 106px" >+ /><img src="support/solidblue.png" style="height: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="height: 46px" >+ /><img src="support/solidblue.png" style="height: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..e2949b1e327e433bef6d5df623c4f1e86c5e9122 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001.xhtml >@@ -0,0 +1,105 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that img elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on img flex items in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-img-vert-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ flex-direction: column; >+ float: left; >+ margin-right: 10px; >+ font: 8px monospace; >+ } >+ img { >+ width: 20px; >+ height: 10px; >+ min-height: 0; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png"/> >+ </div> >+ >+ <!-- B) Text and an img (ensure they aren't merged into one flex item) --> >+ <div class="flexbox"> >+ a b <img src="support/solidblue.png"/> >+ </div> >+ >+ <!-- C) Two img elements, getting stretched by different ratios, from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="flex: 5"/> >+ <img src="support/solidblue.png" style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two img elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/> >+ <img src="support/solidblue.png" style="height: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="height: 150px; flex: 1 4 auto"/> >+ <img src="support/solidblue.png" style="height: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-height --> >+ <!-- Same as (D), except we've added a max-height on the second element. >+ --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/> >+ <img src="support/solidblue.png" >+ style="height: 13px; max-height: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-height --> >+ <!-- Same as (C), except we've added a min-height on the second element. >+ --> >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/> >+ <img src="support/solidblue.png" >+ style="height: 13px; min-height: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-horiz-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-horiz-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..7ea5a05d8c0f9f90bd75f2057dabd4b7483a85dc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-horiz-001-expected.xhtml >@@ -0,0 +1,65 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ textarea { >+ width: 10px; >+ height: 20px; >+ background: white; >+ border-radius: 0; >+ border: 1px dotted green; >+ padding: 0; >+ margin: 0; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <textarea/> >+ </div> >+ >+ <div class="flexbox" >+ style="height: 22px"><!-- height of textarea's border-box --> >+ some words >+ <textarea style="float:right"/> >+ </div> >+ >+ <div class="flexbox"> >+ <textarea style="width: 122.5px" >+ /><textarea style="width: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <textarea style="width: 93px" >+ /><textarea style="width: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <textarea style="width: 114px" >+ /><textarea style="width: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <textarea style="width: 106px" >+ /><textarea style="width: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <textarea style="width: 46px" >+ /><textarea style="width: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..7906d242afa3ce8497b3b4bfcdc667ead27ee515 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml >@@ -0,0 +1,109 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that textarea elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on textarea flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-textarea-horiz-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ textarea { >+ min-width: 0; >+ width: 10px; >+ height: 20px; >+ background: white; >+ border-radius: 0; >+ border: 1px dotted green; >+ padding: 0; >+ margin: 0; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <textarea/> >+ </div> >+ >+ <!-- B) Text and a textarea (ensure they aren't merged into one flex item) >+ --> >+ <div class="flexbox"> >+ some words <textarea/> >+ </div> >+ >+ <!-- C) Two textarea elements, getting stretched by different ratios, >+ from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <textarea style="flex: 5"/> >+ <textarea style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two textarea elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <textarea style="width: 33px; flex: 2 auto"/> >+ <textarea style="width: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <textarea style="width: 150px; flex: 1 4 auto"/> >+ <textarea style="width: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-width --> >+ <!-- Same as (D), except we've added a max-width on the second element. >+ --> >+ <div class="flexbox"> >+ <textarea style="width: 33px; flex: 2 auto"/> >+ <textarea >+ style="width: 13px; max-width: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-width --> >+ <!-- Same as (C), except we've added a min-width on the second element. >+ --> >+ <div class="flexbox"> >+ <textarea style="width: 33px; flex: 2 auto"/> >+ <textarea >+ style="width: 13px; min-width: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..dbef1eac5480fd07691d649a02ca6105e231fc91 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001-expected.xhtml >@@ -0,0 +1,68 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ width: 22px; >+ float: left; >+ margin-right: 10px; >+ background: lightgreen; >+ line-height: 0; >+ } >+ textarea { >+ width: 20px; >+ height: 10px; >+ background: white; >+ border-radius: 0; >+ border: 1px dotted green; >+ margin: 0; >+ padding: 0; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <textarea/> >+ </div> >+ >+ <div class="flexbox"> >+ <div style="font: 8px monospace; height: 188px"> >+ a b >+ </div> >+ <textarea/> >+ </div> >+ >+ <div class="flexbox"> >+ <textarea style="height: 122.5px" >+ /><textarea style="height: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <textarea style="height: 93px" >+ /><textarea style="height: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <textarea style="height: 114px" >+ /><textarea style="height: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <textarea style="height: 106px" >+ /><textarea style="height: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <textarea style="height: 46px" >+ /><textarea style="height: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..a935a101df4ba4f04db4e6bc033849b2a4d9e678 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml >@@ -0,0 +1,111 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that textarea elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on textarea flex items in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-textarea-vert-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ flex-direction: column; >+ float: left; >+ margin-right: 10px; >+ font: 8px monospace; >+ } >+ textarea { >+ width: 20px; >+ height: 10px; >+ min-height: 0; >+ background: white; >+ border-radius: 0; >+ border: 1px dotted green; >+ margin: 0; >+ padding: 0; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <textarea/> >+ </div> >+ >+ <!-- B) Text and a textarea (ensure they aren't merged into one flex item) >+ --> >+ <div class="flexbox"> >+ a b <textarea/> >+ </div> >+ >+ <!-- C) Two textarea elements, getting stretched by different ratios, >+ from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <textarea style="flex: 5"/> >+ <textarea style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two textarea elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <textarea style="height: 33px; flex: 2 auto"/> >+ <textarea style="height: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <textarea style="height: 150px; flex: 1 4 auto"/> >+ <textarea style="height: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-height --> >+ <!-- Same as (D), except we've added a max-height on the second element. >+ --> >+ <div class="flexbox"> >+ <textarea style="height: 33px; flex: 2 auto"/> >+ <textarea >+ style="height: 13px; max-height: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-height --> >+ <!-- Same as (C), except we've added a min-height on the second element. >+ --> >+ <div class="flexbox"> >+ <textarea style="height: 33px; flex: 2 auto"/> >+ <textarea >+ style="height: 13px; min-height: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-horiz-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-horiz-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..e37920f17c092d85aaabbc0dcee293620f953d0f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-horiz-001-expected.xhtml >@@ -0,0 +1,60 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ video { >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <video/> >+ </div> >+ >+ <div class="flexbox" style="height: 22px"> >+ some words >+ <video style="float:right"/> >+ </div> >+ >+ <div class="flexbox"> >+ <video style="width: 122.5px" >+ /><video style="width: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <video style="width: 93px" >+ /><video style="width: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <video style="width: 114px" >+ /><video style="width: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <video style="width: 106px" >+ /><video style="width: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <video style="width: 46px" >+ /><video style="width: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..c976ccffbde87be226de794e9c7c0fad63e3bdba >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml >@@ -0,0 +1,101 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that video elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on video flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-video-horiz-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ margin-bottom: 5px; >+ line-height: 8px; >+ } >+ video { >+ min-width: 0; >+ width: 10px; >+ height: 20px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <video/> >+ </div> >+ >+ <!-- B) Text and a video (ensure they aren't merged into one flex item) --> >+ <div class="flexbox"> >+ some words <video/> >+ </div> >+ >+ <!-- C) Two video elements, getting stretched by different ratios, from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <video style="flex: 5"/> >+ <video style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two video elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <video style="width: 33px; flex: 2 auto"/> >+ <video style="width: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <video style="width: 150px; flex: 1 4 auto"/> >+ <video style="width: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-width --> >+ <!-- Same as (D), except we've added a max-width on the second element. >+ --> >+ <div class="flexbox"> >+ <video style="width: 33px; flex: 2 auto"/> >+ <video style="width: 13px; max-width: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-width --> >+ <!-- Same as (C), except we've added a min-width on the second element. >+ --> >+ <div class="flexbox"> >+ <video style="width: 33px; flex: 2 auto"/> >+ <video style="width: 13px; min-width: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..552d14e4c761a73f374f92f5d863c2e7e5705ea7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001-expected.xhtml >@@ -0,0 +1,64 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ width: 22px; >+ float: left; >+ margin-right: 10px; >+ background: lightgreen; >+ line-height: 0; >+ } >+ video { >+ width: 20px; >+ height: 10px; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <video/> >+ </div> >+ >+ <div class="flexbox"> >+ <div style="font: 8px monospace; height: 188px"> >+ a b >+ </div> >+ <video/> >+ </div> >+ >+ <div class="flexbox"> >+ <video style="height: 122.5px" >+ /><video style="height: 73.5px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <video style="height: 93px" >+ /><video style="height: 103px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <video style="height: 114px" >+ /><video style="height: 82px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <video style="height: 106px" >+ /><video style="height: 90px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <video style="height: 46px" >+ /><video style="height: 150px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b45f853e6081fc3685da88e89a08a015801482ab >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001.xhtml >@@ -0,0 +1,103 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test checks that video elements behave correctly as flex items. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing flexbox layout algorithm property on video flex items in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-basic-video-vert-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ background: lightgreen; >+ display: flex; >+ justify-content: space-between; >+ flex-direction: column; >+ float: left; >+ margin-right: 10px; >+ font: 8px monospace; >+ } >+ video { >+ width: 20px; >+ height: 10px; >+ min-height: 0; >+ border: 1px dotted green; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- A) One flex item --> >+ <div class="flexbox"> >+ <video/> >+ </div> >+ >+ <!-- B) Text and a video (ensure they aren't merged into one flex item) --> >+ <div class="flexbox"> >+ a b <video/> >+ </div> >+ >+ <!-- C) Two video elements, getting stretched by different ratios, from 0. >+ >+ Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1) >+ = 196px >+ >+ 1st element gets 5/8 of space: 5/8 * 196px = 122.5px >+ 1st element gets 3/8 of space: 3/8 * 196px = 73.5px >+ --> >+ <div class="flexbox"> >+ <video style="flex: 5"/> >+ <video style="flex: 3"/> >+ </div> >+ >+ <!-- D) Two video elements, getting stretched by different ratios, from >+ different flex bases. >+ >+ Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px >+ 1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px >+ 1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px >+ --> >+ <div class="flexbox"> >+ <video style="height: 33px; flex: 2 auto"/> >+ <video style="height: 13px; flex: 3 auto"/> >+ </div> >+ >+ <!-- E) Two flex items, getting shrunk by different amounts. >+ >+ Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px >+ First element scaled flex ratio = 4 * 150 = 600 >+ Second element scaled flex ratio = 3 * 100 = 300 >+ * So, total flexibility is 600 + 300 = 900 >+ >+ 1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px >+ 2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px >+ --> >+ <div class="flexbox"> >+ <video style="height: 150px; flex: 1 4 auto"/> >+ <video style="height: 100px; flex: 1 3 auto"/> >+ </div> >+ >+ <!-- F) Making sure we don't grow past max-height --> >+ <!-- Same as (D), except we've added a max-height on the second element. >+ --> >+ <div class="flexbox"> >+ <video style="height: 33px; flex: 2 auto"/> >+ <video style="height: 13px; max-height: 90px; flex: 3 auto"/> >+ </div> >+ >+ <!-- G) Making sure we grow at least as large as min-height --> >+ <!-- Same as (C), except we've added a min-height on the second element. >+ --> >+ <div class="flexbox"> >+ <video style="height: 33px; flex: 2 auto"/> >+ <video style="height: 13px; min-height: 150px; flex: 3 auto"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..642c1e3d1c996e66957e6a37fe8a137cec2bcdb4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a-expected.html >@@ -0,0 +1,98 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 60px; >+ height: 20px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ width: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.fullCrossSize { >+ height: 18px; >+ } >+ div.halfCrossSize { >+ height: 8px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize"></div> >+ <div class="item halfCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize"></div> >+ <div class="item halfCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize"></div> >+ <div class="item halfCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..613acd27ec46ee05ac05871c4532f15c916bcd84 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a.html >@@ -0,0 +1,108 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing page-break-before in horizontal multi-line flex containers</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> >+ <link rel="match" href="flexbox-break-request-horiz-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-wrap: wrap; >+ border: 1px dashed black; >+ width: 60px; >+ height: 20px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ width: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ <!-- page-break-before specified on first (and only) item, at a point where >+ we're already "breaking" (the beginning): --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-before specified on second item, at a point where breaking >+ would otherwise be unnecessary: --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-before specified on third item, at a point where breaking >+ is already necessary: --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..642c1e3d1c996e66957e6a37fe8a137cec2bcdb4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b-expected.html >@@ -0,0 +1,98 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 60px; >+ height: 20px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ width: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.fullCrossSize { >+ height: 18px; >+ } >+ div.halfCrossSize { >+ height: 8px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize"></div> >+ <div class="item halfCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize"></div> >+ <div class="item halfCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize"></div> >+ <div class="item halfCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3ef143639e44eecf46cde92454da06a119d6bed0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b.html >@@ -0,0 +1,108 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing page-break-after in horizontal multi-line flex containers</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> >+ <link rel="match" href="flexbox-break-request-horiz-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-wrap: wrap; >+ border: 1px dashed black; >+ width: 60px; >+ height: 20px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ width: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ <!-- page-break-after specified on first (and only) item, at a point where >+ we're already "breaking" (the end): --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: avoid"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-after specified on first item, at a point where breaking >+ would otherwise be unnecessary: --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: auto"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: avoid"></div> >+ <div class="item"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: always"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: left"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: right"></div> >+ <div class="item"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-after specified on second item, at a point where breaking >+ is already necessary: --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: auto"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: avoid"></div> >+ <div class="item"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: always"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: left"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: right"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..28943c5085c1b39279b56dfc1312bc6ff4a0a3d9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002a-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 60px; >+ height: 20px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ width: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.fullCrossSize { >+ height: 18px; >+ } >+ div.halfCrossSize { >+ height: 8px; >+ } >+ div.shrunkMainSize { >+ width: 18px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3bf1ac438b1c7e8faff4bce09a8154c59eb2ff23 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002a.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: Testing page-break-before in horizontal single-line flex containers (should have no effect)</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> >+ <link rel="match" href="flexbox-break-request-horiz-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ border: 1px dashed black; >+ width: 60px; >+ height: 20px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ width: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ <!-- page-break-before specified on first (and only) item, at a point where >+ we're already "breaking" (the beginning): --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-before specified on second item, at a point where breaking >+ would otherwise be unnecessary: --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-before specified on third item, at a point where breaking >+ is already necessary: --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..28943c5085c1b39279b56dfc1312bc6ff4a0a3d9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002b-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 60px; >+ height: 20px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ width: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.fullCrossSize { >+ height: 18px; >+ } >+ div.halfCrossSize { >+ height: 8px; >+ } >+ div.shrunkMainSize { >+ width: 18px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize" style="float: left"></div> >+ <div class="item fullCrossSize" style="float: left"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3a53dace61a5198000c4ef38dc04751ab0a698be >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002b.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: Testing page-break-after in horizontal single-line flex containers (should have no effect)</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> >+ <link rel="match" href="flexbox-break-request-horiz-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ border: 1px dashed black; >+ width: 60px; >+ height: 20px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ width: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ <!-- page-break-after specified on first (and only) item, at a point where >+ we're already "breaking" (the end): --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: avoid"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-after specified on first item, at a point where breaking >+ would otherwise be unnecessary: --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: auto"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: avoid"></div> >+ <div class="item"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: always"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: left"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: right"></div> >+ <div class="item"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-after specified on second item, at a point where breaking >+ is already necessary: --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: auto"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: avoid"></div> >+ <div class="item"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: always"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: left"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: right"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a9a286770bc8d5bfe054a84797af0eb5d8be45b9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a-expected.html >@@ -0,0 +1,98 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 20px; >+ height: 60px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ height: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.fullCrossSize { >+ width: 18px; >+ } >+ div.halfCrossSize { >+ width: 8px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5be8d5307bd55d87135793eb8f3e9c210ee8e692 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a.html >@@ -0,0 +1,109 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing page-break-before in vertical multi-line flex containers</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> >+ <link rel="match" href="flexbox-break-request-vert-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ border: 1px dashed black; >+ width: 20px; >+ height: 60px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ height: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ <!-- page-break-before specified on first (and only) item, at a point where >+ we're already "breaking" (the beginning): --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-before specified on second item, at a point where breaking >+ would otherwise be unnecessary: --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-before specified on third item, at a point where breaking >+ is already necessary: --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a9a286770bc8d5bfe054a84797af0eb5d8be45b9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b-expected.html >@@ -0,0 +1,98 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 20px; >+ height: 60px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ height: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.fullCrossSize { >+ width: 18px; >+ } >+ div.halfCrossSize { >+ width: 8px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ <div class="item halfCrossSize" style="float: left"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..87ba97a687e244b306901f3d6fec79aaf0a29a22 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b.html >@@ -0,0 +1,109 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing page-break-after in vertical multi-line flex containers</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> >+ <link rel="match" href="flexbox-break-request-vert-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ border: 1px dashed black; >+ width: 20px; >+ height: 60px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ height: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ <!-- page-break-after specified on first (and only) item, at a point where >+ we're already "breaking" (the end): --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: avoid"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-after specified on first item, at a point where breaking >+ would otherwise be unnecessary: --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: auto"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: avoid"></div> >+ <div class="item"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: always"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: left"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: right"></div> >+ <div class="item"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-after specified on second item, at a point where breaking >+ is already necessary: --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: auto"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: avoid"></div> >+ <div class="item"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: always"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: left"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: right"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..eeb8a4ea72da08cdc5bcefa77b7912f4da17d9bb >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002a-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 20px; >+ height: 60px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ height: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.fullCrossSize { >+ width: 18px; >+ } >+ div.halfCrossSize { >+ width: 8px; >+ } >+ div.shrunkMainSize { >+ height: 18px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..e68b98a5ae0844345764786677096780d43e093f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002a.html >@@ -0,0 +1,108 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing page-break-before in vertical single-line flex containers (should have no effect)</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> >+ <link rel="match" href="flexbox-break-request-vert-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-direction: column; >+ border: 1px dashed black; >+ width: 20px; >+ height: 60px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ height: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ <!-- page-break-before specified on first (and only) item, at a point where >+ we're already "breaking" (the beginning): --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-before specified on second item, at a point where breaking >+ would otherwise be unnecessary: --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-before specified on third item, at a point where breaking >+ is already necessary: --> >+ <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: avoid"></div> >+ </div> >+ <!-- * With 'page-break-before: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item" style="page-break-before: right"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..eeb8a4ea72da08cdc5bcefa77b7912f4da17d9bb >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002b-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 20px; >+ height: 60px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ height: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.fullCrossSize { >+ width: 18px; >+ } >+ div.halfCrossSize { >+ width: 8px; >+ } >+ div.shrunkMainSize { >+ height: 18px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize"></div> >+ <div class="item fullCrossSize"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ <div class="item fullCrossSize shrunkMainSize"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..cda5fecd44f3757dc23a3ef49549bebb37b9b433 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002b.html >@@ -0,0 +1,108 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing page-break-after in vertical single-line flex containers (should have no effect)</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> >+ <link rel="match" href="flexbox-break-request-vert-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-direction: column; >+ border: 1px dashed black; >+ width: 20px; >+ height: 60px; >+ margin: 2px; >+ float: left; >+ } >+ div.item { >+ height: 28px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ <!-- page-break-after specified on first (and only) item, at a point where >+ we're already "breaking" (the end): --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: auto"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: avoid"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: always"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: left"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: right"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-after specified on first item, at a point where breaking >+ would otherwise be unnecessary: --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: auto"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: avoid"></div> >+ <div class="item"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: always"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: left"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item" style="page-break-after: right"></div> >+ <div class="item"></div> >+ </div> >+ <div style="clear: both"></div> >+ >+ <!-- page-break-after specified on second item, at a point where breaking >+ is already necessary: --> >+ <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: auto"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: avoid"></div> >+ <div class="item"></div> >+ </div> >+ <!-- * With 'page-break-after: always, left, right' (requesting a break): --> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: always"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: left"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="item"></div> >+ <div class="item" style="page-break-after: right"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2aa1d74bfdba369783f5995051405bf4cabd08b2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001-expected.html >@@ -0,0 +1,63 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- In this reference case, we get each container to be sized the same as >+ in the testcase, without any visible baseline alignemnt, by using some >+ hidden flex items. >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 50px; >+ background: yellow; >+ border: 1px dotted black; >+ margin: 5px; >+ align-items: flex-start; >+ } >+ .hiddenItemForSizing { >+ width: 0; >+ min-width: 0; /* disable default min-width:auto behavior */ >+ color: transparent; >+ align-self: baseline; >+ } >+ .largeFont { >+ font-size: 20px; >+ background: lightblue; >+ /* Our flex items get padding on opposite sides (top/bottom) so that they >+ produce a large combined height when baseline-aligned: */ >+ padding-top: 5px; >+ } >+ .smallFont { >+ font-size: 10px; >+ background: pink; >+ /* Our flex items get padding on opposite sides (top/bottom) so that they >+ produce a large combined height when baseline-aligned: */ >+ padding-bottom: 20px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ <div class="largeFont">a</div> >+ <!-- Hidden flex items used to determine container's cross size, >+ based on their baseline-aligned combined cross size: --> >+ <div class="largeFont hiddenItemForSizing">a</div> >+ <div class="smallFont hiddenItemForSizing">b</div> >+ </div> >+ >+ <div class="flexContainer"> >+ <div class="smallFont">b</div> >+ <!-- Hidden flex items used to determine container's cross size, >+ based on their baseline-aligned combined cross size: --> >+ <div class="largeFont hiddenItemForSizing">a</div> >+ <div class="smallFont hiddenItemForSizing">b</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0ffa27761933548c8f0d122f700b7631031c6c15 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001.html >@@ -0,0 +1,54 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing that a collapsed flex item participates in baseline alignment only for the purpose of establishing container's cross size</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> >+ <link rel="match" href="flexbox-collapsed-item-baseline-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 50px; >+ background: yellow; >+ border: 1px dotted black; >+ margin: 5px; >+ align-items: baseline; >+ } >+ .collapse { >+ visibility: collapse; >+ } >+ .largeFont { >+ font-size: 20px; >+ background: lightblue; >+ /* Our flex items get padding on opposite sides (top/bottom) so that they >+ produce a large combined height when baseline-aligned: */ >+ padding-top: 5px; >+ } >+ .smallFont { >+ font-size: 10px; >+ background: pink; >+ /* Our flex items get padding on opposite sides (top/bottom) so that they >+ produce a large combined height when baseline-aligned: */ >+ padding-bottom: 20px; >+ } >+ </style> >+</head> >+<body> >+ <!-- Second item collapsed: --> >+ <div class="flexContainer"> >+ <div class="largeFont">a</div> >+ <div class="smallFont collapse">b</div> >+ </div> >+ >+ <!-- First item collapsed: --> >+ <div class="flexContainer"> >+ <div class="largeFont collapse">a</div> >+ <div class="smallFont">b</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..90131878421d0cea156226866bff2974342eb708 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-001-expected.html >@@ -0,0 +1,102 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- In this reference case, we have blocks in place of the testcase's >+ flex containers. The testcase's collapsed flex items are entirely >+ absent here (and the remaining content is sized using exact pixel >+ values). >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ background: yellow; >+ border: 1px dotted black; >+ float: left; >+ margin: 5px; >+ } >+ .flexContainer > * { >+ /* All flex items have 20px base size */ >+ width: 20px; >+ } >+ .collapse { >+ flex-basis: 0; >+ height: 20px; >+ } >+ .flexible { >+ flex: 1 auto; >+ } >+ .heightTall { >+ height: 40px; >+ background: purple; >+ } >+ .heightAuto { >+ background: teal; >+ } >+ .heightShort { >+ height: 10px; >+ background: pink; >+ } >+ </style> >+</head> >+<body> >+ <!-- FIRST ROW: --> >+ <!-- Just one (collapsed) flex item, which ends up establishing >+ the container's size (even though it's collapsed): --> >+ <div class="flexContainer"> >+ <div class="heightTall collapse"></div> >+ </div> >+ >+ <div style="clear: both"></div> >+ >+ <!-- SECOND ROW: --> >+ <!-- One collapsed flex item, one short flex item. >+ (Container ends up with collapsed item's height) --> >+ <div class="flexContainer"> >+ <div class="heightTall collapse"></div> >+ <div class="heightShort"></div> >+ </div> >+ <!-- (same, but with items in opposite order) --> >+ <div class="flexContainer"> >+ <div class="heightShort"></div> >+ <div class="heightTall collapse"></div> >+ </div> >+ >+ <div style="clear: both"></div> >+ >+ <!-- THIRD ROW: --> >+ <!-- One collapsed flex item, one stretched flex item. >+ (Container and stretched item end up with collapsed item's height) --> >+ <div class="flexContainer"> >+ <div class="heightTall collapse"></div> >+ <div class="heightAuto"></div> >+ </div> >+ <!-- (again, with items in opposite order) --> >+ <div class="flexContainer"> >+ <div class="heightAuto"></div> >+ <div class="heightTall collapse"></div> >+ </div> >+ >+ <div style="clear: both"></div> >+ >+ <!-- FOURTH ROW: --> >+ <!-- One collapsed flex item, one other flex item; both are flexible. >+ (The non-collapsed one should take all of the available width.) --> >+ <div class="flexContainer"> >+ <div class="heightAuto collapse"></div> >+ <div class="heightTall flexible"></div> >+ </div> >+ <!-- (again, with items in opposite order) --> >+ <div class="flexContainer"> >+ <div class="heightTall flexible"></div> >+ <div class="heightAuto collapse"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2c4385af8c8552e87c6d3c8a2a3064ab001992ea >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-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: Testing that visibility:collapse on a flex item in a single-line flex container maintains the containers's cross size, but doesn't otherwise impact flex layout</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> >+ <link rel="match" href="flexbox-collapsed-item-horiz-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ background: yellow; >+ border: 1px dotted black; >+ float: left; >+ margin: 5px; >+ } >+ .flexContainer > * { >+ /* All flex items have 20px base size */ >+ width: 20px; >+ } >+ .collapse { >+ visibility: collapse; >+ } >+ .flexible { >+ flex: 1 auto; >+ } >+ .heightTall { >+ height: 40px; >+ background: purple; >+ } >+ .heightAuto { >+ background: teal; >+ } >+ .heightShort { >+ height: 10px; >+ background: pink; >+ } >+ </style> >+</head> >+<body> >+ <!-- FIRST ROW: --> >+ <!-- Just one (collapsed) flex item, which ends up establishing >+ the container's size (even though it's collapsed): --> >+ <div class="flexContainer"> >+ <div class="heightTall collapse"></div> >+ </div> >+ >+ <div style="clear: both"></div> >+ >+ <!-- SECOND ROW: --> >+ <!-- One collapsed flex item, one short flex item. >+ (Container ends up with collapsed item's height) --> >+ <div class="flexContainer"> >+ <div class="heightTall collapse"></div> >+ <div class="heightShort"></div> >+ </div> >+ <!-- (same, but with items in opposite order) --> >+ <div class="flexContainer"> >+ <div class="heightShort"></div> >+ <div class="heightTall collapse"></div> >+ </div> >+ >+ <div style="clear: both"></div> >+ >+ <!-- THIRD ROW: --> >+ <!-- One collapsed flex item, one stretched flex item. >+ (Container and stretched item end up with collapsed item's height) --> >+ <div class="flexContainer"> >+ <div class="heightTall collapse"></div> >+ <div class="heightAuto"></div> >+ </div> >+ <!-- (again, with items in opposite order) --> >+ <div class="flexContainer"> >+ <div class="heightAuto"></div> >+ <div class="heightTall collapse"></div> >+ </div> >+ >+ <div style="clear: both"></div> >+ >+ <!-- FOURTH ROW: --> >+ <!-- One collapsed flex item, one other flex item; both are flexible. >+ (The non-collapsed one should take all of the available width.) --> >+ <div class="flexContainer"> >+ <div class="heightAuto flexible collapse"></div> >+ <div class="heightTall flexible"></div> >+ </div> >+ <!-- (again, with items in opposite order) --> >+ <div class="flexContainer"> >+ <div class="heightTall flexible"></div> >+ <div class="heightAuto flexible collapse"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a9040e306c8cf0b3d809fa0c3da743ecb2c6e006 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002-expected.html >@@ -0,0 +1,108 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ flex-wrap: wrap; >+ >+ /* These let us show where each flex line begins (and hence, how tall >+ the flex lines end up) */ >+ align-content: flex-start; >+ align-items: flex-start; >+ >+ width: 30px; >+ background: yellow; >+ border: 1px dotted black; >+ float: left; >+ margin: 5px; >+ } >+ .collapsedItem { >+ width: 0; >+ height: 25px; >+ } >+ .halfWidthItem { >+ width: 15px; >+ height: 15px; >+ background: teal; >+ } >+ .fullWidthItem { >+ width: 30px; >+ height: 20px; >+ background: purple; >+ } >+ .veryTallItem { >+ width: 15px; >+ height: 40px; >+ background: olive; >+ } >+ </style> >+</head> >+<body> >+ <!-- FIRST ROW: --> >+ <!-- One collapsed flex item, at the beginning of a flex line, which >+ ends up establishing its flex line's cross size: --> >+ <div class="flexContainer"> >+ <div class="collapsedItem"></div> >+ <div class="halfWidthItem"></div> >+ <div class="fullWidthItem"></div> >+ </div> >+ <!-- ...and now with it being at the end of that flex line: --> >+ <div class="flexContainer"> >+ <div class="halfWidthItem"></div> >+ <div class="collapsedItem"></div> >+ <div class="fullWidthItem"></div> >+ </div> >+ >+ <div style="clear: both"></div> >+ >+ <!-- SECOND ROW: --> >+ <!-- One collapsed flex item, initially in its own line. It ends >+ up being merged into another line after it collapses, due to its >+ (post-collapse) zero main-size. --> >+ <div class="flexContainer"> >+ <div class="collapsedItem"></div> >+ <div class="fullWidthItem"></div> >+ <div class="fullWidthItem"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="fullWidthItem"></div> >+ <div class="collapsedItem"></div> >+ <div class="fullWidthItem"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="fullWidthItem"></div> >+ <div class="fullWidthItem"></div> >+ <div class="collapsedItem"></div> >+ </div> >+ >+ <div style="clear: both"></div> >+ >+ <!-- THIRD ROW: --> >+ <!-- One collapsed flex item, initially in a line with an even-taller item. >+ The collapsed item ends up shifting into another line after it >+ collapses, but it carries the taller item's cross size with it, as its >+ strut size. --> >+ <div class="flexContainer"> >+ <div class="fullWidthItem"></div> >+ <div class="collapsedItem" style="height: 40px"></div> >+ <div class="veryTallItem"></div> >+ </div> >+ <!-- ...and now with two (differently-sized) struts in first line: >+ (the one that's taller - due to being initially grouped with the tall >+ item - wins out.) --> >+ <div class="flexContainer"> >+ <div class="collapsedItem"></div> >+ <div class="fullWidthItem"></div> >+ <div class="collapsedItem" style="height: 40px"></div> >+ <div class="veryTallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..97af3805ce92928b47b9ca9c2513e0a4715bbda9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002.html >@@ -0,0 +1,111 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing that visibility:collapse on a flex item in a multi-line flex container creates struts, and that they can migrate between lines</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> >+ <link rel="match" href="flexbox-collapsed-item-horiz-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ flex-wrap: wrap; >+ >+ /* These let us show where each flex line begins (and hence, how tall >+ the flex lines end up) */ >+ align-content: flex-start; >+ align-items: flex-start; >+ >+ width: 30px; >+ background: yellow; >+ border: 1px dotted black; >+ float: left; >+ margin: 5px; >+ } >+ .collapsedItem { >+ visibility: collapse; >+ width: 15px; >+ height: 25px; >+ } >+ .halfWidthItem { >+ width: 15px; >+ height: 15px; >+ background: teal; >+ } >+ .fullWidthItem { >+ width: 30px; >+ height: 20px; >+ background: purple; >+ } >+ .veryTallItem { >+ width: 15px; >+ height: 40px; >+ background: olive; >+ } >+ </style> >+</head> >+<body> >+ <!-- FIRST ROW: --> >+ <!-- One collapsed flex item, at the beginning of a flex line, which >+ ends up establishing its flex line's cross size: --> >+ <div class="flexContainer"> >+ <div class="collapsedItem"></div> >+ <div class="halfWidthItem"></div> >+ <div class="fullWidthItem"></div> >+ </div> >+ <!-- ...and now with it being at the end of that flex line: --> >+ <div class="flexContainer"> >+ <div class="halfWidthItem"></div> >+ <div class="collapsedItem"></div> >+ <div class="fullWidthItem"></div> >+ </div> >+ >+ <div style="clear: both"></div> >+ >+ <!-- SECOND ROW: --> >+ <!-- One collapsed flex item, initially in its own line. It ends >+ up being merged into another line after it collapses, due to its >+ (post-collapse) zero main-size. --> >+ <div class="flexContainer"> >+ <div class="collapsedItem"></div> >+ <div class="fullWidthItem"></div> >+ <div class="fullWidthItem"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="fullWidthItem"></div> >+ <div class="collapsedItem"></div> >+ <div class="fullWidthItem"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="fullWidthItem"></div> >+ <div class="fullWidthItem"></div> >+ <div class="collapsedItem"></div> >+ </div> >+ >+ <div style="clear: both"></div> >+ >+ <!-- THIRD ROW: --> >+ <!-- One collapsed flex item, initially in a line with an even-taller item. >+ The collapsed item ends up shifting into another line after it >+ collapses, but it carries the taller item's cross size with it, as its >+ strut size. --> >+ <div class="flexContainer"> >+ <div class="fullWidthItem"></div> >+ <div class="collapsedItem"></div> >+ <div class="veryTallItem"></div> >+ </div> >+ <!-- ...and now with two (differently-sized) struts in first line: >+ (the one that's taller - due to being initially grouped with the tall >+ item - wins out.) --> >+ <div class="flexContainer"> >+ <div class="collapsedItem"></div> >+ <div class="fullWidthItem"></div> >+ <div class="collapsedItem"></div> >+ <div class="veryTallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c8242106ba143269630ab10b69351ca95442f5b7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003-expected.html >@@ -0,0 +1,46 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ flex-wrap: wrap; >+ align-content: stretch; /* Initial value; just here for emphasis */ >+ width: 25px; >+ height: 60px; >+ background: yellow; >+ border: 1px dotted black; >+ float: left; >+ margin: 5px; >+ } >+ .collapsedItem { >+ width: 0; >+ height: 40px; >+ } >+ .shortItem { >+ width: 25px; >+ height: 10px; >+ background: purple; >+ } >+ .tallItem { >+ width: 10px; >+ height: 30px; >+ background: olive; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ <div class="shortItem"></div> >+ <div class="collapsedItem"></div> >+ <div class="tallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..4476bc18f2ae25b64808cd2cbda93de37dc318dc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing that strut formation (from visibility:collapse) happens *after* lines have been stretched</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility"> >+ <link rel="match" href="flexbox-collapsed-item-horiz-003-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ flex-wrap: wrap; >+ align-content: stretch; /* Initial value; just here for emphasis */ >+ width: 25px; >+ height: 60px; >+ background: yellow; >+ border: 1px dotted black; >+ float: left; >+ margin: 5px; >+ } >+ .collapsedItem { >+ visibility: collapse; >+ width: 10px; >+ } >+ .shortItem { >+ width: 25px; >+ height: 10px; >+ background: purple; >+ } >+ .tallItem { >+ width: 10px; >+ height: 30px; >+ background: olive; >+ } >+ </style> >+</head> >+<body> >+ <!-- In this testcase, the first flex line initially has a cross-size of >+ 10px, and the second flex line has a cross-size of 30px. Both lines are >+ stretched by 10px each (to hit the container's total cross-size, 60px). >+ Then, we handle "visibility:collapse" and convert the collapsed item >+ into a strut with the second line's stretched cross-size (40px), and we >+ restart flex layout. This strut then ends up in the *first* line (since >+ it has 0 main-size), which means both flex lines end up being 40px tall. >+ --> >+ <div class="flexContainer"> >+ <div class="shortItem"></div> >+ <div class="collapsedItem"></div> >+ <div class="tallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0606afe53987d562897aa13f057daa294acdbdc8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-001-expected.html >@@ -0,0 +1,97 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<!-- >+ Reference for the correctness of gaps in horizontal and vertical multi-line >+ flex containers. >+--> >+<html> >+<head> >+ <title>Reference: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .outerBox { >+ width: 200px; >+ height: 220px; >+ border: 1px solid black; >+ float: left; >+ } >+ .flexContainer { >+ display: flex; >+ align-content: space-around; >+ justify-content: space-around; >+ } >+ .rowNoWrap { >+ flex-flow: row nowrap; >+ } >+ .columnNoWrap { >+ flex-flow: column nowrap; >+ } >+ .item { >+ border: 1px solid blue; >+ background: lightblue; >+ width: 28px; >+ height: 28px; >+ } >+ .autoLBMargins { >+ margin-left: auto; >+ margin-bottom: auto; >+ } >+ .autoBMargin { >+ margin-bottom: auto; >+ } >+ .right20 { >+ margin-right: 20px; >+ } >+ .bottom40 { >+ margin-bottom: 40px; >+ } >+ .tb30100 { >+ margin-top: 30px; >+ margin-bottom: 100px; >+ } >+ .lr3080 { >+ margin-left: 30px; >+ margin-right: 80px; >+ } >+ .w200 { >+ width: 200px; >+ } >+ .h220 { >+ height: 220px; >+ } >+ .fleft { >+ float: left; >+ } >+ </style> >+</head> >+<body> >+ <div class="outerBox"> >+ <div class="flexContainer w200 rowNoWrap tb30100"> >+ <div class="item right20"></div> >+ <div class="item right20"></div> >+ <div class="item right20"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer w200 rowNoWrap"> >+ <div class="item autoLBMargins right20"></div> >+ <div class="item"></div> >+ </div> >+ </div> >+ <div class="outerBox"> >+ <div class="flexContainer fleft h220 columnNoWrap lr3080"> >+ <div class="item bottom40"></div> >+ <div class="item bottom40"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer fleft h220 columnNoWrap"> >+ <div class="item bottom40"></div> >+ <div class="item bottom40"></div> >+ <div class="item autoBMargin"></div> >+ </div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..25b28e8094754df403205ef468c682b19a6284c3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-001.html >@@ -0,0 +1,65 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<!-- >+ Testcase for the correctness of gaps in horizontal and vertical multi-line >+ flex containers. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex"> >+ <link rel="match" href="flexbox-column-row-gap-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 200px; >+ height: 220px; >+ border: 1px solid black; >+ column-gap: 10%; >+ row-gap: 40px; >+ align-content: space-around; >+ justify-content: space-around; >+ float: left; >+ } >+ .rowWrap { >+ flex-flow: row wrap; >+ } >+ .columnWrap { >+ flex-flow: column wrap; >+ } >+ .item { >+ border: 1px solid blue; >+ background: lightblue; >+ width: 28px; >+ height: 28px; >+ } >+ .autoLBMargins { >+ margin-left: auto; >+ margin-bottom: auto; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer rowWrap"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item autoLBMargins"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer columnWrap"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item autoLBMargins"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..e23ddfe26151f407b10bba1abb7914933b1a3ba8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-002-expected.html >@@ -0,0 +1,67 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<!-- >+ Testcase for the correctness of gaps in vertical writing mode >+ multi-line flex containers. >+--> >+<html> >+<head> >+ <title>Reference: Testing row and column gaps in vertical writing mode multi-line flex containers</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 220px; >+ height: 200px; >+ border: 1px solid black; >+ align-content: flex-start; >+ justify-content: flex-end; >+ float: left; >+ writing-mode: vertical-lr; >+ } >+ .rowWrap { >+ flex-flow: row wrap; >+ } >+ .columnWrap { >+ flex-flow: column wrap; >+ } >+ .item { >+ border: 1px solid blue; >+ background: lightblue; >+ width: 28px; >+ height: 28px; >+ } >+ .b20 { >+ margin-bottom: 20px; >+ } >+ .t20 { >+ margin-top: 20px; >+ } >+ .l10 { >+ margin-left: 10px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer rowWrap"> >+ <div class="item b20"></div> >+ <div class="item b20"></div> >+ <div class="item b20"></div> >+ <div class="item"></div> >+ <div class="item l10 b20"></div> >+ <div class="item l10"></div> >+ </div> >+ <div class="flexContainer columnWrap"> >+ <div class="item"></div> >+ <div class="item l10"></div> >+ <div class="item l10"></div> >+ <div class="item l10"></div> >+ <div class="item l10"></div> >+ <div class="item l10 t20"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..fcd19cf8d483267ec511482942c7dd64b03f98e6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-002.html >@@ -0,0 +1,62 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<!-- >+ Testcase for the correctness of gaps in vertical writing mode multi-line >+ flex containers. >+--> >+<html> >+<head> >+ <title>CSS Test: Testing row and column gaps in vertical writing mode multi-line flex containers</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex"> >+ <link rel="match" href="flexbox-column-row-gap-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 220px; >+ height: 200px; >+ border: 1px solid black; >+ column-gap: 10%; >+ row-gap: 10px; >+ align-content: flex-start; >+ justify-content: flex-end; >+ float: left; >+ writing-mode: vertical-lr; >+ } >+ .rowWrap { >+ flex-flow: row wrap; >+ } >+ .columnWrap { >+ flex-flow: column wrap; >+ } >+ .item { >+ border: 1px solid blue; >+ background: lightblue; >+ width: 28px; >+ height: 28px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer rowWrap"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer columnWrap"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6e7f220b4470f400b458aa73e49a7213790d2315 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-003-expected.html >@@ -0,0 +1,63 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<html> >+<head> >+ <title>Reference: Testing cross size computation with row and column gaps in horizontal multi-line flex containers</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <meta charset="utf-8"> >+</html> >+ <style> >+ .flexContainer { >+ display: flex; >+ border: 1px solid black; >+ column-gap: 20px; >+ row-gap: 40px; >+ align-content: space-around; >+ justify-content: space-around; >+ } >+ .rowWrap { >+ flex-flow: row wrap; >+ } >+ .item { >+ border: 1px solid blue; >+ background: lightblue; >+ width: 28px; >+ height: 28px; >+ } >+ .autoLBMargins { >+ margin-left: auto; >+ margin-bottom: auto; >+ } >+ .w200 { >+ width: 200px; >+ } >+ .h100 { >+ height: 100px; >+ } >+ .h90 { >+ height: 90px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer rowWrap w200 h100"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item autoLBMargins"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer rowWrap w200 h90"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item autoLBMargins"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2dcd02717317a4c445e53df881ea555010cd20f6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-003.html >@@ -0,0 +1,61 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<html> >+<head> >+ <title>CSS Test: Testing cross size computation with row and column gaps in horizontal multi-line flex containers</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex"> >+ <link rel="match" href="flexbox-column-row-gap-003-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ border: 1px solid black; >+ column-gap: 20px; >+ row-gap: 40px; >+ align-content: space-around; >+ justify-content: space-around; >+ } >+ .rowWrap { >+ flex-flow: row wrap; >+ } >+ .item { >+ border: 1px solid blue; >+ background: lightblue; >+ width: 28px; >+ height: 28px; >+ } >+ .autoLBMargins { >+ margin-left: auto; >+ margin-bottom: auto; >+ } >+ .w200 { >+ width: 200px; >+ } >+ .hclamp { >+ max-height: 90px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer rowWrap w200"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item autoLBMargins"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer rowWrap w200 hclamp"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item autoLBMargins"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0b40fb2d6267157f391a8a020af3868fd5d783a2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-004-expected.html >@@ -0,0 +1,68 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<html> >+<head> >+ <title>Reference: Testing percentage gap resolution in flex containers</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ border: 2px solid black; >+ column-gap: 10px; >+ align-content: start; >+ justify-content: start; >+ margin-top: 20px; >+ } >+ .item { >+ border: 1px solid blue; >+ background: yellow; >+ width: 48px; >+ height: 48px; >+ flex: none; >+ } >+ .vertLR { >+ writing-mode: vertical-lr; >+ } >+ .rowWrap { >+ flex-flow: row wrap; >+ } >+ .colWrap { >+ flex-flow: column wrap; >+ } >+ .w50 { >+ width: 50px; >+ } >+ .h100 { >+ height: 100px; >+ } >+ .w100 { >+ width: 100px; >+ } >+ .noWrap { >+ flex-wrap: nowrap; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer rowWrap w50 h100"> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer colWrap w50 h100 noWrap"> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer vertLR rowWrap h100 w100"> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer vertLR colWrap w100 noWrap"> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0d86b3818ff02aae7cb05d527bb487b653eebf3d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-004.html >@@ -0,0 +1,64 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<html> >+<head> >+ <title>CSS Test: Testing percentage gap resolution in flex containers</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <link rel="help" href="https://drafts.csswg.org/css-align/#column-row-gap"> >+ <link rel="match" href="flexbox-column-row-gap-004-ref.html"> >+ <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5081"> >+ <meta charset="utf-8"> >+ <meta name="assert" content="% row-gaps in a flexbox with indefinite block size are treated as 'normal'." /> >+ <style> >+ .flexContainer { >+ display: flex; >+ border: 2px solid black; >+ row-gap: 20%; >+ column-gap: 10%; >+ align-content: start; >+ justify-content: start; >+ margin-top: 20px; >+ } >+ .item { >+ border: 1px solid blue; >+ background: yellow; >+ width: 48px; >+ height: 48px; >+ flex: none; >+ } >+ .vertLR { >+ writing-mode: vertical-lr; >+ } >+ .rowWrap { >+ flex-flow: row wrap; >+ } >+ .colWrap { >+ flex-flow: column wrap; >+ } >+ .w50 { >+ width: 50px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer rowWrap w50"> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer colWrap w50"> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer vertLR rowWrap"> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flexContainer vertLR colWrap"> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ed0cc575f56bf8e7c9db37ee8a5355fe432236a4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-001-expected.html >@@ -0,0 +1,13 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test Reference</title> >+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez"> >+<style> >+div { >+ width: 100px; >+ height: 100px; >+ background: green; >+} >+</style> >+<p>Test passes if you see a green 100px x 100px square, and no red</p> >+<div></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5bff6146e0ebe32a3e535c3566b98b84818d4773 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-001.html >@@ -0,0 +1,30 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test: nested flex containers with height established by 'min-height'</title> >+<link rel="match" href="flexbox-definite-sizes-001-ref.html"> >+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> >+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1449326"> >+<style> >+div { >+ display: flex; >+} >+ >+.item { >+ width: 100px; >+ background: red; >+ align-items: center; >+} >+ >+.item span { >+ min-height: 100%; >+ width: 100%; >+ background: green; >+} >+</style> >+<p>Test passes if you see a green 100px x 100px square, and no red</p> >+<div style="min-height: 100px;"> >+ <div class="item"> >+ <span></span> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ed0cc575f56bf8e7c9db37ee8a5355fe432236a4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-002-expected.html >@@ -0,0 +1,13 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test Reference</title> >+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez"> >+<style> >+div { >+ width: 100px; >+ height: 100px; >+ background: green; >+} >+</style> >+<p>Test passes if you see a green 100px x 100px square, and no red</p> >+<div></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..126fd5e50c25a5bad04c096c59a9184d6e165ce7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-002.html >@@ -0,0 +1,31 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test: nested flex containers with height established by 'min-height'</title> >+<link rel="match" href="flexbox-definite-sizes-001-ref.html"> >+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> >+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1449326"> >+<style> >+div { >+ display: flex; >+} >+ >+.item { >+ width: 100px; >+ background: red; >+ align-items: center; >+ min-height: 100px; >+} >+ >+.item span { >+ min-height: 100%; >+ width: 100%; >+ background: green; >+} >+</style> >+<p>Test passes if you see a green 100px x 100px square, and no red</p> >+<div> >+ <div class="item"> >+ <span></span> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ed0cc575f56bf8e7c9db37ee8a5355fe432236a4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-003-expected.html >@@ -0,0 +1,13 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test Reference</title> >+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez"> >+<style> >+div { >+ width: 100px; >+ height: 100px; >+ background: green; >+} >+</style> >+<p>Test passes if you see a green 100px x 100px square, and no red</p> >+<div></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..bc5b0751dbe356c012aa4b76a60eb5415a4063b3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-003.html >@@ -0,0 +1,38 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test: nested flex containers with definite max-height</title> >+<link rel="match" href="flexbox-definite-sizes-001-ref.html"> >+<link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert"> >+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> >+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1449326"> >+<style> >+body { overflow: hidden } >+ >+.outerFlex { >+ display: flex; >+ width: 100px; >+ /* Implicit "align-items:stretch" */ >+} >+ >+.innerFlex { >+ display: flex; >+ width: 100px; >+ background: red; >+ >+ /* This reveals if we miscalculate the height of our flex item: */ >+ align-items: flex-end; >+} >+ >+.block { >+ width: 100px; >+ max-height: 100%; >+ background-color: green; >+} >+</style> >+<p>Test passes if you see a green 100px x 100px square, and no red</p> >+<div class="outerFlex" style="max-height: 100px"> >+ <div class="innerFlex"> >+ <div class="block"><div style="height:9999px"></div></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ed0cc575f56bf8e7c9db37ee8a5355fe432236a4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-004-expected.html >@@ -0,0 +1,13 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test Reference</title> >+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez"> >+<style> >+div { >+ width: 100px; >+ height: 100px; >+ background: green; >+} >+</style> >+<p>Test passes if you see a green 100px x 100px square, and no red</p> >+<div></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..cf54aabe9936b3963e7343d566d957633fc26c69 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-004.html >@@ -0,0 +1,38 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test: nested flex containers with definite max-height</title> >+<link rel="match" href="flexbox-definite-sizes-001-ref.html"> >+<link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert"> >+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> >+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1449326"> >+<style> >+body { overflow: hidden } >+ >+.outerFlex { >+ display: flex; >+ width: 100px; >+ /* Implicit "align-items:stretch" */ >+} >+ >+.innerFlex { >+ display: flex; >+ width: 100px; >+ background: red; >+ >+ /* This reveals if we miscalculate the height of our flex item: */ >+ align-items: flex-end; >+} >+ >+.block { >+ width: 100px; >+ max-height: 100%; >+ background-color: green; >+} >+</style> >+<p>Test passes if you see a green 100px x 100px square, and no red</p> >+<div class="outerFlex"> >+ <div class="innerFlex" style="max-height: 100px"> >+ <div class="block"><div style="height:9999px"></div></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-005-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..fca146671cfb80cd3ae0264a8466be0b9823b3ae >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-005-expected.html >@@ -0,0 +1,20 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test Reference</title> >+<link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert"> >+<style> >+ .outer { >+ margin-bottom: 2px; >+ height: 60px; >+ } >+ .inner { >+ background: lime; >+ height: 100%; >+ } >+</style> >+<p>Test passes if you see four 60px-tall lime rows (with platform-appropriate scrollbars on the last one).</p> >+ >+<div class="outer"><div class="inner"></div></div> >+<div class="outer"><div class="inner"></div></div> >+<div class="outer"><div class="inner"></div></div> >+<div class="outer" style="overflow: scroll"><div class="inner"></div></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-005.html >new file mode 100644 >index 0000000000000000000000000000000000000000..76beb2a41db70d2f00de159d1285fbc5310a3d40 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-005.html >@@ -0,0 +1,47 @@ >+<!doctype html> >+<meta charset="utf-8"> >+<title>CSS Test: nested flex containers with definite max-height</title> >+<link rel="match" href="flexbox-definite-sizes-005-ref.html"> >+<link rel="author" href="mailto:dholbert@mozilla.com" title="Daniel Holbert"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> >+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503173"> >+<style> >+ .horizFlex { >+ display: flex; >+ margin-bottom: 2px; >+ } >+ .vertFlex { >+ display: flex; >+ flex-grow: 1; >+ flex-direction: column; >+ min-height: 60px; >+ } >+ .item { >+ background: lime; >+ height: 100%; >+ } >+</style> >+<p>Test passes if you see four 60px-tall lime rows (with platform-appropriate scrollbars on the last one).</p> >+ >+<div class="horizFlex"> >+ <div class="vertFlex"> >+ <div class="item"></div> >+ </div> >+</div> >+ >+<div class="horizFlex"> >+ <div class="vertFlex" style="overflow: hidden"> >+ <div class="item"></div> >+ </div> >+</div> >+<div class="horizFlex"> >+ <div class="vertFlex" style="overflow: auto"> >+ <div class="item"></div> >+ </div> >+</div> >+ >+<div class="horizFlex"> >+ <div class="vertFlex" style="overflow: scroll"> >+ <div class="item"></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-006-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-006-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-006-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-006.html >new file mode 100644 >index 0000000000000000000000000000000000000000..4b5aaf8dc443ed986dafc334c79dd3d7627698f8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-006.html >@@ -0,0 +1,12 @@ >+<!doctype html> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-stretch"> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> >+<meta name="assert" content="Item stretches to row flexbox's height when the row flexbox has a definite height but is a child of a column flexbox with an indefinite height." /> >+<p>Test passes if there is a filled green square.</p> >+ >+<div style="display: flex; flex-direction: column;"> >+ <div style="height: 100px; display: flex;"> >+ <div style="width: 100px; background: green;"></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-dyn-resize-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-dyn-resize-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5e5561cadf2ddbd6dfd2c7b4819f146f61be006b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-dyn-resize-001-expected.html >@@ -0,0 +1,60 @@ >+<!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 Reftest Reference >+ </title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .container { >+ width: 100px; >+ display: flex; >+ border: 1px solid purple; >+ margin-bottom: 15px; >+ } >+ .item { >+ margin: 2px; >+ background: lightblue; >+ } >+ .inline-box { >+ display: inline-block; >+ height: 10px; >+ width: 10px; >+ background: lightgray; >+ border: 1px solid black; >+ } >+ #change-width { >+ /* Using hardcoded CSS as reference for testcase's tweak: */ >+ width: 300px; >+ } >+ #change-flex { >+ /* Using hardcoded CSS as reference for testcase's tweak: */ >+ flex: 0 0 75px; >+ } >+ </style> >+</head> >+<body> >+ <div class="container"> >+ <div class="item" id="change-width"> >+ <div class="inline-box"></div><div class="inline-box"></div> >+ </div> >+ <div class="item"> >+ <div class="inline-box"></div><div class="inline-box"></div> >+ </div> >+ </div> >+ >+ <div class="container"> >+ <div class="item" id="change-flex"> >+ <div class="inline-box"></div><div class="inline-box"></div> >+ </div> >+ <div class="item"> >+ <div class="inline-box"></div><div class="inline-box"></div> >+ </div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-dyn-resize-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-dyn-resize-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d64c4bdf28ecb783af4f342d515dcf63134602c6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-dyn-resize-001.html >@@ -0,0 +1,65 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <meta charset="utf-8"> >+ <title> >+ CSS Test: Testing how a sizing change to one flex item impacts its sibling >+ </title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#layout-algorithm"> >+ <link rel="match" href="flexbox-dyn-resize-001-ref.html"> >+ <style> >+ .container { >+ width: 100px; >+ display: flex; >+ border: 1px solid purple; >+ margin-bottom: 15px; >+ } >+ .item { >+ margin: 2px; >+ background: lightblue; >+ } >+ .inline-box { >+ display: inline-block; >+ height: 10px; >+ width: 10px; >+ background: lightgray; >+ border: 1px solid black; >+ } >+ </style> >+ <script> >+ function go() { >+ // Make this item steal all the spare width (forcing its sibling to shrink) >+ // by giving it a huge 'width' and therefore huge flex-basis: >+ document.getElementById("change-width").style.width = "300px"; >+ >+ // Make this item steal all the spare width (forcing its sibling to shrink) >+ // by giving it a pretty big flex-basis and no shrinkability: >+ document.getElementById("change-flex").style.flex = "0 0 75px" >+ } >+ </script> >+</head> >+<body onload="go()"> >+ <div class="container"> >+ <div class="item" id="change-width"> >+ <div class="inline-box"></div><div class="inline-box"></div> >+ </div> >+ <div class="item"> >+ <div class="inline-box"></div><div class="inline-box"></div> >+ </div> >+ </div> >+ >+ <div class="container"> >+ <div class="item" id="change-flex"> >+ <div class="inline-box"></div><div class="inline-box"></div> >+ </div> >+ <div class="item"> >+ <div class="inline-box"></div><div class="inline-box"></div> >+ </div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3ed3687cf0e706aeceba8682ad05a1360ad86244 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a-expected.html >@@ -0,0 +1,77 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: row; >+ justify-content: space-between; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 50px; >+ width: 200px; >+ } >+ >+ .container > * { >+ flex-shrink: 0; >+ min-width: 0; >+ border: 2px solid teal; >+ } >+ >+ .smallText { font: 10px Ahem; } >+ .bigText { font: 20px Ahem; } >+ .spacerChild::before { >+ content: ''; >+ display: block; >+ background: brown; >+ height: 10px; >+ width: 10px; >+ } >+ .justPadding { >+ /* Empty div with 5px padding on each side */ >+ padding: 5px; >+ background: cyan; >+ } >+ canvas { background: fuchsia } >+ </style> >+</head> >+<body> >+<!-- Flex items have unspecified size properties: --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas width="20"></canvas> >+</div> >+ >+<!-- Various specified main-size values, in testcase >+ (removed here in reference case, because they shouldn't affect sizing): --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas width="20"></canvas> >+</div> >+ >+<!-- Various specified cross-size values (should be honored): --> >+<div class="container"> >+ <div class="smallText" style="height: 0px">a b</div> >+ <div class="bigText" style="height: 40px">c</div> >+ <div class="spacerChild" style="height: 20px"></div> >+ <div class="justPadding" style="height: 10px"></div> >+ <canvas width="20" style="height: 8px"></canvas> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1ac926498cb39a7665836387d3c6efc92fba536d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a.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: Testing "flex-basis: content" in a row-oriented flex container >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis"> >+ <link rel="match" href="flexbox-flex-basis-content-001-ref.html"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: row; >+ justify-content: space-between; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 50px; >+ width: 200px; >+ } >+ >+ .container > * { >+ /* All flex items have "flex-basis: content" (and zero flex-shrink and >+ min-main-size, to avoid any influence from those). */ >+ flex-basis: content; >+ flex-shrink: 0; >+ min-width: 0; >+ border: 2px solid teal; >+ } >+ >+ .smallText { font: 10px Ahem; } >+ .bigText { font: 20px Ahem; } >+ .spacerChild::before { >+ content: ''; >+ display: block; >+ background: brown; >+ height: 10px; >+ width: 10px; >+ } >+ .justPadding { >+ /* Empty div with 5px padding on each side */ >+ padding: 5px; >+ background: cyan; >+ } >+ canvas { background: fuchsia } >+ </style> >+</head> >+<body> >+<!-- Flex items have unspecified size properties: --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas width="20"></canvas> >+</div> >+ >+<!-- Various specified main-size values (should be ignored): --> >+<div class="container"> >+ <div class="smallText" style="width: 0px">a b</div> >+ <div class="bigText" style="width: 40px">c</div> >+ <div class="spacerChild" style="width: 20px"></div> >+ <div class="justPadding" style="width: 10px"></div> >+ <canvas width="20" style="width: 8px"></canvas> >+</div> >+ >+<!-- Various specified cross-size values (should be honored): --> >+<div class="container"> >+ <div class="smallText" style="height: 0px">a b</div> >+ <div class="bigText" style="height: 40px">c</div> >+ <div class="spacerChild" style="height: 20px"></div> >+ <div class="justPadding" style="height: 10px"></div> >+ <canvas width="20" style="height: 8px"></canvas> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3ed3687cf0e706aeceba8682ad05a1360ad86244 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b-expected.html >@@ -0,0 +1,77 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: row; >+ justify-content: space-between; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 50px; >+ width: 200px; >+ } >+ >+ .container > * { >+ flex-shrink: 0; >+ min-width: 0; >+ border: 2px solid teal; >+ } >+ >+ .smallText { font: 10px Ahem; } >+ .bigText { font: 20px Ahem; } >+ .spacerChild::before { >+ content: ''; >+ display: block; >+ background: brown; >+ height: 10px; >+ width: 10px; >+ } >+ .justPadding { >+ /* Empty div with 5px padding on each side */ >+ padding: 5px; >+ background: cyan; >+ } >+ canvas { background: fuchsia } >+ </style> >+</head> >+<body> >+<!-- Flex items have unspecified size properties: --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas width="20"></canvas> >+</div> >+ >+<!-- Various specified main-size values, in testcase >+ (removed here in reference case, because they shouldn't affect sizing): --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas width="20"></canvas> >+</div> >+ >+<!-- Various specified cross-size values (should be honored): --> >+<div class="container"> >+ <div class="smallText" style="height: 0px">a b</div> >+ <div class="bigText" style="height: 40px">c</div> >+ <div class="spacerChild" style="height: 20px"></div> >+ <div class="justPadding" style="height: 10px"></div> >+ <canvas width="20" style="height: 8px"></canvas> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b41fd409b74ddff9fa74872a308b0b3b523d85a2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b.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: Testing "flex-basis: content" (set via the "flex" shorthand) >+ in a row-oriented flex container. >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis"> >+ <link rel="match" href="flexbox-flex-basis-content-001-ref.html"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: row; >+ justify-content: space-between; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 50px; >+ width: 200px; >+ } >+ >+ .container > * { >+ /* All flex items have "flex-basis: content" (and zero flex-shrink and >+ min-main-size, to avoid any influence from those). */ >+ flex: 0 0 content; >+ min-width: 0; >+ border: 2px solid teal; >+ } >+ >+ .smallText { font: 10px Ahem; } >+ .bigText { font: 20px Ahem; } >+ .spacerChild::before { >+ content: ''; >+ display: block; >+ background: brown; >+ height: 10px; >+ width: 10px; >+ } >+ .justPadding { >+ /* Empty div with 5px padding on each side */ >+ padding: 5px; >+ background: cyan; >+ } >+ canvas { background: fuchsia } >+ </style> >+</head> >+<body> >+<!-- Flex items have unspecified size properties: --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas width="20"></canvas> >+</div> >+ >+<!-- Various specified main-size values (should be ignored): --> >+<div class="container"> >+ <div class="smallText" style="width: 0px">a b</div> >+ <div class="bigText" style="width: 40px">c</div> >+ <div class="spacerChild" style="width: 20px"></div> >+ <div class="justPadding" style="width: 10px"></div> >+ <canvas width="20" style="width: 8px"></canvas> >+</div> >+ >+<!-- Various specified cross-size values (should be honored): --> >+<div class="container"> >+ <div class="smallText" style="height: 0px">a b</div> >+ <div class="bigText" style="height: 40px">c</div> >+ <div class="spacerChild" style="height: 20px"></div> >+ <div class="justPadding" style="height: 10px"></div> >+ <canvas width="20" style="height: 8px"></canvas> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..35b4b783a1a4c77d48082e0428e7bc22e94901ea >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a-expected.html >@@ -0,0 +1,78 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: column; >+ justify-content: space-between; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-right: 2em; >+ width: 50px; >+ height: 200px; >+ float: left; >+ } >+ >+ .container > * { >+ flex-shrink: 0; >+ min-height: 0; >+ border: 2px solid teal; >+ } >+ >+ .smallText { font: 10px Ahem; } >+ .bigText { font: 20px Ahem; } >+ .spacerChild::before { >+ content: ''; >+ display: block; >+ background: brown; >+ height: 10px; >+ width: 10px; >+ } >+ .justPadding { >+ /* Empty div with 5px padding on each side */ >+ padding: 5px; >+ background: cyan; >+ } >+ canvas { background: fuchsia } >+ </style> >+</head> >+<body> >+<!-- Flex items have unspecified size properties: --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas height="20"></canvas> >+</div> >+ >+<!-- Various specified main-size values, in testcase >+ (removed here in reference case, because they shouldn't affect sizing): --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas height="20"></canvas> >+</div> >+ >+<!-- Various specified cross-size values (should be honored): --> >+<div class="container"> >+ <div class="smallText" style="width: 0px">a b</div> >+ <div class="bigText" style="width: 40px">c</div> >+ <div class="spacerChild" style="width: 20px"></div> >+ <div class="justPadding" style="width: 10px"></div> >+ <canvas height="20" style="width: 8px"></canvas> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..68c67987dd87f644fd5c65349da070ff4c03c5a3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a.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: Testing "flex-basis: content" in a column-oriented flex container >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis"> >+ <link rel="match" href="flexbox-flex-basis-content-002-ref.html"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: column; >+ justify-content: space-between; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-right: 2em; >+ width: 50px; >+ height: 200px; >+ float: left; >+ } >+ >+ .container > * { >+ /* All flex items have "flex-basis: content" (and zero flex-shrink and >+ min-main-size, to avoid any influence from those). */ >+ flex-basis: content; >+ flex-shrink: 0; >+ min-height: 0; >+ border: 2px solid teal; >+ } >+ >+ .smallText { font: 10px Ahem; } >+ .bigText { font: 20px Ahem; } >+ .spacerChild::before { >+ content: ''; >+ display: block; >+ background: brown; >+ height: 10px; >+ width: 10px; >+ } >+ .justPadding { >+ /* Empty div with 5px padding on each side */ >+ padding: 5px; >+ background: cyan; >+ } >+ canvas { background: fuchsia } >+ </style> >+</head> >+<body> >+<!-- Flex items have unspecified size properties: --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas height="20"></canvas> >+</div> >+ >+<!-- Various specified main-size values (should be ignored): --> >+<div class="container"> >+ <div class="smallText" style="height: 0px">a b</div> >+ <div class="bigText" style="height: 40px">c</div> >+ <div class="spacerChild" style="height: 20px"></div> >+ <div class="justPadding" style="height: 10px"></div> >+ <canvas height="20" style="height: 8px"></canvas> >+</div> >+ >+<!-- Various specified cross-size values (should be honored): --> >+<div class="container"> >+ <div class="smallText" style="width: 0px">a b</div> >+ <div class="bigText" style="width: 40px">c</div> >+ <div class="spacerChild" style="width: 20px"></div> >+ <div class="justPadding" style="width: 10px"></div> >+ <canvas height="20" style="width: 8px"></canvas> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..35b4b783a1a4c77d48082e0428e7bc22e94901ea >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b-expected.html >@@ -0,0 +1,78 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: column; >+ justify-content: space-between; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-right: 2em; >+ width: 50px; >+ height: 200px; >+ float: left; >+ } >+ >+ .container > * { >+ flex-shrink: 0; >+ min-height: 0; >+ border: 2px solid teal; >+ } >+ >+ .smallText { font: 10px Ahem; } >+ .bigText { font: 20px Ahem; } >+ .spacerChild::before { >+ content: ''; >+ display: block; >+ background: brown; >+ height: 10px; >+ width: 10px; >+ } >+ .justPadding { >+ /* Empty div with 5px padding on each side */ >+ padding: 5px; >+ background: cyan; >+ } >+ canvas { background: fuchsia } >+ </style> >+</head> >+<body> >+<!-- Flex items have unspecified size properties: --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas height="20"></canvas> >+</div> >+ >+<!-- Various specified main-size values, in testcase >+ (removed here in reference case, because they shouldn't affect sizing): --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas height="20"></canvas> >+</div> >+ >+<!-- Various specified cross-size values (should be honored): --> >+<div class="container"> >+ <div class="smallText" style="width: 0px">a b</div> >+ <div class="bigText" style="width: 40px">c</div> >+ <div class="spacerChild" style="width: 20px"></div> >+ <div class="justPadding" style="width: 10px"></div> >+ <canvas height="20" style="width: 8px"></canvas> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d6d4171eed115654fdde15f587b3b762c4eab1fb >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b.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: Testing "flex-basis: content" (set via the "flex" shorthand) >+ in a column-oriented flex container. >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis"> >+ <link rel="match" href="flexbox-flex-basis-content-002-ref.html"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: column; >+ justify-content: space-between; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-right: 2em; >+ width: 50px; >+ height: 200px; >+ float: left; >+ } >+ >+ .container > * { >+ /* All flex items have "flex-basis: content" (and zero flex-shrink and >+ min-main-size, to avoid any influence from those). */ >+ flex: 0 0 content; >+ min-height: 0; >+ border: 2px solid teal; >+ } >+ >+ .smallText { font: 10px Ahem; } >+ .bigText { font: 20px Ahem; } >+ .spacerChild::before { >+ content: ''; >+ display: block; >+ background: brown; >+ height: 10px; >+ width: 10px; >+ } >+ .justPadding { >+ /* Empty div with 5px padding on each side */ >+ padding: 5px; >+ background: cyan; >+ } >+ canvas { background: fuchsia } >+ </style> >+</head> >+<body> >+<!-- Flex items have unspecified size properties: --> >+<div class="container"> >+ <div class="smallText">a b</div> >+ <div class="bigText">c</div> >+ <div class="spacerChild"></div> >+ <div class="justPadding"></div> >+ <canvas height="20"></canvas> >+</div> >+ >+<!-- Various specified main-size values (should be ignored): --> >+<div class="container"> >+ <div class="smallText" style="height: 0px">a b</div> >+ <div class="bigText" style="height: 40px">c</div> >+ <div class="spacerChild" style="height: 20px"></div> >+ <div class="justPadding" style="height: 10px"></div> >+ <canvas height="20" style="height: 8px"></canvas> >+</div> >+ >+<!-- Various specified cross-size values (should be honored): --> >+<div class="container"> >+ <div class="smallText" style="width: 0px">a b</div> >+ <div class="bigText" style="width: 40px">c</div> >+ <div class="spacerChild" style="width: 20px"></div> >+ <div class="justPadding" style="width: 10px"></div> >+ <canvas height="20" style="width: 8px"></canvas> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..63ce9d74292c7a9699894783ae2e66fe412a33b6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a-expected.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 Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .container { >+ clear: both; /* In this reference case, we use floats instead of >+ flex items (see below), so the container just >+ needs to reset the float state for each example. */ >+ } >+ >+ .item { >+ border: 2px solid teal; >+ float: left; /* Use floated elements as a reference for (hopefully) >+ max-content sized flex items in testcase. */ >+ } >+ ib { >+ display: inline-block; >+ background: blue; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ float { >+ float: left; >+ background: fuchsia; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ canvas { >+ background: brown; >+ border: 1px solid gray; >+ } >+ .innerFlex { >+ display: flex; >+ } >+ innerItem { >+ background: salmon; >+ border: 1px solid gray; >+ height: 10px; >+ width: 15px; >+ flex: none; >+ } >+ </style> >+</head> >+<body> >+<!-- In testcase, flex item has several inline-blocks >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"><ib></ib><ib></ib><ib></ib></div> >+</div> >+ >+<!-- In testcase, flex item has several floats: --> >+<div class="container"> >+ <div class="item"> >+ <float></float> >+ <float></float> >+ <float></float> >+ </div> >+</div> >+ >+<!-- In testcase, flex item has several inline replaced elements: >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"> >+ <canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas> >+ </div> >+</div> >+ >+<!-- In testcase, flex item *is* a replaced element: --> >+<div class="container"> >+ <canvas class="item" width="25" height="10"></canvas> >+</div> >+ >+<!-- In testcase, flex item is itself a flex container: --> >+<div class="container"> >+ <div class="item innerFlex"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+<!-- In testcase, flex item is itself a multi-line flex container: --> >+<div class="container"> >+ <div class="item innerFlex" style="flex-wrap: wrap"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..83dbae086844c52e83897d73866fffbb5ff0e2d3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a.html >@@ -0,0 +1,123 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title> >+ CSS Test: Testing that explicit "flex-basis: content" is treated as >+ "max-content" when calculating flex base size >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> >+ <link rel="match" href="flexbox-flex-basis-content-003-ref.html"> >+ <style> >+ .container { >+ display: flex; >+ /* flex container has an extremely-constrained width (and items will >+ overflow horizontally). This is intentional, as part of stress-testing >+ item sizing. */ >+ width: 1px; >+ } >+ >+ .item { >+ /* We give all flex items "flex-basis: content". >+ We also give them zero flex-grow, flex-shrink, and min-main-size, so >+ that the flex base size entirely determines the flex item's size. */ >+ flex: 0 0 content; >+ min-width: 0; >+ border: 2px solid teal; >+ } >+ ib { >+ display: inline-block; >+ background: blue; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ float { >+ float: left; >+ background: fuchsia; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ canvas { >+ background: brown; >+ border: 1px solid gray; >+ } >+ .innerFlex { >+ display: flex; >+ } >+ innerItem { >+ background: salmon; >+ border: 1px solid gray; >+ height: 10px; >+ width: 15px; >+ flex: none; >+ } >+ </style> >+</head> >+<body> >+<!-- The idea of this test is to be sure the UA is using the "max-content" size >+ (and not e.g. the "fit-content size") when resolving the flex base size >+ inside each flex container. To differentiate between max-content and >+ other intrinsic size possibilities (min-content/fit-content), we: >+ - use flex items with a large difference between its min-content size & >+ its max-content size (e.g. wrappable content). >+ - use a very small container (to compress the size, if the UA incorrectly >+ allows the size to be influenced by the container size). >+--> >+ >+<!-- Flex item has several inline-blocks >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"><ib></ib><ib></ib><ib></ib></div> >+</div> >+ >+<!-- Flex item has several floats: --> >+<div class="container"> >+ <div class="item"> >+ <float></float> >+ <float></float> >+ <float></float> >+ </div> >+</div> >+ >+<!-- Flex item has several inline replaced elements: >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"> >+ <canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas> >+ </div> >+</div> >+ >+<!-- Flex item *is* a replaced element: --> >+<div class="container"> >+ <canvas class="item" width="25" height="10"></canvas> >+</div> >+ >+<!-- Flex item is itself a flex container: --> >+<div class="container"> >+ <div class="item innerFlex"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+<!-- Flex item is itself a multi-line flex container: --> >+<div class="container"> >+ <div class="item innerFlex" style="flex-wrap: wrap"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..63ce9d74292c7a9699894783ae2e66fe412a33b6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003b-expected.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 Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .container { >+ clear: both; /* In this reference case, we use floats instead of >+ flex items (see below), so the container just >+ needs to reset the float state for each example. */ >+ } >+ >+ .item { >+ border: 2px solid teal; >+ float: left; /* Use floated elements as a reference for (hopefully) >+ max-content sized flex items in testcase. */ >+ } >+ ib { >+ display: inline-block; >+ background: blue; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ float { >+ float: left; >+ background: fuchsia; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ canvas { >+ background: brown; >+ border: 1px solid gray; >+ } >+ .innerFlex { >+ display: flex; >+ } >+ innerItem { >+ background: salmon; >+ border: 1px solid gray; >+ height: 10px; >+ width: 15px; >+ flex: none; >+ } >+ </style> >+</head> >+<body> >+<!-- In testcase, flex item has several inline-blocks >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"><ib></ib><ib></ib><ib></ib></div> >+</div> >+ >+<!-- In testcase, flex item has several floats: --> >+<div class="container"> >+ <div class="item"> >+ <float></float> >+ <float></float> >+ <float></float> >+ </div> >+</div> >+ >+<!-- In testcase, flex item has several inline replaced elements: >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"> >+ <canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas> >+ </div> >+</div> >+ >+<!-- In testcase, flex item *is* a replaced element: --> >+<div class="container"> >+ <canvas class="item" width="25" height="10"></canvas> >+</div> >+ >+<!-- In testcase, flex item is itself a flex container: --> >+<div class="container"> >+ <div class="item innerFlex"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+<!-- In testcase, flex item is itself a multi-line flex container: --> >+<div class="container"> >+ <div class="item innerFlex" style="flex-wrap: wrap"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a81403c098f010a0fe0b18b0de9511827bdceca0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003b.html >@@ -0,0 +1,124 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title> >+ CSS Test: Testing that used "flex-basis: content" is treated as >+ "max-content" when calculating flex base size >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> >+ <link rel="match" href="flexbox-flex-basis-content-003-ref.html"> >+ <style> >+ .container { >+ display: flex; >+ /* flex container has an extremely-constrained width (and items will >+ overflow horizontally). This is intentional, as part of stress-testing >+ item sizing. */ >+ width: 1px; >+ } >+ >+ .item { >+ /* We give all flex items a used "flex-basis" of "content" >+ (from "flex-basis:auto" and default "width:auto"). >+ We also give them zero flex-grow, flex-shrink, and min-main-size, so >+ that the flex base size entirely determines the flex item's size. */ >+ flex: 0 0 auto; >+ min-width: 0; >+ border: 2px solid teal; >+ } >+ ib { >+ display: inline-block; >+ background: blue; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ float { >+ float: left; >+ background: fuchsia; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ canvas { >+ background: brown; >+ border: 1px solid gray; >+ } >+ .innerFlex { >+ display: flex; >+ } >+ innerItem { >+ background: salmon; >+ border: 1px solid gray; >+ height: 10px; >+ width: 15px; >+ flex: none; >+ } >+ </style> >+</head> >+<body> >+<!-- The idea of this test is to be sure the UA is using the "max-content" size >+ (and not e.g. the "fit-content size") when resolving the flex base size >+ inside each flex container. To differentiate between max-content and >+ other intrinsic size possibilities (min-content/fit-content), we: >+ - use flex items with a large difference between its min-content size & >+ its max-content size (e.g. wrappable content). >+ - use a very small container (to compress the size, if the UA incorrectly >+ allows the size to be influenced by the container size). >+--> >+ >+<!-- Flex item has several inline-blocks >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"><ib></ib><ib></ib><ib></ib></div> >+</div> >+ >+<!-- Flex item has several floats: --> >+<div class="container"> >+ <div class="item"> >+ <float></float> >+ <float></float> >+ <float></float> >+ </div> >+</div> >+ >+<!-- Flex item has several inline replaced elements: >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"> >+ <canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas> >+ </div> >+</div> >+ >+<!-- Flex item *is* a replaced element: --> >+<div class="container"> >+ <canvas class="item" width="25" height="10"></canvas> >+</div> >+ >+<!-- Flex item is itself a flex container: --> >+<div class="container"> >+ <div class="item innerFlex"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+<!-- Flex item is itself a multi-line flex container: --> >+<div class="container"> >+ <div class="item innerFlex" style="flex-wrap: wrap"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..7da4de7a5aff52bc8ce4b13909f24a9ad5d7117d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a-expected.html >@@ -0,0 +1,105 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .container { >+ clear: both; /* In this reference case, we use floats instead of >+ flex items (see below), so the container just >+ needs to reset the float state for each example. */ >+ height: 50px; >+ } >+ >+ .item { >+ border: 2px solid teal; >+ float: left; /* Use floated elements as a reference for (hopefully) >+ max-content sized flex items in testcase. */ >+ } >+ ib { >+ display: inline-block; >+ background: blue; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ float { >+ float: left; >+ background: fuchsia; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ canvas { >+ background: brown; >+ border: 1px solid gray; >+ } >+ .innerFlex { >+ display: flex; >+ flex-direction: column; >+ } >+ innerItem { >+ background: salmon; >+ border: 1px solid gray; >+ height: 10px; >+ width: 15px; >+ flex: none; >+ } >+ </style> >+</head> >+<body> >+<!-- In testcase, flex item has several inline-blocks >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"><ib></ib><ib></ib><ib></ib></div> >+</div> >+ >+<!-- In testcase, flex item has several floats: --> >+<div class="container"> >+ <div class="item"> >+ <float></float> >+ <float></float> >+ <float></float> >+ </div> >+</div> >+ >+<!-- In testcase, flex item has several inline replaced elements: >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"> >+ <canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas> >+ </div> >+</div> >+ >+<!-- In testcase, flex item *is* a replaced element: --> >+<div class="container"> >+ <canvas class="item" width="25" height="10"></canvas> >+</div> >+ >+<!-- In testcase, flex item is itself a flex container: --> >+<div class="container"> >+ <div class="item innerFlex"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+<!-- In testcase, flex item is itself a multi-line flex container: --> >+<div class="container"> >+ <div class="item innerFlex" style="flex-wrap: wrap"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..65a86b508f470e945dd102b9e0e7043e80844034 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a.html >@@ -0,0 +1,129 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title> >+ CSS Test: Testing that explicit "flex-basis: content" is treated as >+ "max-content" when calculating flex base size >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> >+ <link rel="match" href="flexbox-flex-basis-content-004-ref.html"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: column; >+ align-items: flex-start; >+ /* flex container has an extremely-constrained height (and items will >+ overflow vertically). This is intentional, as part of stress-testing >+ item sizing. We add a large margin-bottom so that overflowing >+ items don't overlap between examples. */ >+ height: 1px; >+ margin-bottom: 49px; >+ } >+ >+ .item { >+ /* We give all flex items "flex-basis: content". >+ We also give them zero flex-grow, flex-shrink, and min-main-size, so >+ that the flex base size entirely determines the flex item's size. */ >+ flex: 0 0 content; >+ min-height: 0; >+ border: 2px solid teal; >+ } >+ ib { >+ display: inline-block; >+ background: blue; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ float { >+ float: left; >+ background: fuchsia; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ canvas { >+ background: brown; >+ border: 1px solid gray; >+ } >+ .innerFlex { >+ display: flex; >+ flex-direction: column; >+ } >+ innerItem { >+ background: salmon; >+ border: 1px solid gray; >+ height: 10px; >+ width: 15px; >+ flex: none; >+ } >+ </style> >+</head> >+<body> >+<!-- This test exists for symmetry with the previous set of tests >+ (flexbox-flex-basis-content-003*). Those previous tests check how >+ "flex-basis:content" is resolved to a flex base size, in the inline axis, >+ when the container's size is constrained in that axis. This test does the >+ same, but for the *block* axis, using flex-direction:column. As with the >+ previous set of tests, the expectation here is that we should use the >+ item's max-content size as its flex base size. Note that there's a bit >+ less subtlety here because intrinsic sizes (min-content, max-content) are >+ typically all the same in the block axis. >+--> >+ >+<!-- Flex item has several inline-blocks >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"><ib></ib><ib></ib><ib></ib></div> >+</div> >+ >+<!-- Flex item has several floats: --> >+<div class="container"> >+ <div class="item"> >+ <float></float> >+ <float></float> >+ <float></float> >+ </div> >+</div> >+ >+<!-- Flex item has several inline replaced elements: >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"> >+ <canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas> >+ </div> >+</div> >+ >+<!-- Flex item *is* a replaced element: --> >+<div class="container"> >+ <canvas class="item" width="25" height="10"></canvas> >+</div> >+ >+<!-- Flex item is itself a flex container: --> >+<div class="container"> >+ <div class="item innerFlex"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+<!-- Flex item is itself a multi-line flex container: --> >+<div class="container"> >+ <div class="item innerFlex" style="flex-wrap: wrap"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..7da4de7a5aff52bc8ce4b13909f24a9ad5d7117d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004b-expected.html >@@ -0,0 +1,105 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .container { >+ clear: both; /* In this reference case, we use floats instead of >+ flex items (see below), so the container just >+ needs to reset the float state for each example. */ >+ height: 50px; >+ } >+ >+ .item { >+ border: 2px solid teal; >+ float: left; /* Use floated elements as a reference for (hopefully) >+ max-content sized flex items in testcase. */ >+ } >+ ib { >+ display: inline-block; >+ background: blue; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ float { >+ float: left; >+ background: fuchsia; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ canvas { >+ background: brown; >+ border: 1px solid gray; >+ } >+ .innerFlex { >+ display: flex; >+ flex-direction: column; >+ } >+ innerItem { >+ background: salmon; >+ border: 1px solid gray; >+ height: 10px; >+ width: 15px; >+ flex: none; >+ } >+ </style> >+</head> >+<body> >+<!-- In testcase, flex item has several inline-blocks >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"><ib></ib><ib></ib><ib></ib></div> >+</div> >+ >+<!-- In testcase, flex item has several floats: --> >+<div class="container"> >+ <div class="item"> >+ <float></float> >+ <float></float> >+ <float></float> >+ </div> >+</div> >+ >+<!-- In testcase, flex item has several inline replaced elements: >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"> >+ <canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas> >+ </div> >+</div> >+ >+<!-- In testcase, flex item *is* a replaced element: --> >+<div class="container"> >+ <canvas class="item" width="25" height="10"></canvas> >+</div> >+ >+<!-- In testcase, flex item is itself a flex container: --> >+<div class="container"> >+ <div class="item innerFlex"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+<!-- In testcase, flex item is itself a multi-line flex container: --> >+<div class="container"> >+ <div class="item innerFlex" style="flex-wrap: wrap"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a686f1aa1e19bdc7ebbec7a3ddb105031818a4f2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004b.html >@@ -0,0 +1,130 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title> >+ CSS Test: Testing that used "flex-basis: content" is treated as >+ "max-content" when calculating flex base size >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> >+ <link rel="match" href="flexbox-flex-basis-content-004-ref.html"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: column; >+ align-items: flex-start; >+ /* flex container has an extremely-constrained height (and items will >+ overflow vertically). This is intentional, as part of stress-testing >+ item sizing. We add a large margin-bottom so that overflowing >+ items don't overlap between examples. */ >+ height: 1px; >+ margin-bottom: 49px; >+ } >+ >+ .item { >+ /* We give all flex items a used "flex-basis" of "content" >+ (from "flex-basis:auto" and default "width:auto"). >+ We also give them zero flex-grow, flex-shrink, and min-main-size, so >+ that the flex base size entirely determines the flex item's size. */ >+ flex: 0 0 auto; >+ min-height: 0; >+ border: 2px solid teal; >+ } >+ ib { >+ display: inline-block; >+ background: blue; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ float { >+ float: left; >+ background: fuchsia; >+ border: 1px solid gray; >+ width: 15px; >+ height: 10px; >+ } >+ canvas { >+ background: brown; >+ border: 1px solid gray; >+ } >+ .innerFlex { >+ display: flex; >+ flex-direction: column; >+ } >+ innerItem { >+ background: salmon; >+ border: 1px solid gray; >+ height: 10px; >+ width: 15px; >+ flex: none; >+ } >+ </style> >+</head> >+<body> >+<!-- This test exists for symmetry with the previous set of tests >+ (flexbox-flex-basis-content-003*). Those previous tests check how >+ "flex-basis:content" is resolved to a flex base size, in the inline axis, >+ when the container's size is constrained in that axis. This test does the >+ same, but for the *block* axis, using flex-direction:column. As with the >+ previous set of tests, the expectation here is that we should use the >+ item's max-content size as its flex base size. Note that there's a bit >+ less subtlety here because intrinsic sizes (min-content, max-content) are >+ typically all the same in the block axis. >+--> >+ >+<!-- Flex item has several inline-blocks >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"><ib></ib><ib></ib><ib></ib></div> >+</div> >+ >+<!-- Flex item has several floats: --> >+<div class="container"> >+ <div class="item"> >+ <float></float> >+ <float></float> >+ <float></float> >+ </div> >+</div> >+ >+<!-- Flex item has several inline replaced elements: >+ (no spaces, to avoid any text-layout dependency): --> >+<div class="container"> >+ <div class="item"> >+ <canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas >+ ><canvas width="15" height="10"></canvas> >+ </div> >+</div> >+ >+<!-- Flex item *is* a replaced element: --> >+<div class="container"> >+ <canvas class="item" width="25" height="10"></canvas> >+</div> >+ >+<!-- Flex item is itself a flex container: --> >+<div class="container"> >+ <div class="item innerFlex"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+<!-- Flex item is itself a multi-line flex container: --> >+<div class="container"> >+ <div class="item innerFlex" style="flex-wrap: wrap"> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ <innerItem></innerItem> >+ </div> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f46e11b39af20ec8bbe2688dde5b6ec66f7828ce >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-001-expected.html >@@ -0,0 +1,127 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ height: 60px; >+ width: 60px; >+ font: 10px sans-serif; >+ background: yellow; >+ float: left; >+ border: 1px solid black; >+ } >+ .flexContainer > * { >+ border: 1px dotted gray; >+ width: 28px; >+ height: 28px; >+ float: left; >+ } >+ >+ /* The single-line flex containers' flex items are shrunk in main axis: */ >+ .singleLineHoriz > * { >+ width: 13px; >+ } >+ .singleLineVert > * { >+ height: 13px; >+ float: none; >+ } >+ </style> >+</head> >+<body> >+ <!-- single-line (flex-wrap unspecified): --> >+ <div class="flexContainer singleLineHoriz"><!-- flex-flow: row --> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse --> >+ <div>4</div><div>3</div><div>2</div><div>1</div> >+ </div> >+ <div class="flexContainer singleLineVert"><!-- flex-flow: column --> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse --> >+ <div>4</div><div>3</div><div>2</div><div>1</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap", after flex-direction: --> >+ <div class="flexContainer"><!-- flex-flow: row wrap --> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: row-reverse wrap --> >+ <div>2</div><div>1</div><div>4</div><div>3</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: column wrap --> >+ <div>1</div><div>3</div><div>2</div><div>4</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: column-reverse wrap --> >+ <div>2</div><div>4</div><div>1</div><div>3</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap", before flex-direction: --> >+ <div class="flexContainer"><!-- flex-flow: wrap row --> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap row-reverse --> >+ <div>2</div><div>1</div><div>4</div><div>3</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap column --> >+ <div>1</div><div>3</div><div>2</div><div>4</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap column-reverse --> >+ <div>2</div><div>4</div><div>1</div><div>3</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap-reverse", after flex-direction: --> >+ <div class="flexContainer"><!-- flex-flow: row wrap-reverse --> >+ <div>3</div><div>4</div><div>1</div><div>2</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse --> >+ <div>4</div><div>3</div><div>2</div><div>1</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: column wrap-reverse --> >+ <div>3</div><div>1</div><div>4</div><div>2</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse --> >+ <div>4</div><div>2</div><div>3</div><div>1</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap-reverse", before flex-direction: --> >+ <div class="flexContainer"><!-- flex-flow: wrap-reverse row --> >+ <div>3</div><div>4</div><div>1</div><div>2</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse --> >+ <div>4</div><div>3</div><div>2</div><div>1</div> >+ </div> >+ <div class="flexContainer"> <!-- flex-flow: wrap-reverse column --> >+ <div>3</div><div>1</div><div>4</div><div>2</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse --> >+ <div>4</div><div>2</div><div>3</div><div>1</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now just specifying flex-wrap (no flex-direction) --> >+ <div class="flexContainer"><!-- flex-flow: wrap --> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap-reverse --> >+ <div>3</div><div>4</div><div>1</div><div>2</div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a29b89aa6904ca41a773638c99dec4da733fb5bc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-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> >+ <title>CSS Test: Testing all the values of the "flex-flow" shorthand property, with 4 flex items in each container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> >+ <link rel="match" href="flexbox-flex-flow-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ height: 60px; >+ width: 60px; >+ font: 10px sans-serif; >+ background: yellow; >+ float: left; >+ border: 1px solid black; >+ } >+ .flexContainer > * { >+ border: 1px dotted gray; >+ width: 28px; >+ height: 28px; >+ /* Explicitly set min-width & min-height to 0, to prevent their "auto" >+ value from influencing the sizes of our flex items (particularly for >+ the single-line chunks of this testcase, whose items may be shrunk a >+ little below the numerals' intrinsic sizes): */ >+ min-width: 0; >+ min-height: 0; >+ } >+ </style> >+</head> >+<body> >+ <!-- single-line (flex-wrap unspecified): --> >+ <div class="flexContainer" style="flex-flow: row"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap", after flex-direction: --> >+ <div class="flexContainer" style="flex-flow: row wrap"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column wrap"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap", before flex-direction: --> >+ <div class="flexContainer" style="flex-flow: wrap row"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap row-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap column"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap column-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap-reverse", after flex-direction: --> >+ <div class="flexContainer" style="flex-flow: row wrap-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column wrap-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap-reverse", before flex-direction: --> >+ <div class="flexContainer" style="flex-flow: wrap-reverse row"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap-reverse column"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now just specifying flex-wrap (no flex-direction) --> >+ <div class="flexContainer" style="flex-flow: wrap"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap-reverse"> >+ <div>1</div><div>2</div><div>3</div><div>4</div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a325959a23eca85e375fe0691b7a9d18fd3057c0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-002-expected.html >@@ -0,0 +1,133 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ height: 60px; >+ width: 60px; >+ font: 10px sans-serif; >+ background: yellow; >+ float: left; >+ border: 1px solid black; >+ } >+ .flexContainer > * { >+ border: 1px dotted gray; >+ width: 28px; >+ height: 28px; >+ float: left; >+ } >+ >+ /* The single-line flex containers' flex items are shrunk in main axis: */ >+ .singleLineHoriz > * { >+ width: 18px; >+ } >+ .singleLineVert > * { >+ height: 18px; >+ float: none; >+ } >+ .hidden { >+ /* We use this to hide the "4" box in each of the multi-line chunks. >+ The testcase has 3 flex items in each flex container, but it's easier >+ to write this reference case w/ a hidden 4th box as a space-filler. */ >+ visibility: hidden; >+ } >+ </style> >+</head> >+<body> >+ <!-- single-line (flex-wrap unspecified): --> >+ <div class="flexContainer singleLineHoriz"><!-- flex-flow: row --> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse --> >+ <div>3</div><div>2</div><div>1</div> >+ </div> >+ <div class="flexContainer singleLineVert"><!-- flex-flow: column --> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse --> >+ <div>3</div><div>2</div><div>1</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap", after flex-direction: --> >+ <div class="flexContainer"><!-- flex-flow: row wrap --> >+ <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: row-reverse wrap --> >+ <div>2</div><div>1</div><div class="hidden">4</div><div>3</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: column wrap --> >+ <div>1</div><div>3</div><div>2</div><div class="hidden">4</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: column-reverse wrap --> >+ <div>2</div><div class="hidden">4</div><div>1</div><div>3</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap", before flex-direction: --> >+ <div class="flexContainer"><!-- flex-flow: wrap row --> >+ <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap row-reverse --> >+ <div>2</div><div>1</div><div class="hidden">4</div><div>3</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap column --> >+ <div>1</div><div>3</div><div>2</div><div class="hidden">4</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap column-reverse --> >+ <div>2</div><div class="hidden">4</div><div>1</div><div>3</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap-reverse", after flex-direction: --> >+ <div class="flexContainer"><!-- flex-flow: row wrap-reverse --> >+ <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse --> >+ <div class="hidden">4</div><div>3</div><div>2</div><div>1</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: column wrap-reverse --> >+ <div>3</div><div>1</div><div class="hidden">4</div><div>2</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse --> >+ <div class="hidden">4</div><div>2</div><div>3</div><div>1</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap-reverse", before flex-direction: --> >+ <div class="flexContainer"><!-- flex-flow: wrap-reverse row --> >+ <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse --> >+ <div class="hidden">4</div><div>3</div><div>2</div><div>1</div> >+ </div> >+ <div class="flexContainer"> <!-- flex-flow: wrap-reverse column --> >+ <div>3</div><div>1</div><div class="hidden">4</div><div>2</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse --> >+ <div class="hidden">4</div><div>2</div><div>3</div><div>1</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now just specifying flex-wrap (no flex-direction) --> >+ <div class="flexContainer"><!-- flex-flow: wrap --> >+ <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> >+ </div> >+ <div class="flexContainer"><!-- flex-flow: wrap-reverse --> >+ <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8ba3abdf4bc39ee818c06bcdc3cf0fba281c1696 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-002.html >@@ -0,0 +1,126 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing all the values of the "flex-flow" shorthand property, with 3 flex items in each container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property"> >+ <link rel="match" href="flexbox-flex-flow-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ height: 60px; >+ width: 60px; >+ font: 10px sans-serif; >+ background: yellow; >+ float: left; >+ border: 1px solid black; >+ } >+ .flexContainer > * { >+ border: 1px dotted gray; >+ width: 28px; >+ height: 28px; >+ /* Explicitly set min-width & min-height to 0, to prevent their "auto" >+ value from influencing the sizes of our flex items (particularly for >+ the single-line chunks of this testcase, whose items may be shrunk a >+ little below the numerals' intrinsic sizes): */ >+ min-width: 0; >+ min-height: 0; >+ } >+ </style> >+</head> >+<body> >+ <!-- single-line (flex-wrap unspecified): --> >+ <div class="flexContainer" style="flex-flow: row"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap", after flex-direction: --> >+ <div class="flexContainer" style="flex-flow: row wrap"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column wrap"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap", before flex-direction: --> >+ <div class="flexContainer" style="flex-flow: wrap row"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap row-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap column"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap column-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap-reverse", after flex-direction: --> >+ <div class="flexContainer" style="flex-flow: row wrap-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column wrap-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now using "wrap-reverse", before flex-direction: --> >+ <div class="flexContainer" style="flex-flow: wrap-reverse row"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap-reverse column"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ >+ <div style="clear:both"></div> >+ >+ <!-- now just specifying flex-wrap (no flex-direction) --> >+ <div class="flexContainer" style="flex-flow: wrap"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ <div class="flexContainer" style="flex-flow: wrap-reverse"> >+ <div>1</div><div>2</div><div>3</div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..bb76cafff144e012dc97a270835339d6ce29b5fa >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-001-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 100px; >+ height: 12px; >+ margin-bottom: 2px; >+ } >+ div.halfMainSize { >+ width: 48px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.hugeMainSize { >+ width: 148px; >+ border: 1px solid purple; >+ background: fuchsia; >+ } >+ div.fullCrossSize { >+ height: 10px; >+ } >+ div.halfCrossSize { >+ height: 4px; >+ } >+ </style> >+</head> >+<body> >+ >+ <!-- Single small flex item --> >+ <div class="flexbox"> >+ <div class="halfMainSize fullCrossSize"></div> >+ </div> >+ >+ <!-- Single small flex item with 'margin-left' set to push it to protrude >+ from the far edge of the container (and to shrink as a result) --> >+ <div class="flexbox"> >+ <div class="halfMainSize fullCrossSize" >+ style="margin-left: 80px; width: 18px"></div> >+ </div> >+ >+ <!-- Single small inflexible flex item with 'margin-left' set to push it to >+ protrude from the far edge of the container --> >+ <div class="flexbox"> >+ <div class="halfMainSize fullCrossSize" >+ style="margin-left: 80px"></div> >+ </div> >+ >+ <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> >+ <div class="flexbox"> >+ <div class="halfMainSize fullCrossSize" style="float: left"></div> >+ <div class="halfMainSize fullCrossSize" style="float: left"></div> >+ </div> >+ >+ <!-- and now with some margin on first item, to force second item to wrap: --> >+ <div class="flexbox"> >+ <div class="halfMainSize halfCrossSize"></div> >+ <div class="halfMainSize halfCrossSize"></div> >+ </div> >+ >+ <!-- and now with some margin on second item, again forcing it to wrap: --> >+ <div class="flexbox"> >+ <div class="halfMainSize halfCrossSize"></div> >+ <div class="halfMainSize halfCrossSize"></div> >+ </div> >+ >+ <!-- Single large flex item: overflows (but does not wrap) and is shrunk >+ to fit container's main-size --> >+ <div class="flexbox"> >+ <div class="hugeMainSize fullCrossSize" style="width: 98px"></div> >+ </div> >+ >+ <!-- Single large flex item: overflows (but does not wrap) --> >+ <div class="flexbox"> >+ <div class="hugeMainSize fullCrossSize"></div> >+ </div> >+ >+ <!-- Small flex item, followed by large flex item (which wraps to >+ its own line and then shrink to container's main-size) --> >+ <div class="flexbox"> >+ <div class="halfMainSize halfCrossSize"></div> >+ <div class="hugeMainSize halfCrossSize" style="width: 98px"></div> >+ </div> >+ >+ <!-- Small flex item, followed by large inflexible flex item (which wraps to >+ its own line and then shrink to container's main-size) --> >+ <div class="flexbox"> >+ <div class="halfMainSize halfCrossSize"></div> >+ <div class="hugeMainSize halfCrossSize"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..75137a2f312a237ec77669a8b0310d7425e3bf4b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-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: Testing flex-wrap in horizontal flex containers</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> >+ <link rel="match" href="flexbox-flex-wrap-horiz-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-wrap: wrap; >+ border: 1px dashed black; >+ width: 100px; >+ height: 12px; >+ margin-bottom: 2px; >+ } >+ div.halfMainSize { >+ width: 48px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.hugeMainSize { >+ width: 148px; >+ border: 1px solid purple; >+ background: fuchsia; >+ } >+ </style> >+</head> >+<body> >+ >+ <!-- Single small flex item --> >+ <div class="flexbox"> >+ <div class="halfMainSize"></div> >+ </div> >+ >+ <!-- Single small flex item with 'margin-left' set to push it to protrude >+ from the far edge of the container (and to shrink as a result) --> >+ <div class="flexbox"> >+ <div class="halfMainSize" style="margin-left: 80px"></div> >+ </div> >+ >+ <!-- Single small inflexible flex item with 'margin-left' set to push it to >+ protrude from the far edge of the container --> >+ <div class="flexbox"> >+ <div class="halfMainSize" style="margin-left: 80px; flex: none"></div> >+ </div> >+ >+ <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> >+ <div class="flexbox"> >+ <div class="halfMainSize"></div> >+ <div class="halfMainSize"></div> >+ </div> >+ >+ <!-- and now with some margin on first item, to force second item to wrap: --> >+ <div class="flexbox"> >+ <div class="halfMainSize" style="margin-right: 1px"></div> >+ <div class="halfMainSize"></div> >+ </div> >+ >+ <!-- and now with some margin on second item, again forcing it to wrap: --> >+ <div class="flexbox"> >+ <div class="halfMainSize"></div> >+ <div class="halfMainSize" style="margin-right: 1px"></div> >+ </div> >+ >+ <!-- Single large flex item: overflows (but does not wrap) and is shrunk >+ to fit container's main-size --> >+ <div class="flexbox"> >+ <div class="hugeMainSize"></div> >+ </div> >+ >+ <!-- Single large flex item: overflows (but does not wrap) --> >+ <div class="flexbox"> >+ <div class="hugeMainSize" style="flex: none"></div> >+ </div> >+ >+ <!-- Small flex item, followed by large flex item (which wraps to >+ its own line and then shrink to container's main-size) --> >+ <div class="flexbox"> >+ <div class="halfMainSize"></div> >+ <div class="hugeMainSize"></div> >+ </div> >+ >+ <!-- Small flex item, followed by large inflexible flex item (which wraps to >+ its own line and then shrink to container's main-size) --> >+ <div class="flexbox"> >+ <div class="halfMainSize"></div> >+ <div class="hugeMainSize" style="flex: none"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..88c3beb19e90a3731a7da8aed3ef7170ea3fca07 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-002-expected.html >@@ -0,0 +1,64 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ min-width: 100px; >+ height: 12px; >+ float: left; >+ clear: both; >+ margin-bottom: 2px; >+ } >+ div.smallItem { >+ width: 30px; >+ border: 1px solid blue; >+ background: lightblue; >+ float: left; >+ } >+ div.fullCrossSize { >+ height: 10px; >+ } >+ div.halfCrossSize { >+ height: 4px; >+ } >+ </style> >+</head> >+<body> >+ >+ <!-- No flex items --> >+ <div class="flexbox"> >+ </div> >+ >+ <!-- Single small flex item --> >+ <div class="flexbox"> >+ <div class="smallItem fullCrossSize"></div> >+ </div> >+ >+ <!-- Multiple flex items, larger than flex container's min-size: --> >+ <div class="flexbox"> >+ <div class="smallItem fullCrossSize"></div> >+ <div class="smallItem fullCrossSize"></div> >+ <div class="smallItem fullCrossSize"></div> >+ <div class="smallItem fullCrossSize"></div> >+ <div class="smallItem fullCrossSize"></div> >+ </div> >+ >+ <!--- ...and now with flex container constrained by both min and max-size --> >+ <div class="flexbox" style="max-width: 120px"> >+ <div class="smallItem halfCrossSize"></div> >+ <div class="smallItem halfCrossSize"></div> >+ <div class="smallItem halfCrossSize"></div> >+ <div class="smallItem halfCrossSize"></div> >+ <div class="smallItem halfCrossSize"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..901a31ec578d301bbf845ac356e2c5c167a0084e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-002.html >@@ -0,0 +1,61 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Ensure that min-width is honored for horizontal multi-line flex containers</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> >+ <link rel="match" href="flexbox-flex-wrap-horiz-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-wrap: wrap; >+ border: 1px dashed black; >+ min-width: 100px; >+ height: 12px; >+ float: left; >+ clear: both; >+ margin-bottom: 2px; >+ } >+ div.smallItem { >+ width: 30px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ >+ <!-- No flex items --> >+ <div class="flexbox"> >+ </div> >+ >+ <!-- Single small flex item --> >+ <div class="flexbox"> >+ <div class="smallItem"></div> >+ </div> >+ >+ <!-- Multiple flex items, larger than flex container's min-size: --> >+ <div class="flexbox"> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ >+ <!--- ...and now with flex container constrained by both min and max-size --> >+ <div class="flexbox" style="max-width: 120px"> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..67f2c75da282128c8026a7072e2730cc15bd7b03 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-001-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 12px; >+ height: 100px; >+ margin-right: 2px; >+ float: left; >+ } >+ div.halfMainSize { >+ height: 48px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.hugeMainSize { >+ height: 148px; >+ border: 1px solid purple; >+ background: fuchsia; >+ } >+ div.fullCrossSize { >+ width: 10px; >+ } >+ div.halfCrossSize { >+ width: 4px; >+ } >+ </style> >+</head> >+<body> >+ >+ <!-- Single small flex item --> >+ <div class="flexbox"> >+ <div class="halfMainSize fullCrossSize"></div> >+ </div> >+ >+ <!-- Single small flex item with 'margin-left' set to push it to protrude >+ from the far edge of the container (and to shrink as a result) --> >+ <div class="flexbox"> >+ <div class="halfMainSize fullCrossSize" >+ style="margin-top: 80px; height: 18px"></div> >+ </div> >+ >+ <!-- Single small inflexible flex item with 'margin-left' set to push it to >+ protrude from the far edge of the container --> >+ <div class="flexbox"> >+ <div class="halfMainSize fullCrossSize" >+ style="margin-top: 80px"></div> >+ </div> >+ >+ <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> >+ <div class="flexbox"> >+ <div class="halfMainSize fullCrossSize"></div> >+ <div class="halfMainSize fullCrossSize"></div> >+ </div> >+ >+ <!-- and now with some margin on first item, to force second item to wrap: --> >+ <div class="flexbox"> >+ <div class="halfMainSize halfCrossSize" style="float: left"></div> >+ <div class="halfMainSize halfCrossSize" style="float: left"></div> >+ </div> >+ >+ <!-- and now with some margin on second item, again forcing it to wrap: --> >+ <div class="flexbox"> >+ <div class="halfMainSize halfCrossSize" style="float: left"></div> >+ <div class="halfMainSize halfCrossSize" style="float: left"></div> >+ </div> >+ >+ <!-- Single large flex item: overflows (but does not wrap) and is shrunk >+ to fit container's main-size --> >+ <div class="flexbox"> >+ <div class="hugeMainSize fullCrossSize" style="height: 98px"></div> >+ </div> >+ >+ <!-- Single large flex item: overflows (but does not wrap) --> >+ <div class="flexbox"> >+ <div class="hugeMainSize fullCrossSize"></div> >+ </div> >+ >+ <!-- Small flex item, followed by large flex item (which wraps to >+ its own line and then shrink to container's main-size) --> >+ <div class="flexbox"> >+ <div class="halfMainSize halfCrossSize" style="float: left"></div> >+ <div class="hugeMainSize halfCrossSize" style="float: left; height: 98px"></div> >+ </div> >+ >+ <!-- Small flex item, followed by large inflexible flex item (which wraps to >+ its own line and then shrink to container's main-size) --> >+ <div class="flexbox"> >+ <div class="halfMainSize halfCrossSize" style="float: left"></div> >+ <div class="hugeMainSize halfCrossSize" style="float: left"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b5229b65be4653a67d8de2be793ee1c93819be5b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-001.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: Testing flex-wrap in vertical flex containers</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> >+ <link rel="match" href="flexbox-flex-wrap-vert-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ border: 1px dashed black; >+ width: 12px; >+ height: 100px; >+ margin-right: 2px; >+ float: left; >+ } >+ div.halfMainSize { >+ height: 48px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.hugeMainSize { >+ height: 148px; >+ border: 1px solid purple; >+ background: fuchsia; >+ } >+ </style> >+</head> >+<body> >+ >+ <!-- Single small flex item --> >+ <div class="flexbox"> >+ <div class="halfMainSize"></div> >+ </div> >+ >+ <!-- Single small flex item with 'margin-top' set to push it to protrude >+ from the far edge of the container (and to shrink as a result) --> >+ <div class="flexbox"> >+ <div class="halfMainSize" style="margin-top: 80px"></div> >+ </div> >+ >+ <!-- Single small inflexible flex item with 'margin-top' set to push it to >+ protrude from the far edge of the container --> >+ <div class="flexbox"> >+ <div class="halfMainSize" style="margin-top: 80px; flex: none"></div> >+ </div> >+ >+ <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> >+ <div class="flexbox"> >+ <div class="halfMainSize"></div> >+ <div class="halfMainSize"></div> >+ </div> >+ >+ <!-- and now with some margin on first item, to force second item to wrap: --> >+ <div class="flexbox"> >+ <div class="halfMainSize" style="margin-bottom: 1px"></div> >+ <div class="halfMainSize"></div> >+ </div> >+ >+ <!-- and now with some margin on second item, again forcing it to wrap: --> >+ <div class="flexbox"> >+ <div class="halfMainSize"></div> >+ <div class="halfMainSize" style="margin-bottom: 1px"></div> >+ </div> >+ >+ <!-- Single large flex item: overflows (but does not wrap) and is shrunk >+ to fit container's main-size --> >+ <div class="flexbox"> >+ <div class="hugeMainSize"></div> >+ </div> >+ >+ <!-- Single large flex item: overflows (but does not wrap) --> >+ <div class="flexbox"> >+ <div class="hugeMainSize" style="flex: none"></div> >+ </div> >+ >+ <!-- Small flex item, followed by large flex item (which wraps to >+ its own line and then shrink to container's main-size) --> >+ <div class="flexbox"> >+ <div class="halfMainSize"></div> >+ <div class="hugeMainSize"></div> >+ </div> >+ >+ <!-- Small flex item, followed by large inflexible flex item (which wraps to >+ its own line and then shrink to container's main-size) --> >+ <div class="flexbox"> >+ <div class="halfMainSize"></div> >+ <div class="hugeMainSize" style="flex: none"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f9a4553ccbee361f31491dc91989d341ad9ac1d3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-002-expected.html >@@ -0,0 +1,59 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ border: 1px dashed black; >+ width: 12px; >+ min-height: 100px; >+ margin-right: 2px; >+ float: left; >+ } >+ div.smallItem { >+ height: 30px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ div.halfCrossSize { >+ width: 4px; >+ } >+ </style> >+</head> >+<body> >+ >+ <!-- No flex items --> >+ <div class="flexbox"> >+ </div> >+ >+ <!-- Single small flex item --> >+ <div class="flexbox"> >+ <div class="smallItem"></div> >+ </div> >+ >+ <!-- Multiple flex items, larger than flex container's min-size: --> >+ <div class="flexbox"> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ >+ <!--- ...and now with flex container constrained by both min and max-size --> >+ <div class="flexbox" style="max-height: 120px"> >+ <div class="smallItem halfCrossSize" style="float: left"></div> >+ <div class="smallItem halfCrossSize" style="float: left"></div> >+ <div class="smallItem halfCrossSize" style="float: left"></div> >+ <div class="smallItem halfCrossSize" style="float: left"></div> >+ <div class="smallItem halfCrossSize" style="float: left"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8a2dcbc402d7c3e8addc7a5b623b935922f6ff08 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-002.html >@@ -0,0 +1,61 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Ensure that min-height is honored for vertical multi-line flex containers</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> >+ <link rel="match" href="flexbox-flex-wrap-vert-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ border: 1px dashed black; >+ width: 12px; >+ min-height: 100px; >+ margin-right: 2px; >+ float: left; >+ } >+ div.smallItem { >+ height: 30px; >+ border: 1px solid blue; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ >+ <!-- No flex items --> >+ <div class="flexbox"> >+ </div> >+ >+ <!-- Single small flex item --> >+ <div class="flexbox"> >+ <div class="smallItem"></div> >+ </div> >+ >+ <!-- Multiple flex items, larger than flex container's min-size: --> >+ <div class="flexbox"> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ >+ <!--- ...and now with flex container constrained by both min and max-size --> >+ <div class="flexbox" style="max-height: 120px"> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..7e02b799f0f75b5d238ecc3c7bbaf87a53572e88 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001-expected.xhtml >@@ -0,0 +1,115 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case, with floated elements in place of flex items, and using >+ "position: relative" on those elements, to make z-index work on them >+ outside of a flex container. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .flexbox { >+ width: 90px; >+ height: 10px; >+ border: 2px solid gray; >+ margin-bottom: 10px; >+ } >+ .a { >+ width: 10px; >+ height: 10px; >+ background: lightblue; >+ min-width: 0; >+ float: left; >+ } >+ .b { >+ width: 10px; >+ height: 10px; >+ background: pink; >+ min-width: 0; >+ margin-right: 10px; >+ float: left; >+ } >+ .aKid { >+ margin-left: 3px; >+ margin-top: 3px; >+ width: 10px; >+ height: 10px; >+ background: steelblue; >+ border: 1px solid blue; >+ } >+ .bKid { >+ margin-left: 3px; >+ margin-top: 6px; >+ width: 10px; >+ height: 10px; >+ background: violet; >+ border: 1px solid purple; >+ } >+ >+ .z0, .z1, .zn1 { position: relative; } >+ .z0 { z-index: 0; } >+ .z1 { z-index: 1; } >+ .zn1 { z-index: -1; } >+ >+ </style> >+ </head> >+ <body> >+ <!-- No "z-index" --> >+ <div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div> >+ >+ <!-- Various "z-index" just on the first item --> >+ <div class="flexbox"> >+ <div class="a zn1"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ >+ <div class="a z0"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ >+ <div class="a z1"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div> >+ >+ <!-- Various "z-index" just on the second item --> >+ <div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b zn1"><div class="bKid"/></div> >+ >+ <div class="a"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ >+ <div class="a"><div class="aKid"/></div> >+ <div class="b z1"><div class="bKid"/></div> >+ </div> >+ >+ <!-- Various "z-index" on the first item, w/ "z-index:0" on second item --> >+ <div class="flexbox"> >+ <div class="a zn1"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ >+ <div class="a z0"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ >+ <div class="a z1"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ </div> >+ >+ <!-- Various "z-index" on the second item, w/ "z-index:0" on first item --> >+ <div class="flexbox"> >+ <div class="a z0"><div class="aKid"/></div> >+ <div class="b zn1"><div class="bKid"/></div> >+ >+ <div class="a z0"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ >+ <div class="a z0"><div class="aKid"/></div> >+ <div class="b z1"><div class="bKid"/></div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..fac905339110967578289f18ae156e4a651d81ab >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml >@@ -0,0 +1,114 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with flex items containing overlapping content, with >+ "z-index" set on some of them, which should make them create >+ stacking contexts. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing that 'z-index' property makes flex items form stacking contexts</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/> >+ <link rel="match" href="flexbox-items-as-stacking-contexts-001-ref.xhtml"/> >+ <style> >+ .flexbox { >+ width: 90px; >+ height: 10px; >+ border: 2px solid gray; >+ display: flex; >+ margin-bottom: 10px; >+ } >+ .a { >+ width: 10px; >+ height: 10px; >+ background: lightblue; >+ min-width: 0; >+ } >+ .b { >+ width: 10px; >+ height: 10px; >+ background: pink; >+ min-width: 0; >+ margin-right: 10px; >+ } >+ .aKid { >+ margin-left: 3px; >+ margin-top: 3px; >+ width: 10px; >+ height: 10px; >+ background: steelblue; >+ border: 1px solid blue; >+ } >+ .bKid { >+ margin-left: 3px; >+ margin-top: 6px; >+ width: 10px; >+ height: 10px; >+ background: violet; >+ border: 1px solid purple; >+ } >+ .z0 { z-index: 0; } >+ .z1 { z-index: 1; } >+ .zn1 { z-index: -1; } >+ >+ </style> >+ </head> >+ <body> >+ <!-- No "z-index" --> >+ <div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div> >+ >+ <!-- Various "z-index" just on the first item --> >+ <div class="flexbox"> >+ <div class="a zn1"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ >+ <div class="a z0"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ >+ <div class="a z1"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div> >+ >+ <!-- Various "z-index" just on the second item --> >+ <div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b zn1"><div class="bKid"/></div> >+ >+ <div class="a"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ >+ <div class="a"><div class="aKid"/></div> >+ <div class="b z1"><div class="bKid"/></div> >+ </div> >+ >+ <!-- Various "z-index" on the first item, w/ "z-index:0" on second item --> >+ <div class="flexbox"> >+ <div class="a zn1"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ >+ <div class="a z0"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ >+ <div class="a z1"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ </div> >+ >+ <!-- Various "z-index" on the second item, w/ "z-index:0" on first item --> >+ <div class="flexbox"> >+ <div class="a z0"><div class="aKid"/></div> >+ <div class="b zn1"><div class="bKid"/></div> >+ >+ <div class="a z0"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ >+ <div class="a z0"><div class="aKid"/></div> >+ <div class="b z1"><div class="bKid"/></div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a67a31936d9a09176e7e74115fd2d273734ad032 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002-expected.html >@@ -0,0 +1,66 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ body { font: 10px sans-serif } >+ .flexContainer { >+ background: orange; >+ width: 70px; >+ padding: 2px; >+ margin-bottom: 2px; >+ } >+ >+ .flexContainer > div:first-child { >+ margin-right: 10px; /* the space between the flex items, in testcase */ >+ } >+ >+ .item1 { >+ display: inline-block; >+ background: lightblue; >+ width: 30px; >+ } >+ .item2 { >+ display: inline-block; >+ background: yellow; >+ width: 30px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer" >+ ><div class="item1">ThisIsALongUnbrokenString</div >+ ><div class="item2">HereIsSomeMoreLongText</div >+ ></div> >+ >+ <div class="flexContainer" >+ ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div >+ ><div class="item2">HereIsSomeMoreLongText</div >+ ></div> >+ >+ <div class="flexContainer" >+ ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div >+ ><div class="item2">HereIsSomeMoreLongText</div >+ ></div> >+ >+ <div class="flexContainer" >+ ><div class="item2">HereIsSomeMoreLongText</div >+ ><div class="item1">ThisIsALongUnbrokenString</div >+ ></div> >+ >+ <div class="flexContainer" >+ ><div class="item2">HereIsSomeMoreLongText</div >+ ><div class="item1">ThisIsALongUnbrokenString</div >+ ></div> >+ >+ <div class="flexContainer" >+ ><div class="item2" style="position:relative">HereIsSomeMoreLongText</div >+ ><div class="item1">ThisIsALongUnbrokenString</div >+ ></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..4b21404a9bd71ce25aafbe1f972b6716f91bad8f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html >@@ -0,0 +1,90 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks flex items are painted atomically. In particular, >+ if one item has content that overflows into the region of another item, >+ then one item is painted "behind" the other; there shouldn't normally >+ any interleaving of backgrounds and content between the two items. >+ >+ This testcase also tests some special cases that will change the paint >+ ordering - specifically, the properties "position", "z-index", and >+ "order" on flex items. >+ --> >+<!-- This was resolved by the CSSWG in April 2013: >+ http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 --> >+<html> >+<head> >+ <title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks): atomically, in the absence of 'z-index' on descendants</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"> >+ <link rel="match" href="flexbox-items-as-stacking-contexts-002-ref.html"> >+ <style> >+ body { font: 10px sans-serif } >+ .flexContainer { >+ background: orange; >+ display: flex; >+ justify-content: space-between; >+ width: 70px; >+ padding: 2px; >+ margin-bottom: 2px; >+ } >+ .item1 { >+ background: lightblue; >+ width: 30px; >+ min-width: 0; /* disable default min-width:auto behavior */ >+ } >+ .item2 { >+ background: yellow; >+ width: 30px; >+ min-width: 0; /* disable default min-width:auto behavior */ >+ } >+ </style> >+</head> >+<body> >+ <!-- This container has two flex items, the first of which has content >+ sticking out & overlapping the second. If they're painting atomically >+ (and in the right order), the second item's background should cover the >+ first item's overflowing content. --> >+ <div class="flexContainer" >+ ><div class="item1">ThisIsALongUnbrokenString</div >+ ><div class="item2">HereIsSomeMoreLongText</div >+ ></div> >+ >+ <!-- Now, the first item is relatively positioned, which should make it paint >+ on top of everything. --> >+ <div class="flexContainer" >+ ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div >+ ><div class="item2">HereIsSomeMoreLongText</div >+ ></div> >+ >+ <!-- Now, the first item is has "z-index" set, which should make it paint on >+ top of everything. --> >+ <div class="flexContainer" >+ ><div class="item1" style="z-index: 1">ThisIsALongUnbrokenString</div >+ ><div class="item2">HereIsSomeMoreLongText</div >+ ></div> >+ >+ <!-- Now, the first item has "order" set to a higher value than default, >+ which should make it paint on top (and at the far right) --> >+ <div class="flexContainer" >+ ><div class="item1" style="order: 1">ThisIsALongUnbrokenString</div >+ ><div class="item2">HereIsSomeMoreLongText</div >+ ></div> >+ >+ <!-- And for thoroughness, let's set "order" to a lower value than default, >+ on the second item. (Should render the same as previous example.) --> >+ <div class="flexContainer" >+ ><div class="item1">ThisIsALongUnbrokenString</div >+ ><div class="item2" style="order: -1">HereIsSomeMoreLongText</div >+ ></div> >+ >+ <!-- ...but if we relatively position that second item, it should paint >+ on top again, despite its low "order" value. --> >+ <div class="flexContainer" >+ ><div class="item1">ThisIsALongUnbrokenString</div >+ ><div class="item2" style="order: -1; position: relative">HereIsSomeMoreLongText</div >+ ></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..814f06cca118885757e02d8d12c9b4d1df642dd9 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-expected.html >@@ -0,0 +1,71 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: orange; >+ width: 70px; >+ height: 20px; >+ padding: 2px; >+ margin-bottom: 2px; >+ } >+ .item1 { >+ display: inline-block; >+ background: lightblue; >+ width: 30px; >+ height: 16px; >+ padding: 2px; >+ margin-right: 2px; >+ vertical-align: top; >+ } >+ .item2 { >+ display: inline-block; >+ background: yellow; >+ width: 30px; >+ height: 16px; >+ padding: 2px; >+ vertical-align: top; >+ } >+ .grandchildA { >+ background: purple; >+ width: 80px; >+ height: 6px; >+ position: relative; >+ z-index: 10; >+ } >+ .grandchildB { >+ background: teal; >+ width: 80px; >+ height: 6px; >+ position: relative; >+ z-index: 20; >+ } >+ .grandchildC { >+ background: lime; >+ width: 20px; >+ height: 16px; >+ position: relative; >+ /* This z-index should interleave this content >+ between grandchildA and grandchildB: */ >+ z-index: 15; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer" >+ ><div class="item1" >+ ><div class="grandchildA"></div >+ ><div class="grandchildB"></div >+ ></div >+ ><div class="item2" >+ ><div class="grandchildC"></div >+ ></div >+ ></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5f0fd8ba35ee8214ac61edec55577b28b0e1c3f4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html >@@ -0,0 +1,80 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that flex items are painted as pseudo-stacking >+ contexts, instead of full stacking contexts. In other words, content >+ inside of one flex item should be able to iterleave between pieces of >+ content in another flex item, if we set appropriately interleaving >+ "z-index" values. --> >+<!-- This was resolved by the CSSWG in April 2013: >+ http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 --> >+<html> >+<head> >+ <title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks), instead of full stacking contexts: 'z-index' should let descendants interleave</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"> >+ <link rel="match" href="flexbox-items-as-stacking-contexts-003-ref.html"> >+ <style> >+ .flexContainer { >+ background: orange; >+ display: flex; >+ justify-content: space-between; >+ width: 70px; >+ height: 20px; >+ padding: 2px; >+ margin-bottom: 2px; >+ } >+ .item1 { >+ background: lightblue; >+ width: 30px; >+ min-width: 0; /* disable default min-width:auto behavior */ >+ padding: 2px; >+ } >+ .item2 { >+ background: yellow; >+ width: 30px; >+ padding: 2px; >+ } >+ .grandchildA { >+ background: purple; >+ width: 80px; >+ height: 6px; >+ position: relative; >+ z-index: 10; >+ } >+ .grandchildB { >+ background: teal; >+ width: 80px; >+ height: 6px; >+ position: relative; >+ z-index: 20; >+ } >+ .grandchildC { >+ background: lime; >+ width: 20px; >+ height: 16px; >+ position: relative; >+ /* This z-index should interleave this content >+ between grandchildA and grandchildB: */ >+ z-index: 15; >+ } >+ </style> >+</head> >+<body> >+ <!-- This flex container's first flex item has content that overflows >+ and overlap the second flex item. The z-index values are set such >+ that this content should interleave; grandchildC should >+ paint on top of grandchildA, but underneath grandchildB. --> >+ <div class="flexContainer" >+ ><div class="item1" >+ ><div class="grandchildA"></div >+ ><div class="grandchildB"></div >+ ></div >+ ><div class="item2" >+ ><div class="grandchildC"></div >+ ></div >+ ></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..e3f0276fda17436b653e236b359f5837c9257b40 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a-expected.xhtml >@@ -0,0 +1,145 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ margin-bottom: 2px; >+ line-height: 0; >+ } >+ div.flexbox > * { >+ display: inline-block; >+ } >+ div.a { >+ height: 10px; >+ width: 10px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 10px; >+ width: 50px; >+ background: pink; >+ } >+ div.c { >+ height: 10px; >+ width: 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 140px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 70px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 20px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b" style="margin-left: 140px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" >+ /><div class="b" style="margin-left: 20px" >+ /><div class="c" style="margin-left: 20px"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 35px" >+ /><div class="b" style="margin-left: 70px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: calc(40px / 6)" >+ /><div class="b" style="margin-left: calc(40px / 3)" >+ /><div class="c" style="margin-left: calc(40px / 3)"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: calc(140px / 3)" >+ /><div class="b" style="margin-left: calc(140px / 3)"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 10px" >+ /><div class="b" style="margin-left: 10px" >+ /><div class="c" style="margin-left: 10px"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 140px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..494c35bb68703a67ceb6e15817b221ddf488c13a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml >@@ -0,0 +1,139 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of horizontal flex containers, testing each >+ possible value of the 'justify-content' property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-horiz-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ display: flex; >+ margin-bottom: 2px; >+ } >+ div.a { >+ height: 10px; >+ flex: 0 10px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 10px; >+ flex: 0 50px; >+ background: pink; >+ } >+ div.c { >+ height: 10px; >+ flex: 0 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..e3f0276fda17436b653e236b359f5837c9257b40 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b-expected.xhtml >@@ -0,0 +1,145 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ margin-bottom: 2px; >+ line-height: 0; >+ } >+ div.flexbox > * { >+ display: inline-block; >+ } >+ div.a { >+ height: 10px; >+ width: 10px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 10px; >+ width: 50px; >+ background: pink; >+ } >+ div.c { >+ height: 10px; >+ width: 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 140px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 70px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 20px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b" style="margin-left: 140px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" >+ /><div class="b" style="margin-left: 20px" >+ /><div class="c" style="margin-left: 20px"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 35px" >+ /><div class="b" style="margin-left: 70px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: calc(40px / 6)" >+ /><div class="b" style="margin-left: calc(40px / 3)" >+ /><div class="c" style="margin-left: calc(40px / 3)"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: calc(140px / 3)" >+ /><div class="b" style="margin-left: calc(140px / 3)"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 10px" >+ /><div class="b" style="margin-left: 10px" >+ /><div class="c" style="margin-left: 10px"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 140px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..468d5150fb33d22e9bf56b23af6b74e87d04dd74 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml >@@ -0,0 +1,145 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of horizontal flex containers, testing each >+ possible value of the 'justify-content' property. The flex containers' >+ widths are determined by their "min-width" property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a horizontal flex container with "min-width"</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-horiz-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ min-width: 200px; >+ display: flex; >+ margin-bottom: 2px; >+ >+ /* Use "float" to trigger intrinsic sizing, which in this case will >+ make us clamp to "min-width": */ >+ float: left; >+ clear: both; >+ } >+ div.a { >+ height: 10px; >+ flex: 0 10px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 10px; >+ flex: 0 50px; >+ background: pink; >+ } >+ div.c { >+ height: 10px; >+ flex: 0 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..0e43e6ff880f9dba20c6cca74eaf5e4a51458496 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-002-expected.xhtml >@@ -0,0 +1,159 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ line-height: 0; >+ margin-bottom: 4px; >+ border: 1px dotted black; >+ } >+ div.flexbox > * { >+ vertical-align: top; >+ display: inline-block; >+ } >+ div.a { >+ height: 10px; >+ width: 10px; >+ background: lightgreen; >+ border-style: solid; >+ border-color: purple; >+ border-top-width: 1px; >+ border-right-width: 2px; >+ border-bottom-width: 3px; >+ border-left-width: 4px; >+ padding: 2px; >+ } >+ div.b { >+ height: 10px; >+ width: 50px; >+ background: pink; >+ padding: 4px 3px 2px 1px; >+ margin: 2px 3px 4px 5px; >+ } >+ div.c { >+ height: 10px; >+ width: 100px; >+ background: orange; >+ margin: 3px; >+ border: 2px dashed teal; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 180px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 118px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 90px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 59px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 4px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div style="margin-left: 118px"><div class="b"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" >+ /><div style="margin-left: 4px"><div class="b"/></div >+ ><div style="margin-left: 4px"><div class="c"/></div> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 90px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 29.5px" >+ /><div style="margin-left: 59px"><div class="b"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: calc(8px / 6)" >+ /><div style="margin-left: calc(8px / 3)"><div class="b"/></div >+ ><div style="margin-left: calc(8px / 3)"><div class="c"/></div> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 90px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: calc(118px / 3)" >+ /><div style="margin-left: calc(118px / 3)"><div class="b"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 2px" >+ /><div style="margin-left: 2px"><div class="b"/></div >+ ><div style="margin-left: 2px"><div class="c"/></div> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 180px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 118px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..93d34ab798ba277e1a77506aaa764cee4c80b7ca >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml >@@ -0,0 +1,152 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of flex containers testing each possible value of >+ the 'justify-content' property, with margin/border/padding on the >+ flex items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a horizontal flex container, with margins/border/padding on flex items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-horiz-002-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ display: flex; >+ margin-bottom: 4px; >+ border: 1px dotted black; >+ } >+ div.a { >+ height: 10px; >+ flex: 0 10px; >+ background: lightgreen; >+ border-style: solid; >+ border-color: purple; >+ border-top-width: 1px; >+ border-right-width: 2px; >+ border-bottom-width: 3px; >+ border-left-width: 4px; >+ padding: 2px; >+ } >+ div.b { >+ height: 10px; >+ flex: 0 50px; >+ background: pink; >+ padding: 4px 3px 2px 1px; >+ margin: 2px 3px 4px 5px; >+ } >+ div.c { >+ height: 10px; >+ flex: 0 100px; >+ background: orange; >+ margin: 3px; >+ border: 2px dashed teal; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..4ad2dc202ea3c1800fb189315b691c8ada9aaadd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003-expected.xhtml >@@ -0,0 +1,138 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ body { margin-left: 0px; } /* We'll apply margins w/ style attribute */ >+ div.flexbox { >+ margin-bottom: 2px; >+ line-height: 0; >+ } >+ div.flexbox > * { >+ display: inline-block; >+ } >+ div.a { >+ height: 20px; >+ width: 35px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 20px; >+ width: 40px; >+ background: pink; >+ } >+ div.c { >+ height: 20px; >+ width: 45px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="margin-left: 95px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 55px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 10px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="margin-left: 97.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 77.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 55px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="margin-left: 97.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 77.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 55px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="margin-left: 97.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 77.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 55px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="margin-left: 95px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 55px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 10px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..40c8fb5c027bd5f0c7823f4a327d97513a187d3c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml >@@ -0,0 +1,147 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a variety of 'display: flex' examples testing each >+ possible value of the 'justify-content' property, and with each >+ individual flex item being wider than the flexbox itself (so that >+ there isn't any packing space available). >+ * For 'flex-start'/'space-between', we should overflow on the end >+ (right) side. >+ * For 'flex-end', we should overflow on the start (left) side. >+ * For 'center'/'space-around', we should overflow equally on both sides. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-horiz-003-ref.xhtml"/> >+ <style> >+ body { margin-left: 100px; } /* So we can see left-overflowed stuff */ >+ div.flexbox { >+ width: 30px; >+ display: flex; >+ margin-bottom: 2px; >+ } >+ div.a { >+ height: 20px; >+ flex: 0 0 35px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 20px; >+ flex: 0 0 40px; >+ background: pink; >+ } >+ div.c { >+ height: 20px; >+ flex: 0 0 45px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-004-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-004-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..231729d8565fe7c232c0506a9d161031428c63b7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-004-expected.xhtml >@@ -0,0 +1,150 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ body { margin-left: 0px; } /* We'll apply margins w/ style attribute */ >+ div.flexbox { >+ line-height: 0; >+ margin-bottom: 4px; >+ } >+ div.flexbox > * { >+ vertical-align: top; >+ display: inline-block; >+ } >+ div.a { >+ height: 10px; >+ width: 35px; >+ background: lightgreen; >+ border-style: solid; >+ border-color: purple; >+ border-top-width: 1px; >+ border-right-width: 2px; >+ border-bottom-width: 3px; >+ border-left-width: 4px; >+ padding: 2px; >+ } >+ div.b { >+ height: 10px; >+ width: 40px; >+ background: pink; >+ padding: 4px 3px 2px 1px; >+ margin: 2px 3px 4px 5px; >+ } >+ div.c { >+ height: 10px; >+ width: 45px; >+ background: orange; >+ margin: 3px; >+ border: 2px dashed teal; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="margin-left: 85px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 33px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: -22px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="margin-left: 92.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 66.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 39px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="margin-left: 92.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 66.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 39px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="margin-left: 92.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 66.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 39px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="margin-left: 85px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-left: 33px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-left: -22px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..8f46426e4f67df2e13ad47a69a31a86d909b66de >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml >@@ -0,0 +1,158 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a variety of 'display: flex' examples testing each >+ possible value of the 'justify-content' property, and with each >+ individual flex item being wider than the flexbox itself (so that >+ there isn't any packing space available). >+ * For 'flex-start'/'space-between', we should overflow on the end >+ (right) side. >+ * For 'flex-end', we should overflow on the start (left) side. >+ * For 'center'/'space-around', we should overflow equally on both sides. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow, with margins/border/padding on flex items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-horiz-004-ref.xhtml"/> >+ <style> >+ body { margin-left: 100px; } /* So we can see left-overflowed stuff */ >+ div.flexbox { >+ width: 30px; >+ display: flex; >+ margin-bottom: 4px; >+ } >+ div.a { >+ height: 10px; >+ flex: 0 0 35px; >+ background: lightgreen; >+ border-style: solid; >+ border-color: purple; >+ border-top-width: 1px; >+ border-right-width: 2px; >+ border-bottom-width: 3px; >+ border-left-width: 4px; >+ padding: 2px; >+ } >+ div.b { >+ height: 10px; >+ flex: 0 0 40px; >+ background: pink; >+ padding: 4px 3px 2px 1px; >+ margin: 2px 3px 4px 5px; >+ } >+ div.c { >+ height: 10px; >+ flex: 0 0 45px; >+ background: orange; >+ margin: 3px; >+ border: 2px dashed teal; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..82f872d2918c4701854ac366cf6a850a2440ea7c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005-expected.xhtml >@@ -0,0 +1,189 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ body { line-height: 0; } >+ >+ div.flexbox > * { >+ display: inline-block; >+ } >+ div.a { >+ height: 20px; >+ width: 10px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 20px; >+ width: 50px; >+ background: pink; >+ } >+ div.c { >+ height: 20px; >+ width: 100px; >+ background: orange; >+ } >+ .centerParent { >+ text-align: center; >+ } >+ .center { >+ display: inline-block; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="float:right; clear:right;"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="float:right; clear:right;"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="float:right; clear:right;"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ <div style="clear:right;"></div> >+ >+ <!-- center --> >+ <div class="centerParent"> >+ <div class="flexbox center"> >+ <div class="a"/> >+ </div> >+ </div> >+ <div class="centerParent"> >+ <div class="flexbox center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ </div> >+ <div class="centerParent"> >+ <div class="flexbox center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b" style="float: right"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="display:block; float: left"/> >+ <div class="c" style="float:right"/> >+ <!-- Use fixed-size margins to subtract space for "a" and "c", and then >+ use auto margins to center 'b' within the remaining space --> >+ <div style="display: block; margin-left: 10px; margin-right: 100px"> >+ <div class="b" style="margin: auto"/> >+ </div> >+ </div> >+ >+ <!-- space-around --> >+ <!-- Center "a" here just as we did above in the "center" case. --> >+ <div class="centerParent"> >+ <div class="flexbox center"> >+ <div class="a"/> >+ </div> >+ </div> >+ <!-- For the rest, we'll use a flex container with invisible flexible items >+ instead of packing space. That's simpler than trying to hack up >+ a width-independent reference case for "justify-content: space-around". >+ (There are other reftests to ensure that basic flex container >+ behavior is correct, so it's safe to rely on it here.) --> >+ <div class="flexbox" style="display: flex"> >+ <div style="flex: 0.5"/> >+ <div class="a"/> >+ <div style="flex: 1"/> >+ <div class="b"/> >+ <div style="flex: 0.5"/> >+ </div> >+ <div class="flexbox" style="display: flex"> >+ <div style="flex: 0.5"/> >+ <div class="a"/> >+ <div style="flex: 1"/> >+ <div class="b"/> >+ <div style="flex: 1"/> >+ <div class="c"/> >+ <div style="flex: 0.5"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <!-- Center "a" here just as we did above in the "center" case. --> >+ <div class="centerParent"> >+ <div class="flexbox center"> >+ <div class="a"/> >+ </div> >+ </div> >+ <!-- As above with space-around, we'll use a flex container with invisible >+ flexible items instead of packing space. --> >+ <div class="flexbox" style="display: flex"> >+ <div style="flex: 1"/> >+ <div class="a"/> >+ <div style="flex: 1"/> >+ <div class="b"/> >+ <div style="flex: 1"/> >+ </div> >+ <div class="flexbox" style="display: flex"> >+ <div style="flex: 1"/> >+ <div class="a"/> >+ <div style="flex: 1"/> >+ <div class="b"/> >+ <div style="flex: 1"/> >+ <div class="c"/> >+ <div style="flex: 1"/> >+ </div> >+ >+ >+ <!-- left --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="float:right; clear:right;"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="float:right; clear:right;"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="float:right; clear:right;"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ <div style="clear:right;"></div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..53cba03fbe579ee64179cb5c90cc9734beab9366 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml >@@ -0,0 +1,138 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase to exercise each possible value of the 'justify-content' >+ property, in an auto-sized horizontal flex container. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in an auto-sized horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-horiz-005-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ display: flex; >+ } >+ div.a { >+ height: 20px; >+ flex: 0 10px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 20px; >+ flex: 0 50px; >+ background: pink; >+ } >+ div.c { >+ height: 20px; >+ flex: 0 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..7723b5fa2080af80c15890c7e0b73b16ae25c7fa >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006-expected.xhtml >@@ -0,0 +1,192 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> >+ <style> >+ body { line-height: 0; } >+ >+ div.flexbox { >+ width: 200px; >+ margin-bottom: 2px; >+ direction: rtl; >+ } >+ div.flexbox > * { >+ display: inline-block; >+ } >+ div.a { >+ height: 20px; >+ width: 10px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 20px; >+ width: 50px; >+ background: pink; >+ } >+ div.c { >+ height: 20px; >+ width: 100px; >+ background: orange; >+ } >+ .centerParent { >+ text-align: center; >+ } >+ .center { >+ display: inline-block; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="text-align: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="text-align: left;"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="text-align: left;"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="centerParent"> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ </div> >+ <div class="centerParent"> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ </div> >+ <div class="centerParent"> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b" style="float: left"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="display:block; float: right"/> >+ <div class="c" style="float:left"/> >+ <!-- Use fixed-size margins to subtract space for "a" and "c", and then >+ use auto margins to center 'b' within the remaining space --> >+ <div style="display: block; margin-right: 10px; margin-left: 100px"> >+ <div class="b" style="margin: auto"/> >+ </div> >+ </div> >+ >+ <!-- space-around --> >+ <!-- Center "a" here just as we did above in the "center" case. --> >+ <div class="centerParent"> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ </div> >+ <!-- For the rest, we'll use a flex container with invisible flexible items >+ instead of packing space. That's simpler than trying to hack up >+ a width-independent reference case for "justify-content: space-around". >+ (There are other reftests to ensure that basic flex container >+ behavior is correct, so it's safe to rely on it here.) --> >+ <div class="flexbox" style="display: flex"> >+ <div style="flex: 0.5"/> >+ <div class="a"/> >+ <div style="flex: 1"/> >+ <div class="b"/> >+ <div style="flex: 0.5"/> >+ </div> >+ <div class="flexbox" style="display: flex"> >+ <div style="flex: 0.5"/> >+ <div class="a"/> >+ <div style="flex: 1"/> >+ <div class="b"/> >+ <div style="flex: 1"/> >+ <div class="c"/> >+ <div style="flex: 0.5"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <!-- Center "a" here just as we did above in the "center" case. --> >+ <div class="centerParent"> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ </div> >+ <!-- As above with space-around, we'll use a flex container with invisible >+ flexible items instead of packing space. --> >+ <div class="flexbox" style="display: flex"> >+ <div style="flex: 1"/> >+ <div class="a"/> >+ <div style="flex: 1"/> >+ <div class="b"/> >+ <div style="flex: 1"/> >+ </div> >+ <div class="flexbox" style="display: flex"> >+ <div style="flex: 1"/> >+ <div class="a"/> >+ <div style="flex: 1"/> >+ <div class="b"/> >+ <div style="flex: 1"/> >+ <div class="c"/> >+ <div style="flex: 1"/> >+ </div> >+ >+ >+ <!-- left --> >+ <div class="flexbox" style="text-align:left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="text-align:left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="text-align:left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..dcbe6184c7e8156bad3c87c95af58d8e335fe958 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml >@@ -0,0 +1,140 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase to exercise each possible value of the 'justify-content' >+ property, in an auto-sized horizontal flex container. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in an auto-sized reversed horizontal flex container</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-horiz-006-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-direction: row-reverse; >+ width: 200px; >+ margin-bottom: 2px; >+ } >+ div.a { >+ height: 20px; >+ flex: 0 10px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 20px; >+ flex: 0 50px; >+ background: pink; >+ } >+ div.c { >+ height: 20px; >+ flex: 0 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001a-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001a-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..20f1c5df34e257358ad8c5ace97ee5b0fafb8864 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001a-expected.xhtml >@@ -0,0 +1,143 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ margin-right: 2px; >+ float: left; >+ } >+ div.a { >+ width: 20px; >+ height: 10px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ height: 50px; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ height: 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 140px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 70px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 20px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b" style="margin-top: 140px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" >+ /><div class="b" style="margin-top: 20px" >+ /><div class="c" style="margin-top: 20px"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 35px" >+ /><div class="b" style="margin-top: 70px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: calc(40px / 6)" >+ /><div class="b" style="margin-top: calc(40px / 3)" >+ /><div class="c" style="margin-top: calc(40px / 3)"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: calc(140px / 3)" >+ /><div class="b" style="margin-top: calc(140px / 3)"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 10px" >+ /><div class="b" style="margin-top: 10px" >+ /><div class="c" style="margin-top: 10px"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..d4b32b3914483f7673ba28b14914e7587556e5a1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml >@@ -0,0 +1,141 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of vertical flex containers, testing each >+ possible value of the 'justify-content' property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ display: flex; >+ flex-direction: column; >+ margin-right: 2px; >+ float: left; >+ } >+ div.a { >+ width: 20px; >+ flex: 0 10px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ flex: 0 50px; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ flex: 0 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001b-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001b-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..20f1c5df34e257358ad8c5ace97ee5b0fafb8864 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001b-expected.xhtml >@@ -0,0 +1,143 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ margin-right: 2px; >+ float: left; >+ } >+ div.a { >+ width: 20px; >+ height: 10px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ height: 50px; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ height: 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 140px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 70px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 20px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b" style="margin-top: 140px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" >+ /><div class="b" style="margin-top: 20px" >+ /><div class="c" style="margin-top: 20px"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 35px" >+ /><div class="b" style="margin-top: 70px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: calc(40px / 6)" >+ /><div class="b" style="margin-top: calc(40px / 3)" >+ /><div class="c" style="margin-top: calc(40px / 3)"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: calc(140px / 3)" >+ /><div class="b" style="margin-top: calc(140px / 3)"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 10px" >+ /><div class="b" style="margin-top: 10px" >+ /><div class="c" style="margin-top: 10px"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..0ce154e2421b14c0707f5243760e878c71e2e280 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml >@@ -0,0 +1,142 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of vertical flex containers, testing each >+ possible value of the 'justify-content' property. The flex containers' >+ heights are determined by their "min-height" property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a vertical flex container with "min-height"</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ min-height: 200px; >+ display: flex; >+ flex-direction: column; >+ margin-right: 2px; >+ float: left; >+ } >+ div.a { >+ width: 20px; >+ flex: 0 10px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ flex: 0 50px; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ flex: 0 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..d0ca310120185f630170218f97bb70ead05d837e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-002-expected.xhtml >@@ -0,0 +1,156 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ margin-right: 2px; >+ border: 1px dotted black; >+ float: left; >+ } >+ div.a { >+ width: 10px; >+ height: 10px; >+ background: lightgreen; >+ border-style: solid; >+ border-color: purple; >+ border-top-width: 4px; >+ border-right-width: 3px; >+ border-bottom-width: 2px; >+ border-left-width: 1px; >+ padding: 2px; >+ } >+ div.b { >+ width: 10px; >+ height: 50px; >+ background: pink; >+ padding: 1px 2px 3px 4px; >+ margin: 5px 4px 3px 2px; >+ } >+ div.c { >+ width: 10px; >+ height: 100px; >+ background: orange; >+ margin: 3px; >+ margin-top: 6px; /* Increased to counteract for collapsing */ >+ border: 2px dashed teal; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 180px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 118px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 8px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 90px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 59px"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 4px"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div style="margin-top: 123px"><div class="b"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" >+ /><div style="margin-top: 9px"><div class="b"/></div >+ ><div style="margin-top: 10px"><div class="c"/></div> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 90px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 29.5px" >+ /><div style="margin-top: 64px"><div class="b"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: calc(8px / 6)" >+ /><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div >+ ><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 90px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: calc(118px / 3)" >+ /><div style="margin-top: calc(5px + 118px / 3)"><div class="b"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 2px" >+ /><div style="margin-top: 7px"><div class="b"/></div >+ ><div style="margin-top: 8px"><div class="c"/></div> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..21683a6cc7d3e480409849b11e5fd3baecb60644 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-002.xhtml >@@ -0,0 +1,154 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of flex containers testing each possible value of >+ the 'justify-content' property, with margin/border/padding on the >+ flex items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a vertical flex container, with margins/border/padding on flex items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-vert-002-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ display: flex; >+ flex-direction: column; >+ margin-right: 2px; >+ float: left; >+ border: 1px dotted black; >+ } >+ div.a { >+ width: 10px; >+ flex: 0 10px; >+ background: lightgreen; >+ border-style: solid; >+ border-color: purple; >+ border-top-width: 4px; >+ border-right-width: 3px; >+ border-bottom-width: 2px; >+ border-left-width: 1px; >+ padding: 2px; >+ } >+ div.b { >+ width: 10px; >+ flex: 0 50px; >+ background: pink; >+ padding: 1px 2px 3px 4px; >+ margin: 5px 4px 3px 2px; >+ } >+ div.c { >+ width: 10px; >+ flex: 0 100px; >+ background: orange; >+ margin: 3px; >+ border: 2px dashed teal; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-003-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-003-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..12064db1a5df2dbe82b214d8bc92ee78dcd0b350 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-003-expected.xhtml >@@ -0,0 +1,136 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ body { margin-top: 0px; } /* We'll apply margins w/ style attribute */ >+ div.flexbox { >+ height: 200px; >+ margin-right: 2px; >+ float: left; >+ } >+ div.a { >+ width: 10px; >+ height: 35px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 10px; >+ height: 40px; >+ background: pink; >+ } >+ div.c { >+ width: 10px; >+ height: 45px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="margin-top: 95px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 55px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 10px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="margin-top: 97.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 77.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 55px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="margin-top: 97.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 77.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 55px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="margin-top: 97.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 77.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 55px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-003.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-003.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..8b99455e71590dc294be187f8ebfde6a43d6ed76 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-003.xhtml >@@ -0,0 +1,150 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of vertical flex containers testing each possible >+ value of the 'justify-content' property, and with each individual >+ flex item being larger than the flexbox itself (so that there isn't any >+ packing space available). >+ >+ * For 'flex-start'/'space-between', we should overflow on the end >+ (bottom) side. >+ * For 'flex-end', we should overflow on the start (top) side. >+ * For 'center'/'space-around', we should overflow equally on both sides. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-vert-003-ref.xhtml"/> >+ <style> >+ body { margin-top: 100px; } /* So we can see top-overflowed stuff */ >+ div.flexbox { >+ height: 30px; >+ display: flex; >+ flex-direction: column; >+ margin-right: 2px; >+ float: left; >+ } >+ div.a { >+ width: 10px; >+ flex: 0 0 35px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 10px; >+ flex: 0 0 40px; >+ background: pink; >+ } >+ div.c { >+ width: 10px; >+ flex: 0 0 45px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-004-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-004-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b3a45e06f13fdfee0672197b49db244e90cf73d2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-004-expected.xhtml >@@ -0,0 +1,147 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ body { margin-top: 0px; } /* We'll apply margins w/ style attribute */ >+ div.flexbox { >+ margin-right: 4px; >+ float: left; >+ } >+ div.a { >+ width: 10px; >+ height: 35px; >+ background: lightgreen; >+ border-style: solid; >+ border-color: purple; >+ border-top-width: 4px; >+ border-right-width: 3px; >+ border-bottom-width: 2px; >+ border-left-width: 1px; >+ padding: 2px; >+ } >+ div.b { >+ width: 10px; >+ height: 40px; >+ background: pink; >+ padding: 1px 2px 3px 4px; >+ margin: 5px 4px 3px 2px; >+ } >+ div.c { >+ width: 10px; >+ height: 45px; >+ background: orange; >+ margin: 3px; >+ margin-top: 6px; /* Increased to counteract for collapsing */ >+ border: 2px dashed teal; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="margin-top: 85px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 33px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: -22px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="margin-top: 92.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 66.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 39px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="margin-top: 92.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 66.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 39px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="margin-top: 92.5px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 66.5px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 39px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="margin-top: 100px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-004.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-004.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..770ba7ba44c01f68250137c88c28f0596eec06c2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-004.xhtml >@@ -0,0 +1,161 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of vertical flex containers, testing each possible >+ value of the 'justify-content' property, and with each individual >+ flex item being larger than the flexbox itself (so that there isn't any >+ packing space available). Also, we've got margin/border/padding on the >+ flex items. >+ * For 'flex-start'/'space-between', we should overflow on the end >+ (bottom) side. >+ * For 'flex-end', we should overflow on the start (top) side. >+ * For 'center'/'space-around', we should overflow equally on both sides. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow, with margins/border/padding on flex items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-vert-004-ref.xhtml"/> >+ <style> >+ body { margin-top: 100px; } /* So we can see top-overflowed stuff */ >+ div.flexbox { >+ height: 30px; >+ display: flex; >+ flex-direction: column; >+ margin-right: 4px; >+ float: left; >+ } >+ div.a { >+ width: 10px; >+ flex: 0 0 35px; >+ background: lightgreen; >+ border-style: solid; >+ border-color: purple; >+ border-top-width: 4px; >+ border-right-width: 3px; >+ border-bottom-width: 2px; >+ border-left-width: 1px; >+ padding: 2px; >+ } >+ div.b { >+ width: 10px; >+ flex: 0 0 40px; >+ background: pink; >+ padding: 1px 2px 3px 4px; >+ margin: 5px 4px 3px 2px; >+ } >+ div.c { >+ width: 10px; >+ flex: 0 0 45px; >+ background: orange; >+ margin: 3px; >+ border: 2px dashed teal; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-005-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-005-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..ebc97819a5002c97d1bc57e895755176c114732f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-005-expected.xhtml >@@ -0,0 +1,135 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ margin-right: 2px; >+ float: left; >+ border: 1px dotted black; >+ } >+ div.a { >+ width: 20px; >+ height: 10px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ height: 50px; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ height: 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-005.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-005.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..bb99dd09b45f72c6aeb260ebd8e37782c173c01d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-005.xhtml >@@ -0,0 +1,144 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase to exercise each possible value of the 'justify-content' >+ property, in an auto-sized vertical flex container. The flex container >+ should shrink-wrap its contents' heights, leaving no packing space >+ available. So, the "justify-content" values should have no effect >+ in this testcase. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in an auto-sized vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-vert-005-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ display: flex; >+ flex-direction: column; >+ margin-right: 2px; >+ float: left; >+ border: 1px dotted black; >+ } >+ div.a { >+ width: 20px; >+ flex: 0 10px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ flex: 0 50px; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ flex: 0 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b1a5bf2a9894bd421759a3abdb21fe9181a3672d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006-expected.xhtml >@@ -0,0 +1,143 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ margin-right: 2px; >+ float: left; >+ } >+ div.a { >+ width: 20px; >+ height: 10px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ height: 50px; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ height: 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top:190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top:140px"/><div class="a"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top:190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top:140px"/><div class="a"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/><div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/><div class="b"/><div class="a"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top: 70px"/><div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top:190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/><div class="a" style="margin-top: 140px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" >+ /><div class="b" style="margin-top: 20px" >+ /><div class="a" style="margin-top: 20px"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top: 35px" >+ /><div class="a" style="margin-top: 70px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top: calc(40px / 6)" >+ /><div class="b" style="margin-top: calc(40px / 3)" >+ /><div class="a" style="margin-top: calc(40px / 3)"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top: calc(140px / 3)" >+ /><div class="a" style="margin-top: calc(140px / 3)"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top: 10px" >+ /><div class="b" style="margin-top: 10px" >+ /><div class="a" style="margin-top: 10px"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/><div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/><div class="b"/><div class="a"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/><div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/><div class="b"/><div class="a"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..38a7f91d783c246a42b2e88c14d0a173142afddf >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml >@@ -0,0 +1,141 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of vertical flex containers, testing each >+ possible value of the 'justify-content' property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a vertical flex container</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-vert-006-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ display: flex; >+ flex-direction: column-reverse; >+ margin-right: 2px; >+ float: left; >+ } >+ div.a { >+ width: 20px; >+ flex: 0 10px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ flex: 0 50px; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ flex: 0 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..0b99be2f2538d1cafbaeec4485a9c7dcd4f0cfde >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001-expected.xhtml >@@ -0,0 +1,143 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ margin-right: 2px; >+ float: left; >+ } >+ div.a { >+ width: 20px; >+ height: 10px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ height: 50px; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ height: 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top:190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top:140px"/><div class="a"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top:190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top:140px"/><div class="a"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/><div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/><div class="b"/><div class="a"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top: 70px"/><div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top:190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/><div class="a" style="margin-top: 140px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" >+ /><div class="b" style="margin-top: 20px" >+ /><div class="a" style="margin-top: 20px"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top: 35px" >+ /><div class="a" style="margin-top: 70px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top: calc(40px / 6)" >+ /><div class="b" style="margin-top: calc(40px / 3)" >+ /><div class="a" style="margin-top: calc(40px / 3)"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 95px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top: calc(140px / 3)" >+ /><div class="a" style="margin-top: calc(140px / 3)"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top: 10px" >+ /><div class="b" style="margin-top: 10px" >+ /><div class="a" style="margin-top: 10px"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/><div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/><div class="b"/><div class="a"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox"> >+ <div class="a" style="margin-top: 190px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="margin-top: 140px"/><div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..f676c6c1cdc5eceaa0ccb5fb77e7f4650618fb0b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml >@@ -0,0 +1,142 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a series of vertical flex containers, testing each >+ possible value of the 'justify-content' property. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing 'justify-content' in a vertical writing mode flex container</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> >+ <link rel="match" href="flexbox-justify-content-wmvert-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ height: 200px; >+ display: flex; >+ flex-direction: row-reverse; >+ margin-right: 2px; >+ float: left; >+ writing-mode: vertical-lr; >+ } >+ div.a { >+ width: 20px; >+ flex: 0 10px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ flex: 0 50px; >+ background: pink; >+ } >+ div.c { >+ width: 20px; >+ flex: 0 100px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ >+ <!-- default (start) --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-start --> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-start"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- flex-end --> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: flex-end"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- center --> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: center"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-between --> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-between"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-around --> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-around"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- space-evenly --> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: space-evenly"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- left --> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: left"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- right --> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox" style="justify-content: right"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..1321e5a3878b353f54db7459517539dd9b779ab2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-001-expected.xhtml >@@ -0,0 +1,87 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 20px; } >+ div.flexbox { >+ width: 200px; >+ background: lightgray; >+ margin-bottom: 2px; >+ } >+ div.a { >+ width: 20px; >+ background: green; >+ display: inline-block; >+ } >+ div.b { >+ width: 20px; >+ background: pink; >+ display: inline-block; >+ } >+ div.c { >+ width: 20px; >+ background: purple; >+ display: inline-block; >+ } >+ >+ <!-- These classes allow us to conveniently/concisely specify margin >+ values below, for exact positioning of the items on each reference >+ line. ("l" = "margin-_l_eft", and the number = number of pixels) --> >+ div.l180 { margin-left: 180px } >+ div.l90 { margin-left: 90px } >+ div.l80 { margin-left: 80px } >+ div.l70 { margin-left: 70px } >+ div.l53 { margin-left: calc(160px / 3) } <!-- == 53.33333px --> >+ div.l35 { margin-left: 35px } >+ </style> >+ </head> >+ <body> >+ <!-- just one item --> >+ <div class="flexbox"> >+ <div class="a l180"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b l90"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/> >+ </div> >+ >+ <!-- Two items --> >+ <div class="flexbox"> >+ <div class="a l53"/><div class="b l53"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a l80"/><div class="c"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b l53"/><div class="c l53"/> >+ </div> >+ >+ <!-- Three items --> >+ <div class="flexbox"> >+ <div class="a l35"/><div class="b l35"/><div class="c l35"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a l35"/><div class="c"/><div class="b l70"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b l35"/><div class="a l70"/><div class="c"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b l35"/><div class="c l35"/><div class="a l70"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/><div class="a l70"/><div class="b l35"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/><div class="b l70"/><div class="a l70"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..76d7a88312aee623aacbecfe3c6d28a0d41834f4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml >@@ -0,0 +1,83 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a variety of 'display: flex' examples >+ with margin-left and/or margin-right set to 'auto'. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing horizontal auto margins on flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/> >+ <link rel="match" href="flexbox-margin-auto-horiz-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ height: 20px; >+ background: lightgray; >+ display: flex; >+ margin-bottom: 2px; >+ } >+ div.a { >+ width: 20px; >+ background: green; >+ margin-left: auto; >+ } >+ div.b { >+ width: 20px; >+ background: pink; >+ margin-left: auto; >+ margin-right: auto; >+ } >+ div.c { >+ width: 20px; >+ background: purple; >+ margin-right: auto; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- just one item --> >+ <div class="flexbox"> >+ <div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/> >+ </div> >+ >+ <!-- Two items --> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="c"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- Three items --> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a"/><div class="c"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/><div class="a"/><div class="c"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b"/><div class="c"/><div class="a"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/><div class="a"/><div class="b"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c"/><div class="b"/><div class="a"/> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b310ab97cc36a9c717215eb9b68117fe8b892748 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-002-expected.xhtml >@@ -0,0 +1,61 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a variety of 'display: flex' examples >+ with margin-top and/or margin-bottom set to 'auto' on flex items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ border: 2px dotted black; >+ display: flex; >+ margin-bottom: 2px; >+ width: 100px; >+ } >+ div.fixedSize { >+ width: 20px; >+ height: 20px; >+ } >+ div.gray { background: gray; } >+ div.green { background: green; } >+ div.pink { background: pink; } >+ div.blue { background: blue; } >+ </style> >+ </head> >+ <body> >+ >+ <!-- fixed-height flexbox, with items that have auto margins --> >+ <div class="flexbox" style="height: 100px"> >+ <div class="fixedSize green" style="margin-top: 80px"/> >+ <div class="fixedSize pink"/> >+ <div class="fixedSize blue" style="margin-top: 40px"/> >+ </div> >+ <!-- fixed-height flexbox, with items that have auto & fixed margins --> >+ <div class="flexbox" style="height: 100px"> >+ <div class="fixedSize green" style="margin-top: 70px"/> >+ <div class="fixedSize pink" style="margin-top: 10px"/> >+ </div> >+ >+ <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, >+ with other items that have auto margins --> >+ <div class="flexbox" style="height: 50px"> >+ <div class="fixedSize green" style="margin-top: 30px"/> >+ <div class="fixedSize pink"/> >+ <div class="fixedSize blue" style="margin-top: 15px"/> >+ <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/> >+ </div> >+ >+ <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, >+ with other items that have auto & fixed margins --> >+ <div class="flexbox" style="height: 50px"> >+ <div class="fixedSize green" style="margin-top: 20px"/> >+ <div class="fixedSize pink" style="margin-top: 10px"/> >+ <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..a31bc7d6f7ad433fe628a4e6fee507a24c2a921e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml >@@ -0,0 +1,68 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with a variety of 'display: flex' examples >+ with margin-top and/or margin-bottom set to 'auto' on flex items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing vertical auto margins on flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/> >+ <link rel="match" href="flexbox-margin-auto-horiz-002-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ border: 2px dotted black; >+ display: flex; >+ margin-bottom: 2px; >+ width: 100px; >+ } >+ div.fixedSize { >+ width: 20px; >+ height: 20px; >+ } >+ div.gray { background: gray; } >+ div.green { background: green; } >+ div.pink { background: pink; } >+ div.blue { background: blue; } >+ >+ div.autoTop { margin-top: auto; } >+ div.autoBottom { margin-bottom: auto; } >+ div.fixedTop { margin-top: 10px; } >+ div.fixedBottom { margin-bottom: 10px; } >+ </style> >+ </head> >+ <body> >+ >+ <!-- fixed-height flexbox, with items that have auto margins --> >+ <div class="flexbox" style="height: 100px"> >+ <div class="fixedSize green autoTop"/> >+ <div class="fixedSize pink autoBottom"/> >+ <div class="fixedSize blue autoTop autoBottom"/> >+ </div> >+ <!-- fixed-height flexbox, with items that have auto & fixed margins --> >+ <div class="flexbox" style="height: 100px"> >+ <div class="fixedSize green autoTop fixedBottom"/> >+ <div class="fixedSize pink autoBottom fixedTop"/> >+ </div> >+ >+ <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, >+ with other items that have auto margins --> >+ <div class="flexbox"> >+ <div class="fixedSize green autoTop"/> >+ <div class="fixedSize pink autoBottom"/> >+ <div class="fixedSize blue autoTop autoBottom"/> >+ <div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/> >+ </div> >+ >+ <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, >+ with other items that have auto & fixed margins --> >+ <div class="flexbox"> >+ <div class="fixedSize green autoTop fixedBottom"/> >+ <div class="fixedSize pink autoBottom fixedTop"/> >+ <div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..d30386618e7bb3df6172e1d94cc0e8e3e479eef6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-expected.xhtml >@@ -0,0 +1,71 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ } >+ div.a { >+ display: inline-block; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ display: inline-block; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ display: inline-block; >+ background: orange; >+ } >+ div.flexNone { >+ display: inline-block; >+ background: pink; >+ } >+ div.flexBasis { >+ display: inline-block; >+ background: gray; >+ } >+ div.spacer { >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="width: 74px"/><div class="b" style="width: 110px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 56.5px"/><div class="c" style="width: 137.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 179px"/><div class="flexNone"> >+ <div class="spacer" style="width: 15px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 66px"/><div class="c" style="width: 124px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 160px"/><div class="flexNone"> >+ <div class="spacer" style="width: 30px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 39px"/><div class="b" style="width: 40px" >+ /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..ca4ef80ba34ae0f211a43546c2e332c6af76b495 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse-expected.xhtml >@@ -0,0 +1,74 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ } >+ div.a { >+ display: inline-block; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ display: inline-block; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ display: inline-block; >+ background: orange; >+ } >+ div.flexNone { >+ display: inline-block; >+ background: pink; >+ } >+ div.flexBasis { >+ display: inline-block; >+ background: gray; >+ } >+ div.spacer { >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="b" style="width: 110px"/><div class="a" style="width: 74px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="width: 137.5px"/><div class="a" style="width: 56.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="flexNone"><div class="spacer" style="width: 15px"/> >+ </div><div class="a" style="width: 179px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="width: 124px" >+ /><div class="b" style="width: 66px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="flexNone"><div class="spacer" style="width: 30px"/> >+ </div><div class="b" style="width: 160px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="width: 85px" >+ /><div class="flexBasis" style="width: 20px" >+ /><div class="b" style="width: 40px" >+ /><div class="a" style="width: 39px"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..11c723221ff426891b6e3c9ddc1f36b659eada58 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml >@@ -0,0 +1,72 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with borders on flex items, and "flex-direction: row-reverse" to >+ reverse the flex container's main axis. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing borders on flex items in a row-reverse horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-mbp-horiz-001-reverse-ref.xhtml"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ font-size: 10px; >+ display: flex; >+ flex-direction: row-reverse; >+ } >+ div.a { >+ flex: 1 0 24px; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ flex: 2 0 10px; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ } >+ div.spacer { >+ display: inline-block; >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..ca4ef80ba34ae0f211a43546c2e332c6af76b495 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-expected.xhtml >@@ -0,0 +1,74 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ } >+ div.a { >+ display: inline-block; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ display: inline-block; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ display: inline-block; >+ background: orange; >+ } >+ div.flexNone { >+ display: inline-block; >+ background: pink; >+ } >+ div.flexBasis { >+ display: inline-block; >+ background: gray; >+ } >+ div.spacer { >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="b" style="width: 110px"/><div class="a" style="width: 74px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="width: 137.5px"/><div class="a" style="width: 56.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="flexNone"><div class="spacer" style="width: 15px"/> >+ </div><div class="a" style="width: 179px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="width: 124px" >+ /><div class="b" style="width: 66px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="flexNone"><div class="spacer" style="width: 30px"/> >+ </div><div class="b" style="width: 160px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="c" style="width: 85px" >+ /><div class="flexBasis" style="width: 20px" >+ /><div class="b" style="width: 40px" >+ /><div class="a" style="width: 39px"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..d30386618e7bb3df6172e1d94cc0e8e3e479eef6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse-expected.xhtml >@@ -0,0 +1,71 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ } >+ div.a { >+ display: inline-block; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ display: inline-block; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ display: inline-block; >+ background: orange; >+ } >+ div.flexNone { >+ display: inline-block; >+ background: pink; >+ } >+ div.flexBasis { >+ display: inline-block; >+ background: gray; >+ } >+ div.spacer { >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="width: 74px"/><div class="b" style="width: 110px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 56.5px"/><div class="c" style="width: 137.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 179px"/><div class="flexNone"> >+ <div class="spacer" style="width: 15px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 66px"/><div class="c" style="width: 124px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 160px"/><div class="flexNone"> >+ <div class="spacer" style="width: 30px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 39px"/><div class="b" style="width: 40px" >+ /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b09f121fe778cf22d8ad13d7ca3667b33d104808 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml >@@ -0,0 +1,74 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with borders on flex items, and "direction: rtl" and >+ "flex-direction: row-reverse" to *doubly* reverse the flex container's >+ main axis. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing borders on flex items in a row-reverse horizontal flex container, with 'direction: rtl'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ font-size: 10px; >+ display: flex; >+ flex-direction: row-reverse; >+ direction: rtl; >+ } >+ div.a { >+ flex: 1 0 24px; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ flex: 2 0 10px; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ } >+ div.spacer { >+ display: inline-block; >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..00f5aa54f68a2dc47ea870b1904f021669024f67 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml >@@ -0,0 +1,72 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with borders on flex items, and "direction: rtl" to reverse >+ the flex container's main axis. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing borders on flex items in a horizontal flex container with 'direction: rtl'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-mbp-horiz-001-reverse-ref.xhtml"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ font-size: 10px; >+ display: flex; >+ direction: rtl; >+ } >+ div.a { >+ flex: 1 0 24px; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ flex: 2 0 10px; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ } >+ div.spacer { >+ display: inline-block; >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..31560f4461872bb0cabf43a928f23ff239accdb7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001.xhtml >@@ -0,0 +1,70 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with borders on flex items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing borders on flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ font-size: 10px; >+ display: flex; >+ } >+ div.a { >+ flex: 1 0 24px; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ flex: 2 0 10px; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ } >+ div.spacer { >+ display: inline-block; >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002a-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002a-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..6203a40a0078f6d2af8ac0ead51c75b454722844 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002a-expected.xhtml >@@ -0,0 +1,75 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ } >+ div.a { >+ display: inline-block; >+ background: lightgreen; >+ margin-left: 1px; >+ margin-right: 3px; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ display: inline-block; >+ background: yellow; >+ margin-left: 2px; >+ margin-right: 4px; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ display: inline-block; >+ background: orange; >+ } >+ div.flexNone { >+ display: inline-block; >+ background: pink; >+ } >+ div.flexBasis { >+ display: inline-block; >+ background: gray; >+ } >+ div.spacer { >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="width: 70px"/><div class="b" style="width: 104px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 52.5px"/><div class="c" style="width: 137.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 175px"/><div class="flexNone"> >+ <div class="spacer" style="width: 15px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 60px"/><div class="c" style="width: 124px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 154px"/><div class="flexNone"> >+ <div class="spacer" style="width: 30px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 35px"/><div class="b" style="width: 34px" >+ /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b47b7aa55a7858781f72ff1408623d8bf97b8d44 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml >@@ -0,0 +1,74 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with margin/border on flex items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing margins and borders on flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ font-size: 10px; >+ display: flex; >+ } >+ div.a { >+ flex: 1 0 20px; >+ background: lightgreen; >+ margin-left: 1px; >+ margin-right: 3px; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ flex: 2 0 4px; >+ background: yellow; >+ margin-left: 2px; >+ margin-right: 4px; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ } >+ div.spacer { >+ display: inline-block; >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002b-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002b-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..6203a40a0078f6d2af8ac0ead51c75b454722844 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002b-expected.xhtml >@@ -0,0 +1,75 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ } >+ div.a { >+ display: inline-block; >+ background: lightgreen; >+ margin-left: 1px; >+ margin-right: 3px; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ display: inline-block; >+ background: yellow; >+ margin-left: 2px; >+ margin-right: 4px; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ display: inline-block; >+ background: orange; >+ } >+ div.flexNone { >+ display: inline-block; >+ background: pink; >+ } >+ div.flexBasis { >+ display: inline-block; >+ background: gray; >+ } >+ div.spacer { >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="width: 70px"/><div class="b" style="width: 104px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 52.5px"/><div class="c" style="width: 137.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 175px"/><div class="flexNone"> >+ <div class="spacer" style="width: 15px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 60px"/><div class="c" style="width: 124px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 154px"/><div class="flexNone"> >+ <div class="spacer" style="width: 30px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 35px"/><div class="b" style="width: 34px" >+ /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b8a8616552e850bc9b1149cbe4cb6a3c552cb19c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml >@@ -0,0 +1,81 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with margin/border/padding on flex items. (NOTE: This renders >+ the same as the "-2a" variant, which lacks padding, because we've >+ just replaced some of the "-2a" variant's content-box area with >+ padding-box area in this test.) --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ font-size: 10px; >+ display: flex; >+ } >+ div.a { >+ flex: 1 0 9px; >+ background: lightgreen; >+ margin-left: 1px; >+ margin-right: 3px; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ padding-left: 5px; >+ padding-right: 6px; >+ } >+ div.b { >+ flex: 2 0 1px; >+ background: yellow; >+ margin-left: 2px; >+ margin-right: 4px; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ padding-left: 1px; >+ padding-right: 2px; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ } >+ div.spacer { >+ display: inline-block; >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002v-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002v-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..6203a40a0078f6d2af8ac0ead51c75b454722844 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002v-expected.xhtml >@@ -0,0 +1,75 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ } >+ div.a { >+ display: inline-block; >+ background: lightgreen; >+ margin-left: 1px; >+ margin-right: 3px; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.b { >+ display: inline-block; >+ background: yellow; >+ margin-left: 2px; >+ margin-right: 4px; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ div.c { >+ display: inline-block; >+ background: orange; >+ } >+ div.flexNone { >+ display: inline-block; >+ background: pink; >+ } >+ div.flexBasis { >+ display: inline-block; >+ background: gray; >+ } >+ div.spacer { >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="width: 70px"/><div class="b" style="width: 104px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 52.5px"/><div class="c" style="width: 137.5px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 175px"/><div class="flexNone"> >+ <div class="spacer" style="width: 15px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 60px"/><div class="c" style="width: 124px"/> >+ </div> >+ <div class="flexbox"> >+ <div class="b" style="width: 154px"/><div class="flexNone"> >+ <div class="spacer" style="width: 30px"/></div> >+ </div> >+ <div class="flexbox"> >+ <div class="a" style="width: 35px"/><div class="b" style="width: 34px" >+ /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..a02e3406c90d9b3d1077d988e20344540f3b5084 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml >@@ -0,0 +1,86 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with margin/border/padding on flex items >+ and with various writing-modes on the items. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title> >+ CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container >+ (with a vertical writing-mode on the flex items). >+ </title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/> >+ <style> >+ div { height: 100px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ font-size: 10px; >+ display: flex; >+ } >+ div.a { >+ flex: 1 0 9px; >+ background: lightgreen; >+ margin-left: 1px; >+ margin-right: 3px; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ padding-left: 5px; >+ padding-right: 6px; >+ writing-mode: vertical-lr; >+ } >+ div.b { >+ flex: 2 0 1px; >+ background: yellow; >+ margin-left: 2px; >+ margin-right: 4px; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ padding-left: 1px; >+ padding-right: 2px; >+ writing-mode: vertical-rl; >+ } >+ div.c { >+ flex: 3 0 40px; >+ background: orange; >+ writing-mode: sideways-lr; >+ } >+ div.flexNone { >+ flex: none; >+ background: pink; >+ writing-mode: vertical-lr; >+ } >+ div.flexBasis { >+ flex: 0 0 20px; >+ background: gray; >+ writing-mode: sideways-rl; >+ } >+ div.spacer { >+ width: 15px; >+ height: 15px; >+ background: purple; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"></div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div class="c"/></div> >+ <div class="flexbox"><div class="a"/> >+ <div class="flexNone"><div class="spacer"/></div> >+ </div> >+ <div class="flexbox"><div class="b"/><div class="c"/></div> >+ <div class="flexbox"><div class="b"/> >+ <div class="flexNone"><div class="spacer"/><div class="spacer"/></div> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..a91d72b9f5ddc32fbac728726605a0af8cf09701 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-expected.xhtml >@@ -0,0 +1,81 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 20px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ margin-bottom: 2px; >+ } >+ >+ <!-- customizations for flexbox border/padding --> >+ .borderA { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 6px; >+ border-right-width: 4px; >+ border-bottom-width: 2px; >+ border-left-width: 8px; >+ } >+ >+ .borderB { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 4px; >+ border-right-width: 5px; >+ border-bottom-width: 6px; >+ border-left-width: 7px; >+ } >+ >+ .paddingA { >+ padding: 4px 3px 2px 1px; >+ } >+ >+ .paddingB { >+ padding: 8px 11px 14px 17px; >+ } >+ >+ div.child1 { >+ display: inline-block; >+ width: 74px; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.child2 { >+ display: inline-block; >+ width: 110px; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox borderA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderA paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderA paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..7929c8907027b3558e3c953eeeac2bf33d8cb611 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse-expected.xhtml >@@ -0,0 +1,81 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 20px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ margin-bottom: 2px; >+ } >+ >+ <!-- customizations for flexbox border/padding --> >+ .borderA { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 6px; >+ border-right-width: 4px; >+ border-bottom-width: 2px; >+ border-left-width: 8px; >+ } >+ >+ .borderB { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 4px; >+ border-right-width: 5px; >+ border-bottom-width: 6px; >+ border-left-width: 7px; >+ } >+ >+ .paddingA { >+ padding: 4px 3px 2px 1px; >+ } >+ >+ .paddingB { >+ padding: 8px 11px 14px 17px; >+ } >+ >+ div.child1 { >+ display: inline-block; >+ width: 74px; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.child2 { >+ display: inline-block; >+ width: 110px; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox borderA" >+ ><div class="child2"/><div class="child1"/></div> >+ <div class="flexbox borderA paddingA" >+ ><div class="child2"/><div class="child1"/></div> >+ <div class="flexbox borderA paddingB" >+ ><div class="child2"/><div class="child1"/></div> >+ <div class="flexbox borderB" >+ ><div class="child2"/><div class="child1"/></div> >+ <div class="flexbox borderB paddingA" >+ ><div class="child2"/><div class="child1"/></div> >+ <div class="flexbox borderB paddingB" >+ ><div class="child2"/><div class="child1"/></div> >+ <div class="flexbox paddingA" >+ ><div class="child2"/><div class="child1"/></div> >+ <div class="flexbox paddingB" >+ ><div class="child2"/><div class="child1"/></div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..cbe4c58b41634042d196ff8b4de43c0d2ba0d901 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml >@@ -0,0 +1,84 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with border/padding on a row-reverse flex container and on its children --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing borders and padding on a row-reverse horizontal flex container and its flex items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-mbp-horiz-003-reverse-ref.xhtml"/> >+ <style> >+ div { height: 20px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ display: flex; >+ flex-direction: row-reverse; >+ margin-bottom: 2px; >+ } >+ >+ <!-- customizations for flex container border/padding --> >+ .borderA { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 6px; >+ border-right-width: 4px; >+ border-bottom-width: 2px; >+ border-left-width: 8px; >+ } >+ >+ .borderB { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 4px; >+ border-right-width: 5px; >+ border-bottom-width: 6px; >+ border-left-width: 7px; >+ } >+ >+ .paddingA { >+ padding: 4px 3px 2px 1px; >+ } >+ >+ .paddingB { >+ padding: 8px 11px 14px 17px; >+ } >+ >+ div.child1 { >+ flex: 1 0 24px; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.child2 { >+ flex: 2 0 10px; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox borderA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderA paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderA paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..f0dc49b5ac20e00de54801daf406f937f2cecab1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003.xhtml >@@ -0,0 +1,83 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with border/padding on a flex container and on its children --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing borders and padding on a horizontal flex container and its flex items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/> >+ <style> >+ div { height: 20px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ display: flex; >+ margin-bottom: 2px; >+ } >+ >+ <!-- customizations for flex container border/padding --> >+ .borderA { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 6px; >+ border-right-width: 4px; >+ border-bottom-width: 2px; >+ border-left-width: 8px; >+ } >+ >+ .borderB { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 4px; >+ border-right-width: 5px; >+ border-bottom-width: 6px; >+ border-left-width: 7px; >+ } >+ >+ .paddingA { >+ padding: 4px 3px 2px 1px; >+ } >+ >+ .paddingB { >+ padding: 8px 11px 14px 17px; >+ } >+ >+ div.child1 { >+ flex: 1 0 24px; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.child2 { >+ flex: 2 0 10px; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox borderA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderA paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderA paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003v-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003v-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..a91d72b9f5ddc32fbac728726605a0af8cf09701 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003v-expected.xhtml >@@ -0,0 +1,81 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 20px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ margin-bottom: 2px; >+ } >+ >+ <!-- customizations for flexbox border/padding --> >+ .borderA { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 6px; >+ border-right-width: 4px; >+ border-bottom-width: 2px; >+ border-left-width: 8px; >+ } >+ >+ .borderB { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 4px; >+ border-right-width: 5px; >+ border-bottom-width: 6px; >+ border-left-width: 7px; >+ } >+ >+ .paddingA { >+ padding: 4px 3px 2px 1px; >+ } >+ >+ .paddingB { >+ padding: 8px 11px 14px 17px; >+ } >+ >+ div.child1 { >+ display: inline-block; >+ width: 74px; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ } >+ div.child2 { >+ display: inline-block; >+ width: 110px; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox borderA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderA paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderA paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..8baef3022729bb7a59b94b84c7054a28e1d78646 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml >@@ -0,0 +1,88 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with border/padding on a flex container and on its children --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title> >+ CSS Test: Testing borders and padding on a horizontal flex container and its flex items >+ (with a vertical writing-mode on the flex items). >+ </title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/> >+ <style> >+ div { height: 20px; border: 0; } >+ div.flexbox { >+ width: 200px; >+ display: flex; >+ margin-bottom: 2px; >+ } >+ >+ <!-- customizations for flex container border/padding --> >+ .borderA { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 6px; >+ border-right-width: 4px; >+ border-bottom-width: 2px; >+ border-left-width: 8px; >+ } >+ >+ .borderB { >+ border-style: dashed; >+ border-color: purple; >+ border-top-width: 4px; >+ border-right-width: 5px; >+ border-bottom-width: 6px; >+ border-left-width: 7px; >+ } >+ >+ .paddingA { >+ padding: 4px 3px 2px 1px; >+ } >+ >+ .paddingB { >+ padding: 8px 11px 14px 17px; >+ } >+ >+ div.child1 { >+ flex: 1 0 24px; >+ background: lightgreen; >+ border-style: dotted; >+ border-left-width: 2px; >+ border-right-width: 4px; >+ writing-mode: vertical-rl; >+ } >+ div.child2 { >+ flex: 2 0 10px; >+ background: yellow; >+ border-style: dashed; >+ border-left-width: 7px; >+ border-right-width: 3px; >+ writing-mode: vertical-lr; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox borderA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderA paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderA paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox borderB paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox paddingA" >+ ><div class="child1"/><div class="child2"/></div> >+ <div class="flexbox paddingB" >+ ><div class="child1"/><div class="child2"/></div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-004-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-004-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..245e6f9e3c9314a0af9a2d34afabbd42c52940fc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-004-expected.xhtml >@@ -0,0 +1,78 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case - identical to the testcase, but with with the flex items' >+ margin and padding values set to explicit pixel values. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { border: 0; } >+ div.flexbox { >+ width: 200px; >+ display: flex; >+ margin-bottom: 2px; >+ border: 1px dotted black; >+ } >+ div.height50 { height: 50px; } >+ >+ .marginA { margin: 20px 16px 12px 8px; } >+ .marginB { margin: 16px 20px 24px 28px; } >+ .paddingA { padding: 16px 12px 8px 4px; } >+ .paddingB { padding: 12px 16px 20px 24px; } >+ >+ >+ div.child1 { >+ flex: none; >+ width: 10px; >+ height: 10px; >+ background: lightgreen; >+ } >+ div.child2 { >+ flex: none; >+ width: 10px; >+ height: 10px; >+ background: purple; >+ } >+ >+ div.filler { >+ /* Filler-div to fill up content-box and make padding easier to see. */ >+ height: 10px; >+ width: 100%; >+ background: lightgrey; >+ } >+ >+ </style> >+ </head> >+ <body> >+ <div class="flexbox" >+ ><div class="child1 paddingA"><div class="filler"/></div >+ ><div class="child2 paddingB"><div class="filler"/></div >+ ><div class="child1 marginA"></div >+ ><div class="child2 marginB"></div >+ ></div> >+ >+ <div class="flexbox height50" >+ ><div class="child1 paddingA"><div class="filler"/></div >+ ><div class="child2 paddingB"><div class="filler"/></div >+ ><div class="child1 marginA"></div >+ ><div class="child2 marginB"></div >+ ></div> >+ >+ <div class="flexbox height50" style="align-items: flex-end" >+ ><div class="child1 paddingA"><div class="filler"/></div >+ ><div class="child2 paddingB"><div class="filler"/></div >+ ><div class="child1 marginA"></div >+ ><div class="child2 marginB"></div >+ ></div> >+ >+ <div class="flexbox height50" >+ ><div class="child1 paddingA marginA"><div class="filler"/></div >+ ><div class="child2 paddingB marginB"><div class="filler"/></div >+ ></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-004.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-004.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..b513253fd19fdace9da5e3ba45ccc4915b47d03b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-004.xhtml >@@ -0,0 +1,88 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with percent-valued padding and/or margin on flex items. >+ The spec allows these to be resolved against the flex container's >+ inline size (regardless of which axis the percent padding/margin is in). >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing percent-valued padding and margin on flex items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#item-margins"/> >+ <link rel="match" href="flexbox-mbp-horiz-004-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ width: 200px; >+ display: flex; >+ margin-bottom: 2px; >+ border: 1px dotted black; >+ } >+ div.height50 { height: 50px; } >+ >+ .marginA { margin: 10% 8% 6% 4%; } >+ .marginB { margin: 8% 10% 12% 14%; } >+ .paddingA { padding: 8% 6% 4% 2%; } >+ .paddingB { padding: 6% 8% 10% 12%; } >+ >+ div.child1 { >+ flex: none; >+ width: 10px; >+ height: 10px; >+ background: lightgreen; >+ } >+ div.child2 { >+ flex: none; >+ width: 10px; >+ height: 10px; >+ background: purple; >+ } >+ >+ div.filler { >+ /* Filler-div to fill up content-box and make padding easier to see. */ >+ height: 10px; >+ width: 100%; >+ background: lightgrey; >+ } >+ >+ </style> >+ </head> >+ <body> >+ <!-- Flex container is auto-height - this shouldn't impact percent >+ margin/padding resolution, since they resolve against container's >+ inline-size, i.e. its width in this case. --> >+ <div class="flexbox" >+ ><div class="child1 paddingA"><div class="filler"/></div >+ ><div class="child2 paddingB"><div class="filler"/></div >+ ><div class="child1 marginA"></div >+ ><div class="child2 marginB"></div >+ ></div> >+ >+ <!-- Flex container has height: 50px - again, this shouldn't impact percent >+ margin/padding resolution, since they resolve against container's >+ inline-size, i.e. its width in this case. --> >+ <div class="flexbox height50" >+ ><div class="child1 paddingA"><div class="filler"/></div >+ ><div class="child2 paddingB"><div class="filler"/></div >+ ><div class="child1 marginA"></div >+ ><div class="child2 marginB"></div >+ ></div> >+ >+ <!-- ...and now with align-items: flex-end, so we can see the margin-bottom >+ in action --> >+ <div class="flexbox height50" style="align-items: flex-end" >+ ><div class="child1 paddingA"><div class="filler"/></div >+ ><div class="child2 paddingB"><div class="filler"/></div >+ ><div class="child1 marginA"></div >+ ><div class="child2 marginB"></div >+ ></div> >+ >+ <!-- ...and finally, with margin and padding applied to the same items --> >+ <div class="flexbox height50" >+ ><div class="child1 paddingA marginA"><div class="filler"/></div >+ ><div class="child2 paddingB marginB"><div class="filler"/></div >+ ></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..146a6ad6bc9e5698371d061c2cb2eb65e97b31ab >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-001-expected.html >@@ -0,0 +1,42 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .item { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ float: left; >+ } >+ >+ .small { height: 50px; } >+ .big { height: 80px; } >+ >+ .item > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ width: 10px; >+ height: 80px; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="item small"><div></div></div> >+ <div class="item small"><div></div></div> >+ <div class="item small"><div></div></div> >+ <div class="item small"><div></div></div> >+ <div class="item small"><div></div></div> >+ <div class="item small"><div></div></div> >+ >+ <div class="item big"><div></div></div> >+ <div class="item big"><div></div></div> >+ <div class="item big"><div></div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f69ed9561914980f534a89e65a69fcde35bb9e4f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-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: Testing min-height:auto</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-height-auto-001-ref.html"> >+<!-- >+ This testcase tests the used value of "min-height:auto" (the property's >+ initial value) on flex items in a vertical flex container. >+ >+ It's supposed to resolve to the smallest of: >+ a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its >+ initial value. >+ b) The computed 'max-height' property >+ c) If there's no intrinsic aspect ratio: the item's min-content height. >+ d) If there is an intrinsic aspect ratio: the item's height derived from >+ the ratio & constraints in the other dimension. >+ >+ We measure what the used value is by putting flex items in a small flex >+ container, which will shrink its items down to their min-height. >+ >+ This test checks for situations where we should resolve the min-height as >+ (a), (b), or (c) above. Another test will check (d). >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ flex-direction: column; >+ height: 1px; /* No available space; shrink flex items to min-height */ >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ float: left; >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ } >+ >+ .flexbox > * > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ width: 10px; >+ height: 80px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- Check for min-height:auto resolving correctly when the smallest >+ candidate value is: --> >+ <!-- *** (a) Used 'flex-basis' (from 'height') *** --> >+ <!-- First, without definite max-height: --> >+ <div class="flexbox"> >+ <div style="height: 50px"><div></div></div> >+ </div> >+ <!-- ...and now with definite (& large) 'max-height': --> >+ <div class="flexbox"> >+ <div style="height: 50px; max-height: 120px;"><div></div></div> >+ </div> >+ <!-- ...and now with used 'flex-basis' being a calc expression:--> >+ <div class="flexbox"> >+ <div style="height: calc(10% + 50px)"><div></div></div> >+ </div> >+ >+ <!-- *** (b) The computed 'max-height' *** --> >+ <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> >+ <div class="flexbox"> >+ <div style="height: 100px; max-height:50px"><div></div></div> >+ </div> >+ <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-height:auto' anyway) --> >+ <div class="flexbox"> >+ <div style="flex-basis: 100px; max-height:50px"><div></div></div> >+ </div> >+ <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-height:auto' anyway) --> >+ <div class="flexbox"> >+ <div style="flex-basis: 10px; max-height:50px"><div></div></div> >+ </div> >+ >+ <!-- *** (c) (no intrinsic aspect ratio) The min-content size *** --> >+ <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> >+ <div class="flexbox"> >+ <div style="height: 100px"><div></div></div> >+ </div> >+ <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-height:auto' anyway) --> >+ <div class="flexbox"> >+ <div style="flex-basis: 100px"><div></div></div> >+ </div> >+ <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-height:auto' anyway) --> >+ <div class="flexbox"> >+ <div style="flex-basis: 10px"><div></div></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ca1aad42aa0eb710266fc5f0f62f31511c31511f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a-expected.html >@@ -0,0 +1,26 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ img { >+ width: 30px; >+ height: 30px; >+ float: left; >+ border: 2px dotted purple; >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ } >+ </style> >+ </head> >+ <body> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0fd9207fb4b9c0c87fd3ae28994b757b992205c7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a.html >@@ -0,0 +1,69 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <head> >+ <meta charset="utf-8"> >+ <title>CSS Test: Testing min-height:auto</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-height-auto-002-ref.html"> >+<!-- >+ This testcase tests the used value of "min-height:auto" (the property's >+ initial value) on flex items in a vertical flex container. >+ >+ It's supposed to resolve to the smallest of: >+ a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its >+ initial value. >+ b) The computed 'max-height' property >+ c) If there's no intrinsic aspect ratio: the item's min-content height. >+ d) If there is an intrinsic aspect ratio: the item's height derived from >+ the ratio & constraints in the other dimension. >+ >+ We measure what the used value is by putting flex items in a small flex >+ container, which will shrink its items down to their min-height. >+ >+ This test checks for situations where we should resolve the min-height as >+ (d) above, with "constraints in the other dimension" being "width". >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ flex-direction: column; >+ height: 1px; /* No available space; shrink flex items to min-height */ >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ float: left; >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ /* Flex items have sizing constraint in cross axis: */ >+ width: 30px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- Check for min-height:auto resolving correctly when the smallest >+ candidate value is: --> >+ >+ <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio >+ and constraints in the other dimension *** --> >+ <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> >+ <div class="flexbox"> >+ <img style="height: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-height:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-height:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ca1aad42aa0eb710266fc5f0f62f31511c31511f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002b-expected.html >@@ -0,0 +1,26 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ img { >+ width: 30px; >+ height: 30px; >+ float: left; >+ border: 2px dotted purple; >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ } >+ </style> >+ </head> >+ <body> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..412b4b98c714320202c2fe02794583796bd546af >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002b.html >@@ -0,0 +1,70 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <head> >+ <meta charset="utf-8"> >+ <title>CSS Test: Testing min-height:auto</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-height-auto-002-ref.html"> >+<!-- >+ This testcase tests the used value of "min-height:auto" (the property's >+ initial value) on flex items in a vertical flex container. >+ >+ It's supposed to resolve to the smallest of: >+ a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its >+ initial value. >+ b) The computed 'max-height' property >+ c) If there's no intrinsic aspect ratio: the item's min-content height. >+ d) If there is an intrinsic aspect ratio: the item's height derived from >+ the ratio & constraints in the other dimension. >+ >+ We measure what the used value is by putting flex items in a small flex >+ container, which will shrink its items down to their min-height. >+ >+ This test checks for situations where we should resolve the min-height as >+ (d) above, with "constraints in the other dimension" being "min-width". >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ flex-direction: column; >+ max-width: 34px; /* Constrain the flex container's cross size. */ >+ height: 1px; /* No available space; shrink flex items to min-height */ >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ float: left; >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ /* Flex items have sizing constraint in cross axis: */ >+ min-width: 30px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- Check for min-height:auto resolving correctly when the smallest >+ candidate value is: --> >+ >+ <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio >+ and constraints in the other dimension *** --> >+ <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> >+ <div class="flexbox"> >+ <img style="height: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-height:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-height:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ca1aad42aa0eb710266fc5f0f62f31511c31511f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c-expected.html >@@ -0,0 +1,26 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ img { >+ width: 30px; >+ height: 30px; >+ float: left; >+ border: 2px dotted purple; >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ } >+ </style> >+ </head> >+ <body> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3093c65e5f9f259446a6c9605e98fb0f5ba48b0e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c.html >@@ -0,0 +1,71 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <head> >+ <meta charset="utf-8"> >+ <title>CSS Test: Testing min-height:auto</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-height-auto-002-ref.html"> >+<!-- >+ This testcase tests the used value of "min-height:auto" (the property's >+ initial value) on flex items in a vertical flex container. >+ >+ It's supposed to resolve to the smallest of: >+ a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its >+ initial value. >+ b) The computed 'max-height' property >+ c) If there's no intrinsic aspect ratio: the item's min-content height. >+ d) If there is an intrinsic aspect ratio: the item's height derived from >+ the ratio & constraints in the other dimension. >+ >+ We measure what the used value is by putting flex items in a small flex >+ container, which will shrink its items down to their min-height. >+ >+ This test checks for situations where we should resolve the min-height as >+ (d) above, with "constraints in the other dimension" being >+ max-width-clamped "width". >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ flex-direction: column; >+ height: 1px; /* No available space; shrink flex items to min-height */ >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ float: left; >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ /* Flex items have sizing constraint in cross axis: */ >+ max-width: 30px; >+ width: 60px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- Check for min-height:auto resolving correctly when the smallest >+ candidate value is: --> >+ >+ <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio >+ and constraints in the other dimension *** --> >+ <!-- First, with a larger candidate 'flex-basis' value (from 'height') --> >+ <div class="flexbox"> >+ <img style="height: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-height:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-height:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ff1ced0c03517681c46f05f74aa93283f3587a9e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-003-expected.html >@@ -0,0 +1,41 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .item { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ float: left; >+ } >+ >+ .small { height: 26px; } >+ .big { height: 80px; } >+ >+ .item > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ width: 40px; >+ height: 80px; >+ } >+ >+ .yvisible { overflow-y: visible; } >+ .yhidden { overflow-y: hidden; } >+ .yscroll { overflow-y: scroll; } >+ .yauto { overflow-y: auto; } >+ </style> >+ </head> >+ <body> >+ <div class="item big yvisible"><div></div></div> >+ <div class="item small yhidden"><div></div></div> >+ <div class="item small yscroll"><div></div></div> >+ <div class="item small yauto"><div></div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..15ef35d9cd7f46078af9084832f841ed9a3e2e80 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-003.html >@@ -0,0 +1,57 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <head> >+ <meta charset="utf-8"> >+ <title>CSS Test: Testing min-height:auto & 'overflow' interaction</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-height-auto-003-ref.html"> >+<!-- >+ This testcase checks how "overflow-y" impacts the sizing behavior of flex >+ items with "min-height:auto" (the new initial value for "min-height"). >+ >+ In particular, the flex-item-specific "min-height:auto" behavior is >+ supposed to be disabled (e.g. we end up with min-height:0) when >+ "overflow-y" is non-"visible". >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ flex-direction: column; >+ height: 30px; /* Shrink flex items below min-height */ >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ float: left; >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ } >+ >+ .flexbox > * > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ width: 40px; >+ height: 80px; >+ } >+ >+ .yvisible { overflow-y: visible; } >+ .yhidden { overflow-y: hidden; } >+ .yscroll { overflow-y: scroll; } >+ .yauto { overflow-y: auto; } >+ </style> >+ </head> >+ <body> >+ <!-- min-height:auto should prevent shrinking below intrinsic height when >+ the flex item has "overflow-y: visible", but not for any other >+ overflow-y values. --> >+ <div class="flexbox"><div class="yvisible"><div></div></div></div> >+ <div class="flexbox"><div class="yhidden"><div></div></div></div> >+ <div class="flexbox"><div class="yscroll"><div></div></div></div> >+ <div class="flexbox"><div class="yauto"><div></div></div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..768185d43194279b5648092715a1846fdfb917a5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-004-expected.html >@@ -0,0 +1,41 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .item { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ float: left; >+ } >+ >+ .small { height: 26px; } >+ .big { height: 80px; } >+ >+ .item > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ width: 40px; >+ height: 80px; >+ } >+ >+ .xvisible { overflow-x: visible; } >+ .xhidden { overflow-x: hidden; } >+ .xscroll { overflow-x: scroll; } >+ .xauto { overflow-x: auto; } >+ </style> >+ </head> >+ <body> >+ <div class="item big xvisible"><div></div></div> >+ <div class="item small xhidden"><div></div></div> >+ <div class="item small xscroll"><div></div></div> >+ <div class="item small xauto"><div></div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a04b9b573e2b9c8c8a44f10ee35ecc7c711f5e7f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-004.html >@@ -0,0 +1,63 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <head> >+ <meta charset="utf-8"> >+ <title>CSS Test: Testing min-height:auto & 'overflow' interaction</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-height-auto-004-ref.html"> >+<!-- >+ This testcase checks how "overflow-x" indirectly impacts the sizing >+ behavior of flex items with "min-height:auto" (the new initial value >+ for "min-height"), via its influence on "overflow-y". >+ >+ In particular, the flex-item-specific "min-height:auto" behavior is >+ supposed to be disabled (e.g. we end up with min-height:0) when >+ "overflow-y" is non-"visible". Moreover, when "overflow-x" is set to a >+ scrolling value, it forces "overflow-y" to compute to a scrolling value >+ as well, as described at >+ http://www.w3.org/TR/css-overflow-3/#overflow-properties >+ So, "overflow-x" has an indirect effect (via "overflow-y") here. >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ flex-direction: column; >+ height: 30px; /* Shrink flex items below min-height */ >+ margin-right: 2px; /* (Just for spacing things out, visually) */ >+ float: left; >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ } >+ >+ .flexbox > * > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ width: 40px; >+ height: 80px; >+ } >+ >+ .xvisible { overflow-x: visible; } >+ .xhidden { overflow-x: hidden; } >+ .xscroll { overflow-x: scroll; } >+ .xauto { overflow-x: auto; } >+ </style> >+ </head> >+ <body> >+ <!-- min-height:auto should prevent shrinking below intrinsic height when >+ the flex item has "overflow-x: visible", but not for any other >+ overflow-x values (because of overflow-x's influence on overflow-y). >+ --> >+ <div class="flexbox"><div class="xvisible"><div></div></div></div> >+ <div class="flexbox"><div class="xhidden"><div></div></div></div> >+ <div class="flexbox"><div class="xscroll"><div></div></div></div> >+ <div class="flexbox"><div class="xauto"><div></div></div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..946db39cf1e17fa3be729f319cfd28738ceafef1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-001-expected.html >@@ -0,0 +1,41 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .item { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ >+ .small { width: 50px; } >+ .big { width: 80px; } >+ >+ .item > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ height: 10px; >+ width: 80px; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="item small"><div></div></div> >+ <div class="item small"><div></div></div> >+ <div class="item small"><div></div></div> >+ <div class="item small"><div></div></div> >+ <div class="item small"><div></div></div> >+ <div class="item small"><div></div></div> >+ >+ <div class="item big"><div></div></div> >+ <div class="item big"><div></div></div> >+ <div class="item big"><div></div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..cb347abead55e6739fe5a04b203a1aeb6eb1af4a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-001.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: Testing min-width:auto</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-width-auto-001-ref.html"> >+<!-- >+ This testcase tests the used value of "min-width:auto" (the property's >+ initial value) on flex items in a horizontal flex container. >+ >+ It's supposed to resolve to the smallest of: >+ a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its >+ initial value. >+ b) The computed 'max-width' property >+ c) If there's no intrinsic aspect ratio: the item's min-content width. >+ d) If there is an intrinsic aspect ratio: the item's width derived from >+ the ratio & constraints in the other dimension. >+ >+ We measure what the used value is by putting flex items in a small flex >+ container, which will shrink its items down to their min-width. >+ >+ This test checks for situations where we should resolve the min-width as >+ (a), (b), or (c) above. Another test will check (d). >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ width: 1px; /* No available space; shrink flex items to min-width */ >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ } >+ >+ .flexbox > * > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ height: 10px; >+ width: 80px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- Check for min-width:auto resolving correctly when the smallest >+ candidate value is: --> >+ <!-- *** (a) Used 'flex-basis' (from 'width') *** --> >+ <!-- First, without definite max-width: --> >+ <div class="flexbox"> >+ <div style="width: 50px"><div></div></div> >+ </div> >+ <!-- ...and now with definite (& large) 'max-width': --> >+ <div class="flexbox"> >+ <div style="width: 50px; max-width: 120px;"><div></div></div> >+ </div> >+ <!-- ...and now with used 'flex-basis' being a calc expression:--> >+ <div class="flexbox"> >+ <div style="width: calc(10% + 50px)"><div></div></div> >+ </div> >+ >+ <!-- *** (b) The computed 'max-width' *** --> >+ <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> >+ <div class="flexbox"> >+ <div style="width: 100px; max-width:50px"><div></div></div> >+ </div> >+ <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-width:auto' anyway) --> >+ <div class="flexbox"> >+ <div style="flex-basis: 100px; max-width:50px"><div></div></div> >+ </div> >+ <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-width:auto' anyway) --> >+ <div class="flexbox"> >+ <div style="flex-basis: 10px; max-width:50px"><div></div></div> >+ </div> >+ >+ <!-- *** (c) (no intrinsic aspect ratio) The min-content size *** --> >+ <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> >+ <div class="flexbox"> >+ <div style="width: 100px"><div></div></div> >+ </div> >+ <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-width:auto' anyway) --> >+ <div class="flexbox"> >+ <div style="flex-basis: 100px"><div></div></div> >+ </div> >+ <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-width:auto' anyway) --> >+ <div class="flexbox"> >+ <div style="flex-basis: 10px"><div></div></div> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..21beb3f934ff6ce1f4153d564c5982a110a92b41 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a-expected.html >@@ -0,0 +1,26 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ img { >+ width: 30px; >+ height: 30px; >+ display: block; >+ border: 2px dotted purple; >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ </style> >+ </head> >+ <body> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..fe60255c937bc579b953c59b6b9ad596cab07daf >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a.html >@@ -0,0 +1,67 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <head> >+ <meta charset="utf-8"> >+ <title>CSS Test: Testing min-width:auto</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-width-auto-002-ref.html"> >+<!-- >+ This testcase tests the used value of "min-width:auto" (the property's >+ initial value) on flex items in a horizontal flex container. >+ >+ It's supposed to resolve to the smallest of: >+ a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its >+ initial value. >+ b) The computed 'max-width' property >+ c) If there's no intrinsic aspect ratio: the item's min-content width. >+ d) If there is an intrinsic aspect ratio: the item's width derived from >+ the ratio & constraints in the other dimension. >+ >+ We measure what the used value is by putting flex items in a small flex >+ container, which will shrink its items down to their min-width. >+ >+ This test checks for situations where we should resolve the min-width as >+ (d) above, with "constraints in the other dimension" being "height". >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ width: 0px; /* No available space; shrink flex items to min-width */ >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ /* Flex items have sizing constraint in cross axis: */ >+ height: 30px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- Check for min-width:auto resolving correctly when the smallest >+ candidate value is: --> >+ >+ <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio >+ and constraints in the other dimension *** --> >+ <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> >+ <div class="flexbox"> >+ <img style="width: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-width:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-width:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..21beb3f934ff6ce1f4153d564c5982a110a92b41 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002b-expected.html >@@ -0,0 +1,26 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ img { >+ width: 30px; >+ height: 30px; >+ display: block; >+ border: 2px dotted purple; >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ </style> >+ </head> >+ <body> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a56b214dc6820838903b12c8a60e53da601dbe98 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002b.html >@@ -0,0 +1,67 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <head> >+ <meta charset="utf-8"> >+ <title>CSS Test: Testing min-width:auto</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-width-auto-002-ref.html"> >+<!-- >+ This testcase tests the used value of "min-width:auto" (the property's >+ initial value) on flex items in a horizontal flex container. >+ >+ It's supposed to resolve to the smallest of: >+ a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its >+ initial value. >+ b) The computed 'max-width' property >+ c) If there's no intrinsic aspect ratio: the item's min-content width. >+ d) If there is an intrinsic aspect ratio: the item's width derived from >+ the ratio & constraints in the other dimension. >+ >+ We measure what the used value is by putting flex items in a small flex >+ container, which will shrink its items down to their min-width. >+ >+ This test checks for situations where we should resolve the min-width as >+ (d) above, with "constraints in the other dimension" being "min-height". >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ width: 0px; /* No available space; shrink flex items to min-width */ >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ /* Flex items have sizing constraint in cross axis: */ >+ min-height: 30px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- Check for min-width:auto resolving correctly when the smallest >+ candidate value is: --> >+ >+ <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio >+ and constraints in the other dimension *** --> >+ <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> >+ <div class="flexbox"> >+ <img style="width: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-width:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-width:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..21beb3f934ff6ce1f4153d564c5982a110a92b41 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c-expected.html >@@ -0,0 +1,26 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ img { >+ width: 30px; >+ height: 30px; >+ display: block; >+ border: 2px dotted purple; >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ </style> >+ </head> >+ <body> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ <img src="support/solidblue.png" alt="blue square"> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c.html >new file mode 100644 >index 0000000000000000000000000000000000000000..95b98e5b583c511a26d3d76b2565af9d8631b1b4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c.html >@@ -0,0 +1,69 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <head> >+ <meta charset="utf-8"> >+ <title>CSS Test: Testing min-width:auto</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-width-auto-002-ref.html"> >+<!-- >+ This testcase tests the used value of "min-width:auto" (the property's >+ initial value) on flex items in a horizontal flex container. >+ >+ It's supposed to resolve to the smallest of: >+ a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its >+ initial value. >+ b) The computed 'max-width' property >+ c) If there's no intrinsic aspect ratio: the item's min-content width. >+ d) If there is an intrinsic aspect ratio: the item's width derived from >+ the ratio & constraints in the other dimension. >+ >+ We measure what the used value is by putting flex items in a small flex >+ container, which will shrink its items down to their min-width. >+ >+ This test checks for situations where we should resolve the min-width as >+ (d) above, with "constraints in the other dimension" being >+ max-height-clamped "height". >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ width: 0px; /* No available space; shrink flex items to min-width */ >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ /* Flex items have sizing constraint in cross axis: */ >+ max-height: 30px; >+ height: 60px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- Check for min-width:auto resolving correctly when the smallest >+ candidate value is: --> >+ >+ <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio >+ and constraints in the other dimension *** --> >+ <!-- First, with a larger candidate 'flex-basis' value (from 'width') --> >+ <div class="flexbox"> >+ <img style="width: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-width:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't >+ be considered for 'min-width:auto' anyway) --> >+ <div class="flexbox"> >+ <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square"> >+ </div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..09066eef7480923a3eb57d942424c55b0ca6f6c4 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-003-expected.html >@@ -0,0 +1,40 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .item { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ >+ .small { width: 26px; } >+ .big { width: 80px; } >+ >+ .item > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ height: 40px; >+ width: 80px; >+ } >+ >+ .xvisible { overflow-x: visible; } >+ .xhidden { overflow-x: hidden; } >+ .xscroll { overflow-x: scroll; } >+ .xauto { overflow-x: auto; } >+ </style> >+ </head> >+ <body> >+ <div class="item big xvisible"><div></div></div> >+ <div class="item small xhidden"><div></div></div> >+ <div class="item small xscroll"><div></div></div> >+ <div class="item small xauto"><div></div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ecc7ab71700450c5f0859891ea11783a24761807 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-003.html >@@ -0,0 +1,55 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <head> >+ <meta charset="utf-8"> >+ <title>CSS Test: Testing min-width:auto & 'overflow' interaction</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-width-auto-003-ref.html"> >+<!-- >+ This testcase checks how "overflow-x" impacts the sizing behavior of flex >+ items with "min-width:auto" (the new initial value for "min-width"). >+ >+ In particular, the flex-item-specific "min-width:auto" behavior is >+ supposed to be disabled (e.g. we end up with min-width:0) when >+ "overflow-x" is non-"visible". >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ width: 30px; /* Shrink flex items below min-width */ >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ } >+ >+ .flexbox > * > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ height: 40px; >+ width: 80px; >+ } >+ >+ .xvisible { overflow-x: visible; } >+ .xhidden { overflow-x: hidden; } >+ .xscroll { overflow-x: scroll; } >+ .xauto { overflow-x: auto; } >+ </style> >+ </head> >+ <body> >+ <!-- min-width:auto should prevent shrinking below intrinsic width when >+ the flex item has "overflow-x: visible", but not for any other >+ overflow-x values. --> >+ <div class="flexbox"><div class="xvisible"><div></div></div></div> >+ <div class="flexbox"><div class="xhidden"><div></div></div></div> >+ <div class="flexbox"><div class="xscroll"><div></div></div></div> >+ <div class="flexbox"><div class="xauto"><div></div></div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..64501367ac3109817820a0361a58cc7470975b31 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-004-expected.html >@@ -0,0 +1,40 @@ >+<!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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .item { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ >+ .small { width: 26px; } >+ .big { width: 80px; } >+ >+ .item > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ height: 40px; >+ width: 80px; >+ } >+ >+ .yvisible { overflow-y: visible; } >+ .yhidden { overflow-y: hidden; } >+ .yscroll { overflow-y: scroll; } >+ .yauto { overflow-y: auto; } >+ </style> >+ </head> >+ <body> >+ <div class="item big yvisible"><div></div></div> >+ <div class="item small yhidden"><div></div></div> >+ <div class="item small yscroll"><div></div></div> >+ <div class="item small yauto"><div></div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a090f2154f8e6ad8c5c46ed87d224b5ef37f6c10 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-004.html >@@ -0,0 +1,61 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+ <head> >+ <meta charset="utf-8"> >+ <title>CSS Test: Testing min-width:auto & 'overflow' interaction</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto"> >+ <link rel="match" href="flexbox-min-width-auto-004-ref.html"> >+<!-- >+ This testcase checks how "overflow-y" indirectly impacts the sizing >+ behavior of flex items with "min-width:auto" (the new initial value >+ for "min-width"), via its influence on "overflow-x". >+ >+ In particular, the flex-item-specific "min-width:auto" behavior is >+ supposed to be disabled (e.g. we end up with min-width:0) when >+ "overflow-x" is non-"visible". Moreover, when "overflow-y" is set to a >+ scrolling value, it forces "overflow-x" to compute to a scrolling value >+ as well, as described at >+ http://www.w3.org/TR/css-overflow-3/#overflow-properties >+ So, "overflow-y" has an indirect effect (via "overflow-x") here. >+--> >+ <style> >+ .flexbox { >+ display: flex; >+ width: 30px; /* Shrink flex items below min-width */ >+ margin-bottom: 2px; /* (Just for spacing things out, visually) */ >+ } >+ >+ .flexbox > * { >+ /* Flex items have purple border: */ >+ border: 2px dotted purple; >+ } >+ >+ .flexbox > * > * { >+ /* Flex items' contents are gray & fixed-size: */ >+ background: gray; >+ height: 40px; >+ width: 80px; >+ } >+ >+ .yvisible { overflow-y: visible; } >+ .yhidden { overflow-y: hidden; } >+ .yscroll { overflow-y: scroll; } >+ .yauto { overflow-y: auto; } >+ </style> >+ </head> >+ <body> >+ <!-- min-width:auto should prevent shrinking below intrinsic width when >+ the flex item has "overflow-y: visible", but not for any other >+ overflow-y values (because of overflow-y's influence on overflow-x). >+ --> >+ <div class="flexbox"><div class="yvisible"><div></div></div></div> >+ <div class="flexbox"><div class="yhidden"><div></div></div></div> >+ <div class="flexbox"><div class="yscroll"><div></div></div></div> >+ <div class="flexbox"><div class="yauto"><div></div></div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82af03233541c92851d189b1a4173aaadc9bda1e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-001-expected.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: purple; >+ width: 70px; >+ height: 70px; >+ float: left; >+ margin-right: 5px; >+ } >+ .bigItem { >+ background: blue; >+ display: inline-block; >+ height: 200px; >+ width: 75%; >+ float: left; >+ } >+ .smallItem { >+ background: teal; >+ width: 25%; >+ /* In the testcase, we'll stretch to container's height, >+ minus our 10px margin-bottom. */ >+ height: calc(100% - 10px); >+ float: left; >+ } >+ .scroll { overflow: scroll } >+ .auto { overflow: auto } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer scroll"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer auto"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..afc08d8c470d484db1b51ca1b7931d9bdf8b1ac2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-001.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we correctly handle the "overflow" property on >+ a horizontal flex container. --> >+<html> >+<head> >+ <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with contents not overflowing</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> >+ <link rel="match" href="flexbox-overflow-horiz-001-ref.html"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ width: 70px; >+ height: 70px; >+ float: left; >+ margin-right: 5px; >+ } >+ .bigItem { >+ background: blue; >+ height: 200px; >+ flex: 3; >+ } >+ .smallItem { >+ background: teal; >+ margin-bottom: 10px; >+ flex: 1; >+ } >+ .scroll { overflow: scroll } >+ .auto { overflow: auto } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer scroll"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer auto"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..16cc9f4fa4ee758bd6373d72472997ee18a6f9a1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-002-expected.html >@@ -0,0 +1,51 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ align-items: center; >+ width: 70px; >+ height: 70px; >+ float: left; >+ margin-right: 5px; >+ } >+ .bigItem { >+ background: blue; >+ height: 10px; >+ /* Tall border (taller than our container): */ >+ border: solid coral; >+ border-width: 50px 2px; >+ flex: 3; >+ } >+ .smallItem { >+ background: teal; >+ height: 20px; >+ flex: 1; >+ } >+ .hidden > .bigItem { >+ /* To match the testcase's "overflow:hidden"-cropped flex item, we >+ just use a smaller border that exactly fits our container (and >+ doesn't overflow). */ >+ border-width: 30px 2px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..545ebb12e742200d3f55013e90f109f5ebc88f8f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-002.html >@@ -0,0 +1,52 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we honor "align-items" on a horizontal >+ flex container that has "overflow: hidden". We use a huge border on >+ one of the flex items, large enough that it overflows the container, >+ to be sure that "overflow: hidden" is actually applying. --> >+<html> >+<head> >+ <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-items: center'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> >+ <link rel="match" href="flexbox-overflow-horiz-002-ref.html"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ align-items: center; >+ width: 70px; >+ height: 70px; >+ float: left; >+ margin-right: 5px; >+ } >+ .bigItem { >+ background: blue; >+ height: 10px; >+ /* Tall border (taller than our container): */ >+ border: solid coral; >+ border-width: 50px 2px; >+ flex: 3; >+ } >+ .smallItem { >+ background: teal; >+ height: 20px; >+ flex: 1; >+ } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5693c9328e4d38a1df9c87ea0860f7112c684f3f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-003-expected.html >@@ -0,0 +1,48 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ justify-content: space-around; >+ width: 70px; >+ height: 70px; >+ float: left; >+ margin-right: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 20px; >+ height: 200px; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ height: 20px; >+ } >+ .hidden > .bigItem { >+ /* To match the testcase's "overflow:hidden"-cropped flex item, we >+ just use a smaller height that exactly fits our container (and >+ doesn't overflow). */ >+ height: 70px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..66cbe76622530018b05fe1e5bdcd0406caf2aa54 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-003.html >@@ -0,0 +1,49 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we honor "justify-content" on a horizontal >+ flex container that has "overflow:hidden". We use a large flex item, >+ large enough that it overflows the container, to be sure that >+ "overflow: hidden" is actually applying. --> >+<html> >+<head> >+ <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'justify-content: space-around'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> >+ <link rel="match" href="flexbox-overflow-horiz-003-ref.html"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ justify-content: space-around; >+ width: 70px; >+ height: 70px; >+ float: left; >+ margin-right: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 20px; >+ height: 200px; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ height: 20px; >+ } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f9ae88ce4849283208f144c5a7cf0702ea2633de >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-004-expected.html >@@ -0,0 +1,48 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-wrap: wrap; >+ width: 70px; >+ height: 70px; >+ float: left; >+ margin-right: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 50px; >+ height: 200px; >+ } >+ .smallItem { >+ background: teal; >+ width: 50px; >+ height: 20px; >+ } >+ .hidden > .bigItem { >+ /* To match the testcase's "overflow:hidden"-cropped flex item, we >+ just use a smaller height that exactly fits the space remaining >+ in our container, after wrapping */ >+ height: 50px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="smallItem"></div> >+ <div class="bigItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="smallItem"></div> >+ <div class="bigItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ca7471f1d28a08a0d61480783f46221abc34e89e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-004.html >@@ -0,0 +1,49 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we honor "flex-wrap" on a horizontal >+ flex container that has "overflow:hidden". We use a large flex item, >+ large enough that it overflows the container in the cross axis, to be >+ sure that "overflow: hidden" is actually applying. --> >+<html> >+<head> >+ <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'flex-wrap: wrap'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> >+ <link rel="match" href="flexbox-overflow-horiz-004-ref.html"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-wrap: wrap; >+ width: 70px; >+ height: 70px; >+ float: left; >+ margin-right: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 50px; >+ height: 200px; >+ } >+ .smallItem { >+ background: teal; >+ width: 50px; >+ height: 20px; >+ } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="smallItem"></div> >+ <div class="bigItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="smallItem"></div> >+ <div class="bigItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-005-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..589712c6ac7985978b47144f3fe3d2772749335b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-005-expected.html >@@ -0,0 +1,50 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-wrap: wrap; >+ align-content: space-around; >+ width: 70px; >+ height: 70px; >+ float: left; >+ margin-right: 5px; >+ } >+ .bigItem { >+ background: blue; >+ flex: none; /* prevent shrinking (so we can intentionally overflow) */ >+ width: 72px; >+ height: 20px; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ height: 20px; >+ } >+ .hidden > .bigItem { >+ /* To match the testcase's "overflow:hidden"-cropped flex item, we >+ just use a smaller width that exactly fits our container (and >+ doesn't overflow). */ >+ width: 70px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-005.html >new file mode 100644 >index 0000000000000000000000000000000000000000..da4e063ca8719449ebcdae6b310850e21be3f018 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-005.html >@@ -0,0 +1,51 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we honor "align-content" on a horizontal >+ flex container that has "overflow:hidden". We use a large flex item, >+ large enough that it overflows the container in the main axis, to be >+ sure that "overflow: hidden" is actually applying. --> >+<html> >+<head> >+ <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-content: space-around'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> >+ <link rel="match" href="flexbox-overflow-horiz-005-ref.html"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-wrap: wrap; >+ align-content: space-around; >+ width: 70px; >+ height: 70px; >+ float: left; >+ margin-right: 5px; >+ } >+ .bigItem { >+ background: blue; >+ flex: none; /* prevent shrinking (so we can intentionally overflow) */ >+ width: 72px; >+ height: 20px; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ height: 20px; >+ } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3dfddb7bbc85f6500d57123d7cb38a926ae205d3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-001-expected.html >@@ -0,0 +1,50 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: purple; >+ width: 70px; >+ height: 70px; >+ margin-bottom: 5px; >+ } >+ .bigItem { >+ width: 200px; >+ background: blue; >+ height: 75%; >+ } >+ .smallItem { >+ background: teal; >+ margin-right: 10px; >+ height: 25%; >+ } >+ .scroll { overflow: scroll } >+ .auto { overflow: auto } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer scroll"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer auto"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..9c6ad35c18b7ce820cafff3ee45c270b159f1cb8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-001.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we correctly handle the "overflow" property on >+ a vertical flex container with overflowing contents. --> >+<html> >+<head> >+ <title>CSS Test: Testing 'overflow' property on a vertical flex container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> >+ <link rel="match" href="flexbox-overflow-vert-001-ref.html"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-direction: column; >+ width: 70px; >+ height: 70px; >+ margin-bottom: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 200px; >+ flex: 3; >+ } >+ .smallItem { >+ background: teal; >+ margin-right: 10px; >+ flex: 1; >+ } >+ .scroll { overflow: scroll } >+ .auto { overflow: auto } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer scroll"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer auto"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..cf95a6b7bc27de6c723912e1abc9de5f8dc98422 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-002-expected.html >@@ -0,0 +1,51 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-direction: column; >+ align-items: center; >+ width: 70px; >+ height: 70px; >+ margin-bottom: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 10px; >+ /* Tall border (taller than our container): */ >+ border: solid coral; >+ border-width: 2px 50px; >+ flex: 3; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ flex: 1; >+ } >+ .hidden > .bigItem { >+ /* To match the testcase's "overflow:hidden"-cropped flex item, we >+ just use a smaller border that exactly fits our container (and >+ doesn't overflow). */ >+ border-width: 2px 30px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..aeec44e54d17632dd9f4fa76dc42c48b6ca611ca >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-002.html >@@ -0,0 +1,52 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we honor "align-items" on a vertical >+ flex container that has "overflow: hidden". We use a huge border on >+ one of the flex items, large enough that it overflows the container, >+ to be sure that "overflow: hidden" is actually applying. --> >+<html> >+<head> >+ <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-items: center'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> >+ <link rel="match" href="flexbox-overflow-vert-002-ref.html"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-direction: column; >+ align-items: center; >+ width: 70px; >+ height: 70px; >+ margin-bottom: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 10px; >+ /* Tall border (taller than our container): */ >+ border: solid coral; >+ border-width: 2px 50px; >+ flex: 3; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ flex: 1; >+ } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..84bf022276ab0ed6e2248e7074caa242171d7677 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-003-expected.html >@@ -0,0 +1,48 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-direction: column; >+ justify-content: space-around; >+ width: 70px; >+ height: 70px; >+ margin-bottom: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 200px; >+ height: 20px; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ height: 20px; >+ } >+ .hidden > .bigItem { >+ /* To match the testcase's "overflow:hidden"-cropped flex item, we >+ just use a smaller width that exactly fits our container (and >+ doesn't overflow). */ >+ width: 70px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..965b99a40fe28dc01b31f6bb422fdfe5ef7ee3df >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-003.html >@@ -0,0 +1,49 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we honor "justify-content" on a vertical >+ flex container that has "overflow:hidden". We use a large flex item, >+ large enough that it overflows the container, to be sure that >+ "overflow: hidden" is actually applying. --> >+<html> >+<head> >+ <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'justify-content: space-around'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> >+ <link rel="match" href="flexbox-overflow-vert-003-ref.html"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-direction: column; >+ justify-content: space-around; >+ width: 70px; >+ height: 70px; >+ margin-bottom: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 200px; >+ height: 20px; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ height: 20px; >+ } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..154fca8cc5d8c216f536228c347af69fddd2733d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-004-expected.html >@@ -0,0 +1,48 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ width: 70px; >+ height: 70px; >+ margin-bottom: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 200px; >+ height: 50px; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ height: 50px; >+ } >+ .hidden > .bigItem { >+ /* To match the testcase's "overflow:hidden"-cropped flex item, we >+ just use a smaller width that exactly fits the space remaining >+ in our container, after wrapping */ >+ width: 50px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="smallItem"></div> >+ <div class="bigItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="smallItem"></div> >+ <div class="bigItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..579cb4fd1a2031867978713a22c3fac9a59a1bed >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-004.html >@@ -0,0 +1,49 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we honor "flex-wrap" on a vertical >+ flex container that has "overflow:hidden". We use a large flex item, >+ large enough that it overflows the container in the cross axis, to be >+ sure that "overflow: hidden" is actually applying. --> >+<html> >+<head> >+ <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'flex-wrap: wrap'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property"> >+ <link rel="match" href="flexbox-overflow-vert-004-ref.html"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ width: 70px; >+ height: 70px; >+ margin-bottom: 5px; >+ } >+ .bigItem { >+ background: blue; >+ width: 200px; >+ height: 50px; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ height: 50px; >+ } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="smallItem"></div> >+ <div class="bigItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="smallItem"></div> >+ <div class="bigItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-005-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..56022a478da97480e3c8bcea4b5b7a6b0b690bcc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-005-expected.html >@@ -0,0 +1,50 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ align-content: space-around; >+ width: 70px; >+ height: 70px; >+ margin-bottom: 5px; >+ } >+ .bigItem { >+ background: blue; >+ flex: none; /* prevent shrinking (so we can intentionally overflow) */ >+ width: 20px; >+ height: 72px; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ height: 20px; >+ } >+ .hidden > .bigItem { >+ /* To match the testcase's "overflow:hidden"-cropped flex item, we >+ just use a smaller height that exactly fits our container (and >+ doesn't overflow). */ >+ height: 70px; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-005.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1de6d1b8c0756457e2bdbd39945c97755054b583 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-005.html >@@ -0,0 +1,51 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we honor "align-content" on a vertical >+ flex container that has "overflow:hidden". We use a large flex item, >+ large enough that it overflows the container in the main axis, to be >+ sure that "overflow: hidden" is actually applying. --> >+<html> >+<head> >+ <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-content: space-around'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"> >+ <link rel="match" href="flexbox-overflow-vert-005-ref.html"> >+ <style> >+ .flexContainer { >+ background: purple; >+ display: flex; >+ flex-direction: column; >+ flex-wrap: wrap; >+ align-content: space-around; >+ width: 70px; >+ height: 70px; >+ margin-bottom: 5px; >+ } >+ .bigItem { >+ background: blue; >+ flex: none; /* prevent shrinking (so we can intentionally overflow) */ >+ width: 20px; >+ height: 72px; >+ } >+ .smallItem { >+ background: teal; >+ width: 20px; >+ height: 20px; >+ } >+ .hidden { overflow: hidden } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- (overflow un-set) --> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+ <div class="flexContainer hidden"> >+ <div class="bigItem"></div> >+ <div class="smallItem"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..635b0b29c0f233045fcafaf10d78d992fa43ebf2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-001-expected.xhtml >@@ -0,0 +1,78 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ .container { >+ width: 40px; >+ height: 14px; >+ border: 2px solid green; >+ margin-bottom: 2px; >+ } >+ .a { >+ width: 16px; >+ height: 10px; >+ background: blue; >+ min-width: 0; >+ border: 2px solid lightblue; >+ } >+ .b { >+ width: 16px; >+ height: 10px; >+ background: purple; >+ min-width: 0; >+ border: 2px solid slateblue; >+ } >+ .aKid { >+ margin-left: 10px; >+ margin-top: 2px; >+ width: 16px; >+ height: 6px; >+ background: yellow; >+ border: 1px solid black; >+ } >+ .a, .b { float: left; } >+ </style> >+ </head> >+ <body> >+ <!-- Just 6 copies of the same container, since they all should look the >+ same (except for the final "position: fixed" one, which needs to be >+ explicitly marked as "position: fixed" or else it paints differently >+ on Android.) --> >+ <div class="container"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ >+ <div class="container"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ >+ <div class="container"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ >+ <div class="container"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ >+ <div class="container"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ >+ <div class="container" style="position: fixed"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..06b42e126a82a4717b4eb7a32875aa9079b4d2bb >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-001.xhtml >@@ -0,0 +1,90 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with flex items containing overlapping content, to test >+ their paint-order. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the paint-order of overlapping flex items, with varying tweaks on the container</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/> >+ <link rel="match" href="flexbox-paint-ordering-001-ref.xhtml"/> >+ <style> >+ body { >+ line-height: 0; >+ } >+ .container { >+ width: 40px; >+ height: 14px; >+ border: 2px solid green; >+ margin-bottom: 2px; >+ } >+ .a { >+ width: 16px; >+ height: 10px; >+ background: blue; >+ min-width: 0; >+ border: 2px solid lightblue; >+ } >+ .b { >+ width: 16px; >+ height: 10px; >+ background: purple; >+ min-width: 0; >+ border: 2px solid slateblue; >+ } >+ .aKid { >+ margin-left: 10px; >+ margin-top: 2px; >+ width: 16px; >+ height: 6px; >+ background: yellow; >+ border: 1px solid black; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- inline-level flex container --> >+ <div class="container" style="display: inline-flex"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ >+ <!-- block-level flex container --> >+ <div class="container" style="display: flex"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ >+ <!-- floated flex container --> >+ <div class="container" style="display: flex; float: left"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ <!-- Helper-div to clear floats: --> >+ <div style="clear: both"/> >+ >+ <!-- relatively-positioned flex container --> >+ <div class="container" style="display: flex; position: relative"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ >+ <!-- absolutely-positioned flex container --> >+ <div class="container" style="display: flex; position: absolute"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ <!--- Spacer div, since abspos div doesn't set aside space for itself --> >+ <div style="height: 20px"/> >+ >+ <!-- fixed-position flex container --> >+ <div class="container" style="display: flex; position: fixed"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"></div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..55ca62df74adb2962542a84c7f78ed9b08c439ca >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002-expected.xhtml >@@ -0,0 +1,170 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for flex items containing overlapping content. >+ This reference uses inline-block in place of inline-flex, with floated >+ children in place of flex items, and with hardcoded DOM-reordering in >+ place of "order" reordering. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ body { >+ line-height: 0; >+ } >+ >+ .flexbox { >+ display: inline-block; >+ width: 20px; >+ height: 10px; >+ border: 2px solid gray; >+ margin-bottom: 10px; >+ margin-right: 10px; >+ } >+ .a { >+ width: 10px; >+ height: 10px; >+ background: lightblue; >+ float: left; /* to stack horizontally, like a flex item */ >+ } >+ .b { >+ width: 10px; >+ height: 10px; >+ background: pink; >+ float: left; /* to stack horizontally, like a flex item */ >+ } >+ .aKid { >+ margin-left: 3px; >+ margin-top: 3px; >+ width: 10px; >+ height: 10px; >+ background: steelblue; >+ border: 1px solid blue; >+ } >+ .bKid { >+ margin-left: 3px; >+ margin-top: 6px; >+ width: 10px; >+ height: 10px; >+ background: violet; >+ border: 1px solid purple; >+ } >+ >+ /* Need to set 'position' for z-index to take effect. */ >+ .zn2 { z-index: -2; position: relative; } >+ .zn1 { z-index: -1; position: relative; } >+ .z0 { z-index: 0; position: relative; } >+ .z1 { z-index: 1; position: relative; } >+ >+ </style> >+ </head> >+ <body> >+ <!-- order not set: --> >+ <div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div> >+ >+ <br/> >+ >+ <!-- order set, but it matches content order, so it shouldn't matter: --> >+ <div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div> >+ >+ <br/> >+ >+ <!-- order set to reverse of content-order: --> >+ <div class="flexbox"> >+ <div class="b"><div class="bKid"/></div> >+ <div class="a"><div class="aKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="b"><div class="bKid"/></div> >+ <div class="a"><div class="aKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="b"><div class="bKid"/></div> >+ <div class="a"><div class="aKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="b"><div class="bKid"/></div> >+ <div class="a"><div class="aKid"/></div> >+ </div> >+ >+ <br/> >+ >+ <!-- order set to reverse of content-order, AND with z-index set on >+ one or both items, but not such that it changes the paint order --> >+ <div class="flexbox"> >+ <div class="b"><div class="bKid"/></div> >+ <div class="a"><div class="aKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="b"><div class="bKid"/></div> >+ <div class="a"><div class="aKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="b"><div class="bKid"/></div> >+ <div class="a"><div class="aKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="b"><div class="bKid"/></div> >+ <div class="a"><div class="aKid"/></div> >+ </div> >+ >+ <br/> >+ >+ <!-- order set to reverse of content-order, AND with z-index set on >+ one or both items, in such a way that it affects paint order --> >+ <div class="flexbox"> >+ <!-- 'a' is behind the container's border --> >+ <div class="b"><div class="bKid"/></div> >+ <div class="a zn1"><div class="aKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <!-- 'a' and 'b' are both behind the container's border --> >+ <div class="b zn1"><div class="bKid"/></div> >+ <div class="a zn1"><div class="aKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <!-- 'a' and 'b' are both behind the container's border, >+ and 'a' is behind 'b' despite coming after it in the 'order' >+ ordering--> >+ <div class="b zn1"><div class="bKid"/></div> >+ <div class="a zn2"><div class="aKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <!-- 'a' and 'b' are both in front of the container's border, >+ and 'a' is behind 'b' despite coming after it in the 'order' >+ ordering--> >+ <div class="b z1"><div class="bKid"/></div> >+ <div class="a z0"><div class="aKid"/></div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..55a18d5b77773d03d18c1dab5aaffc508434f262 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml >@@ -0,0 +1,176 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase with flex items containing overlapping content, with >+ "order" and "z-index" set on some of them, to test how that affects >+ paint-order. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing the paint-order of overlapping flex items with 'order' and 'z-index' set</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/> >+ <link rel="match" href="flexbox-paint-ordering-002-ref.xhtml"/> >+ <style> >+ body { >+ line-height: 0; >+ } >+ >+ .flexbox { >+ display: inline-flex; >+ width: 20px; >+ height: 10px; >+ border: 2px solid gray; >+ margin-bottom: 10px; >+ margin-right: 10px; >+ } >+ .a { >+ width: 10px; >+ height: 10px; >+ background: lightblue; >+ min-width: 0; >+ } >+ .b { >+ width: 10px; >+ height: 10px; >+ background: pink; >+ min-width: 0; >+ } >+ >+ .aKid { >+ margin-left: 3px; >+ margin-top: 3px; >+ width: 10px; >+ height: 10px; >+ background: steelblue; >+ border: 1px solid blue; >+ } >+ .bKid { >+ margin-left: 3px; >+ margin-top: 6px; >+ width: 10px; >+ height: 10px; >+ background: violet; >+ border: 1px solid purple; >+ } >+ >+ .on1 { order: -1; } >+ .o0 { order: 0; } >+ .o1 { order: 1; } >+ .o2 { order: 2; } >+ >+ .zn2 { z-index: -2; } >+ .zn1 { z-index: -1; } >+ .z0 { z-index: 0; } >+ .z1 { z-index: 1; } >+ >+ </style> >+ </head> >+ <body> >+ <!-- order not set: --> >+ <div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div> >+ >+ <br/> >+ >+ <!-- order set, but it matches content order, so it shouldn't matter: --> >+ <div class="flexbox"> >+ <div class="a on1"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a o0"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a o0"><div class="aKid"/></div> >+ <div class="b o0"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a o2"><div class="aKid"/></div> >+ <div class="b o2"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b o0"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b o1"><div class="bKid"/></div> >+ </div> >+ >+ <br/> >+ >+ <!-- order set to reverse of content-order: --> >+ <div class="flexbox"> >+ <div class="a o1"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a"><div class="aKid"/></div> >+ <div class="b on1"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a o0"><div class="aKid"/></div> >+ <div class="b on1"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a o2"><div class="aKid"/></div> >+ <div class="b o1"><div class="bKid"/></div> >+ </div> >+ >+ <br/> >+ >+ <!-- order set to reverse of content-order, AND with z-index set on >+ one or both items, but not such that it changes the paint order --> >+ <div class="flexbox"> >+ <div class="a o1 z0"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a o1 z1"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a o1 z0"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <div class="a o1 z1"><div class="aKid"/></div> >+ <div class="b z0"><div class="bKid"/></div> >+ </div> >+ >+ <br/> >+ >+ <!-- order set to reverse of content-order, AND with z-index set on >+ one or both items, in such a way that it affects paint order --> >+ <div class="flexbox"> >+ <!-- 'a' is behind the container's border --> >+ <div class="a o1 zn1"><div class="aKid"/></div> >+ <div class="b"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <!-- 'a' and 'b' are both behind the container's border --> >+ <div class="a o1 zn1"><div class="aKid"/></div> >+ <div class="b zn1"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <!-- 'a' and 'b' are both behind the container's border, >+ and 'a' is behind 'b' despite coming after it in the 'order' >+ ordering--> >+ <div class="a o1 zn2"><div class="aKid"/></div> >+ <div class="b zn1"><div class="bKid"/></div> >+ </div >+ ><div class="flexbox"> >+ <!-- 'a' and 'b' are both in front of the container's border, >+ and 'a' is behind 'b' despite coming after it in the 'order' >+ ordering--> >+ <div class="a o1 z0"><div class="aKid"/></div> >+ <div class="b z1"><div class="bKid"/></div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5eadc304189c7e7b6b4e35a6826992a04348b94e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-003-expected.html >@@ -0,0 +1,20 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .limeSquare { >+ background: lime; >+ height: 100px; width: 100px; >+ } >+ </style> >+</head> >+<body> >+ <div class="limeSquare"></div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1a5175cb312b7203ca103d5423d3641184aacc48 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-003.html >@@ -0,0 +1,52 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Testing that paint order isn't influenced >+ by "order" for absolutely positioned flex children</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"> >+ <link rel="match" href="flexbox-paint-ordering-003-ref.html"> >+ <style> >+ .container { display: flex; } >+ .absPosLowOrder { >+ position: absolute; >+ order: 5; >+ background: red; >+ height: 0; >+ width: 0; >+ } >+ .absPosHighOrder { >+ position: absolute; >+ order: 10; >+ height: 0; >+ width: 0; >+ } >+ .redBlock { >+ height: 100px; >+ width: 100px; >+ background: red; >+ } >+ .limeBlock { >+ height: 100px; >+ width: 100px; >+ background: lime; >+ } >+ </style> >+</head> >+<body> >+ <div class="container"> >+ <!-- Note: The following elements will be superimposed. If they weren't >+ positioned, then they'd be flex items, and their relative "order" >+ values would force the first one (with the red child) to paint on top. >+ But since they're absolutely positioned, they're not flex items & >+ "order" has no effect, and so the lime one should end up on top. --> >+ <div class="absPosHighOrder"><div class="redBlock"></div></div> >+ <div class="absPosLowOrder"><div class="limeBlock"></div></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001a-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001a-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6a72f7618bad99ca4792b8a05c1120b5ee1632d8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001a-expected.html >@@ -0,0 +1,20 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html style="display: flex; justify-content: center"> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ div { >+ display: flex; >+ justify-content: center; >+ } >+ </style> >+</head> >+<body> >+ <div>centered</div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001a.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001a.html >new file mode 100644 >index 0000000000000000000000000000000000000000..195503b943b9ca53543f7c950d0fe110c3745a99 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001a.html >@@ -0,0 +1,24 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we correctly handle 'display:flex' property on >+ the root <html> element, with the <body> as the sole flex item. --> >+<html style="display: flex; justify-content: center"> >+<head> >+ <title>CSS Test: Testing 'display:flex' on root node</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> >+ <link rel="match" href="flexbox-root-node-001-ref.html"> >+ <style> >+ html { >+ display: flex; >+ justify-content: center; >+ } >+ </style> >+</head> >+<body> >+ centered >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001b-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001b-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6a72f7618bad99ca4792b8a05c1120b5ee1632d8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001b-expected.html >@@ -0,0 +1,20 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html style="display: flex; justify-content: center"> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ div { >+ display: flex; >+ justify-content: center; >+ } >+ </style> >+</head> >+<body> >+ <div>centered</div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001b.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001b.html >new file mode 100644 >index 0000000000000000000000000000000000000000..87d4fc1e10049f93c33bad30c2418055d9a36f5f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001b.html >@@ -0,0 +1,22 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- This testcase checks that we correctly handle 'display:flex' property on >+ the root <html> element, with no explicit <body>. --> >+<html style="display: flex; justify-content: center"> >+<head> >+ <title>CSS Test: Testing 'display:flex' on root node</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> >+ <link rel="match" href="flexbox-root-node-001-ref.html"> >+ <style> >+ html { >+ display: flex; >+ justify-content: center; >+ } >+ </style> >+</head> >+centered >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b921f35ca3b8cdfd2c86c512b8b76b9a9c6d0ab8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001-expected.html >@@ -0,0 +1,73 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<html> >+<head> >+ <title>Reference: Testing safe overflow-position for align-content, justify-content, and align-items in flex containers</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flex { >+ display: flex; >+ width: 85px; >+ height: 65px; >+ border: 1px solid black; >+ align-content: flex-end; >+ justify-content: center; >+ align-items: center; >+ float: left; >+ clear: both; >+ margin-top: 100px; >+ } >+ .rowNoWrap { >+ flex-flow: row nowrap; >+ } >+ .columnNoWrap { >+ flex-flow: column wrap; >+ } >+ .item { >+ border: 1px solid blue; >+ background: lightblue; >+ width: 28px; >+ height: 28px; >+ flex-shrink: 0; >+ } >+ .bigItem { >+ border: 1px solid blue; >+ background: lightblue; >+ width: 28px; >+ height: 90px; >+ flex-shrink: 0; >+ } >+ .alignContentStart { >+ align-content: start; >+ } >+ .justifyContentStart { >+ justify-content: start; >+ } >+ .alignSelfStart { >+ align-self: start; >+ } >+ </style> >+</head> >+<body> >+ <div class="flex rowNoWrap justifyContentStart"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="bigItem alignSelfStart"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flex columnNoWrap alignContentStart"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8114832aa3493dbc0953c59ad4c84bb2754eb0c3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001.html >@@ -0,0 +1,66 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0 >+--> >+<html> >+<head> >+ <title>CSS Test: Testing safe overflow-position for align-content, justify-content, and align-items in flex containers</title> >+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> >+ <link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> >+ <link rel="match" href="flexbox-safe-overflow-position-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flex { >+ display: flex; >+ width: 85px; >+ height: 65px; >+ border: 1px solid black; >+ align-content: safe flex-end; >+ justify-content: safe center; >+ align-items: safe center; >+ float: left; >+ clear: both; >+ margin-top: 100px; >+ } >+ .rowNoWrap { >+ flex-flow: row nowrap; >+ } >+ .columnNoWrap { >+ flex-flow: column wrap; >+ } >+ .item { >+ border: 1px solid blue; >+ background: lightblue; >+ width: 28px; >+ height: 28px; >+ flex-shrink: 0; >+ } >+ .bigItem { >+ border: 1px solid blue; >+ background: lightblue; >+ width: 28px; >+ height: 90px; >+ flex-shrink: 0; >+ } >+ </style> >+</head> >+<body> >+ <div class="flex rowNoWrap"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="bigItem"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+ <div class="flex columnNoWrap"> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ <div class="item"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-1-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-1-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..602c027f7012af33f9dfc9ceaca821205fe1094a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-1-expected.html >@@ -0,0 +1,26 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<meta charset="utf-8"> >+<title>CSS Test Reference</title> >+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:ecoal95@gmail.com"> >+<style> >+.container { >+ display: block; >+ background: gray; >+ max-height: 200px; >+} >+.panel { >+ background: lightblue; >+ width: 150px; >+ height: 200px; >+ border: 1px solid purple; >+ box-sizing: border-box; >+} >+</style> >+<div class="container"> >+ <div class="panel"> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-1.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-1.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f97d5c578a190ad775918e15ae755c30cdfff877 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-1.html >@@ -0,0 +1,32 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<meta charset="utf-8"> >+<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title> >+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:ecoal95@gmail.com"> >+<link rel="match" href="flexbox-single-line-clamp-1-ref.html"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line"> >+<style> >+.container { >+ display: flex; >+ background: gray; >+ max-height: 200px; >+} >+.panel { >+ background: lightblue; >+ width: 150px; >+ border: 1px solid purple; >+ box-sizing: border-box; >+} >+.tall-child { >+ width: 50px; >+ height: 400px; >+} >+</style> >+<div class="container"> >+ <div class="panel"> >+ <div class="tall-child"></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-2-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-2-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..fda5fa7ccc507a15e6bfe7801704f00d2b725115 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-2-expected.html >@@ -0,0 +1,26 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<meta charset="utf-8"> >+<title>CSS Test Reference</title> >+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:ecoal95@gmail.com"> >+<style> >+.container { >+ background: gray; >+ height: 500px; >+ width: 250px; >+} >+.panel { >+ background: lightblue; >+ border: 1px solid purple; >+ height: 100px; >+} >+</style> >+<div class="container"> >+ <div class="panel"> >+ </div> >+ <div class="panel"> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-2.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-2.html >new file mode 100644 >index 0000000000000000000000000000000000000000..be9e50b90d6876b888be93746219782cfbe785b5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-2.html >@@ -0,0 +1,39 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<meta charset="utf-8"> >+<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title> >+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:ecoal95@gmail.com"> >+<link rel="match" href="flexbox-single-line-clamp-2-ref.html"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line"> >+<style> >+.container { >+ display: flex; >+ background: gray; >+ height: 500px; >+ flex-direction: column; >+ max-width: 250px; >+} >+.panel { >+ background: lightblue; >+ border: 1px solid purple; >+} >+.small-box { >+ width: 100px; >+ height: 100px; >+} >+.big-box { >+ width: 500px; >+ height: 100px; >+} >+</style> >+<div class="container"> >+ <div class="panel"> >+ <div class="small-box"></div> >+ </div> >+ <div class="panel"> >+ <div class="big-box"></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-3-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-3-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..02f7eaa96a416427c503158e787589ed196da3cc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-3-expected.html >@@ -0,0 +1,30 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<meta charset="utf-8"> >+<title>CSS Test Reference</title> >+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:ecoal95@gmail.com"> >+<style> >+.container { >+ background: gray; >+ height: 80px; >+} >+.panel { >+ background: lightblue; >+ width: 150px; >+ height: 80px; >+} >+.contents { >+ height: 10px; >+ width: 10px; >+ background: purple; >+} >+</style> >+</head> >+<div class="container"> >+ <div class="panel"> >+ <div class="contents"></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-3.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-3.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f3afbd41001139ea8e77e883697bd391611c2659 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-3.html >@@ -0,0 +1,38 @@ >+<!doctype html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<meta charset="utf-8"> >+<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title> >+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+<link rel="match" href="flexbox-single-line-clamp-3-ref.html"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line"> >+<style> >+.container { >+ display: flex; >+ background: gray; >+ min-height: 80px; >+ >+ /* Don't let (default) align-content:stretch save us >+ by stretching the line to fit the container! The point >+ here is that the line should already be clamped to the >+ container's min-height. */ >+ align-content: flex-start; >+} >+.panel { >+ background: lightblue; >+ width: 150px; >+} >+.contents { >+ height: 10px; >+ width: 10px; >+ background: purple; >+} >+</style> >+</head> >+<div class="container"> >+ <div class="panel"> >+ <div class="contents"></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..54bafd034eb81452ab1a378a26d7b61488cc550b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-001-expected.xhtml >@@ -0,0 +1,79 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 10px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ font-size: 10px; >+ margin-bottom: 2px; >+ } >+ div.a, div.b, div.c { float: left } >+ div.a { >+ width: 20px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 40px; >+ background: purple; >+ } >+ div.c { >+ width: 40px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="width: 60px"/> >+ <div class="b" style="width: 60px"/> >+ <div class="c" style="width: 60px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a" style="width: 60px"/> >+ <div class="b" style="width: 60px"/> >+ <div class="c" style="width: 60px"/> >+ </div> >+ >+ <div class="flexbox" style="width: 300px"> >+ <div class="a" style="width: 60px"/> >+ <div class="b" style="width: 60px"/> >+ <div class="c" style="width: 60px"/> >+ </div> >+ >+ <div class="flexbox" style="width: 70px"> >+ <div class="a" style="width: 10px"/> >+ <div class="b"/> >+ <div class="c" style="width: 20px"/> >+ </div> >+ >+ <div class="flexbox" style="width: 20px"> >+ <!-- We add an extra layer of <div> wrapping in this chunk, with a >+ fixed width, to keep the overflowing children from wrapping. --> >+ <div style="width: 50px"> >+ <div class="b"/> >+ <div class="c" style="width: 10px"/> >+ </div> >+ </div> >+ >+ <div class="flexbox" style="width: 58px"> >+ <div class="a" style="width: 6px"/> >+ <div class="b"/> >+ <div class="c" style="width: 12px"/> >+ </div> >+ >+ <div class="flexbox" style="width: 140px"> >+ <div class="a" style="width: 40px"/> >+ <div class="b" style="width: 40px"/> >+ <div class="c" style="width: 60px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..0f9b5846de892a857916996662409e620586cae1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-001.xhtml >@@ -0,0 +1,84 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This testcase checks how "min-width" and "max-width" affect the sizing >+ of horizontal flex containers that have no explicit "width" property. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing sizing of an auto-sized horizontal flex container with min-width and max-width constraints</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-sizing-horiz-001-ref.xhtml"/> >+ <style> >+ div { height: 10px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ font-size: 10px; >+ display: flex; >+ margin-bottom: 2px; >+ } >+ div.a { >+ flex: 1 20px; >+ max-width: 60px; >+ background: lightgreen; >+ } >+ div.b { >+ flex: 1 20px; >+ min-width: 40px; >+ max-width: 60px; >+ background: purple; >+ } >+ div.c { >+ flex: 1 40px; >+ min-width: 10px; >+ max-width: 60px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- auto-sized horizontal flexbox should occupy the available width. --> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- Adding a small min-size shouldn't affect that. --> >+ <div class="flexbox" style="min-width: 10px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- ...but a (large) max-size will limit us to that size, instead of >+ our available size.--> >+ <div class="flexbox" style="max-width: 300px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- If we set a maximum size that's even smaller, it'll limit our >+ size and compress our children. --> >+ <div class="flexbox" style="max-width: 70px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- The max-size may be small enough that our items will overflow. --> >+ <div class="flexbox" style="max-width: 20px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- But if we add a min-size, it beats the max-size. Here, we use a >+ min-size smaller than the sum of the items' base sizes... --> >+ <div class="flexbox" style="min-width: 58px; max-width: 20px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- ...and here we use a min-size larger than the sum of the items' >+ base sizes. --> >+ <div class="flexbox" style="min-width: 140px; max-width: 20px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..29aa55a624d9be8ce0caf2c1c88c01b9b110e7dd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-002-expected.xhtml >@@ -0,0 +1,46 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { width: 200px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ background: lightgreen; >+ font-size: 10px; >+ margin-bottom: 5px; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div>text</div> >+ </div> >+ >+ <div class="flexbox"> >+ <div>text</div> >+ </div> >+ >+ <div class="flexbox"> >+ <div>text</div> >+ </div> >+ >+ <div class="flexbox" style="height: 30px"> >+ <div>text</div> >+ </div> >+ >+ <div class="flexbox" style="height: 6px"> >+ <div>text</div> >+ </div> >+ >+ <div class="flexbox" style="height: 30px"> >+ <div>text</div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..c450dd30169b5abf3065960a5b70991a68bc5022 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-002.xhtml >@@ -0,0 +1,61 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This testcase checks how "min-height" and "max-height" affect the sizing >+ of horizontal flex containers that have no explicit "height" property. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing sizing of an auto-sized horizontal flex container with min-height and max-height constraints</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-sizing-horiz-002-ref.xhtml"/> >+ <style> >+ div { width: 200px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ background: lightgreen; >+ font-size: 10px; >+ display: flex; >+ margin-bottom: 5px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- auto-height horizontal flexbox should shrinkwrap its contents. --> >+ <div class="flexbox"> >+ <div>text</div> >+ </div> >+ >+ <!-- Adding a small min-size shouldn't affect that. --> >+ <div class="flexbox" style="min-height: 2px"> >+ <div>text</div> >+ </div> >+ >+ <!-- ...nor should a large max-size. --> >+ <div class="flexbox" style="max-height: 300px"> >+ <div>text</div> >+ </div> >+ >+ <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap >+ size, we should jump up to that size.--> >+ <div class="flexbox" style="min-height: 30px"> >+ <div>text</div> >+ </div> >+ >+ <!-- If we set a maximum size that's smaller than the shrinkwrap size, >+ we should max out at that size.--> >+ <div class="flexbox" style="max-height: 6px"> >+ <div>text</div> >+ </div> >+ >+ <!-- But if we add a min-size, it beats the max-size. --> >+ <div class="flexbox" style="min-height: 30px; max-height: 5px"> >+ <div>text</div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..00c8dbaa4021812e2534418d752f2ebffa7e8c4e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-001-expected.xhtml >@@ -0,0 +1,81 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { width: 10px; } >+ div.flexbox { >+ float: left; >+ border: 1px dashed blue; >+ font-size: 10px; >+ margin-right: 2px; >+ } >+ div.a { >+ height: 20px; >+ background: lightgreen; >+ } >+ div.b { >+ height: 40px; >+ background: purple; >+ } >+ div.c { >+ height: 40px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a" style="height: 30px"/> >+ <div class="b"/> >+ <div class="c" style="height: 50px"/> >+ </div> >+ >+ <div class="flexbox" style="height: 200px"> >+ <div class="a" style="height: 60px"/> >+ <div class="b" style="height: 60px"/> >+ <div class="c" style="height: 60px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a" style="height: 10px"/> >+ <div class="b"/> >+ <div class="c" style="height: 20px"/> >+ </div> >+ >+ <div class="flexbox" style="height: 20px"> >+ <div class="b"/> >+ <div class="c" style="height: 10px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a" style="height: 6px"/> >+ <div class="b"/> >+ <div class="c" style="height: 12px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a" style="height: 40px"/> >+ <div class="b" style="height: 40px"/> >+ <div class="c" style="height: 60px"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..5ac29a7001b62a63f05803b44f2a6e304e5977f7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-001.xhtml >@@ -0,0 +1,98 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This testcase checks how "min-height" and "max-height" affect the sizing >+ of vertical flex containers that have no explicit "height" property. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing sizing of an auto-sized vertical flex container with min-height and max-height constraints</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-sizing-vert-001-ref.xhtml"/> >+ <style> >+ div { width: 10px; } >+ div.flexbox { >+ float: left; >+ border: 1px dashed blue; >+ font-size: 10px; >+ display: flex; >+ flex-direction: column; >+ margin-right: 2px; >+ } >+ div.a { >+ flex: 1 20px; >+ max-height: 60px; >+ background: lightgreen; >+ } >+ div.b { >+ flex: 1 20px; >+ min-height: 40px; >+ max-height: 60px; >+ background: purple; >+ } >+ div.c { >+ flex: 1 40px; >+ min-height: 10px; >+ max-height: 60px; >+ background: orange; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- floated auto-sized vertical flexbox should shrinkwrap its flex items' >+ hypothetical main sizes (their flex base sizes, clamped to min/max) --> >+ <div class="flexbox"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- Adding a small min-size shouldn't affect that. --> >+ <div class="flexbox" style="min-height: 10px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- ...nor should a large max-size. --> >+ <div class="flexbox" style="max-height: 300px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap >+ size, we should jump up to that size.--> >+ <div class="flexbox" style="min-height: 120px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- ...even if it's large enough that our items won't occupy all the >+ space. --> >+ <div class="flexbox" style="min-height: 200px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- If we set a maximum size that's smaller than the shrinkwrap size, >+ we should max out at that size.--> >+ <div class="flexbox" style="max-height: 70px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- The max-size may be small enough that our items will overflow. --> >+ <div class="flexbox" style="max-height: 20px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- But if we add a min-size, it beats the max-size. Here, we use a >+ min-size smaller than the sum of the items' base sizes... --> >+ <div class="flexbox" style="min-height: 58px; max-height: 20px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ <!-- ...and here we use a min-size larger than the sum of the items' >+ base sizes. --> >+ <div class="flexbox" style="min-height: 140px; max-height: 20px"> >+ <div class="a"/><div class="b"/><div class="c"/> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..4a4cc5891b3e0aa7f3aee3211239ea7a005ba57e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-002-expected.xhtml >@@ -0,0 +1,47 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ float: left; >+ border: 1px dashed blue; >+ background: lightgreen; >+ font-size: 10px; >+ margin-right: 10px; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div>AB</div> >+ </div> >+ >+ <div class="flexbox"> >+ <div>AB</div> >+ </div> >+ >+ <div class="flexbox"> >+ <div>AB</div> >+ </div> >+ >+ <div class="flexbox" style="width: 30px"> >+ <div>AB</div> >+ </div> >+ >+ <div class="flexbox" style="width: 3px"> >+ <div>AB</div> >+ </div> >+ >+ <div class="flexbox" style="width: 30px"> >+ <div>AB</div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..9cba454e909b46684e5ec550c577a6e06e6f0c02 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-002.xhtml >@@ -0,0 +1,62 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This testcase checks how "min-width" and "max-width" affect the sizing >+ of vertical flex containers that have no explicit "width" property. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing sizing of an auto-sized vertical flex container with min-width and max-width constraints</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/> >+ <link rel="match" href="flexbox-sizing-vert-002-ref.xhtml"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ float: left; >+ border: 1px dashed blue; >+ background: lightgreen; >+ font-size: 10px; >+ display: flex; >+ margin-right: 10px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- floated auto-width vertical flexbox should shrinkwrap its contents. --> >+ <div class="flexbox"> >+ <div>AB</div> >+ </div> >+ >+ <!-- Adding a small min-size shouldn't affect that. --> >+ <div class="flexbox" style="min-width: 2px"> >+ <div>AB</div> >+ </div> >+ >+ <!-- ...nor should a large max-size. --> >+ <div class="flexbox" style="max-width: 300px"> >+ <div>AB</div> >+ </div> >+ >+ <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap >+ size, we should jump up to that size.--> >+ <div class="flexbox" style="min-width: 30px"> >+ <div>AB</div> >+ </div> >+ >+ <!-- If we set a maximum size that's smaller than the shrinkwrap size, >+ we should max out at that size.--> >+ <div class="flexbox" style="max-width: 3px"> >+ <div>AB</div> >+ </div> >+ >+ <!-- But if we add a min-size, it beats the max-size. --> >+ <div class="flexbox" style="min-width: 30px; max-width: 5px"> >+ <div>AB</div> >+ </div> >+ >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-table-fixup-001-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-table-fixup-001-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..4611521543a712d0385f89554712d9b9978562ae >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-table-fixup-001-expected.xhtml >@@ -0,0 +1,51 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case for ensuring table-fixup does not happen to adjacent >+ table parts directly inside of a flex container. --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div.flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ justify-content: space-around; >+ } >+ >+ .a { >+ background: lightgreen; >+ width: 48px; >+ } >+ >+ .b { >+ background: yellow; >+ width: 48px; >+ } >+ >+ .c { >+ background: pink; >+ width: 48px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- In each example here, we simply use blocks instead of table parts --> >+ <div class="flexbox" >+ ><div class="a">cell1</div><div class="b">cell2</div >+ ></div> >+ >+ <div class="flexbox" >+ ><div class="a">cell1</div><div class="b">t</div >+ ></div> >+ >+ <div class="flexbox" >+ ><div></div >+ ><div class="b">cell1</div >+ ></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-table-fixup-001.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-table-fixup-001.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..00e1a54ffa198298cd1500343265a2a8fa6c5e93 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-table-fixup-001.xhtml >@@ -0,0 +1,65 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ Testcase with table parts inside of a flex container, which should *not* >+ trigger table-fixup. We use justify-content:space-between to stick packing >+ space between flex items, so that we can verify that e.g. a contiguous >+ run of <td>s will each be blockified & form its own flex item (instead of >+ being aggregated into a single table & single flex item). >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Testing that table cells in a flex container get blockified and each form their own flex item</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> >+ <link rel="match" href="flexbox-table-fixup-001-ref.xhtml"/> >+ <style> >+ div.flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ justify-content: space-around; >+ } >+ >+ td { >+ /* Remove any default padding for td elements, so we can compare them >+ easily against blocks in the reference case. */ >+ padding: 0px; >+ } >+ >+ .a { >+ background: lightgreen; >+ width: 48px; >+ } >+ >+ .b { >+ background: yellow; >+ width: 48px; >+ } >+ >+ .c { >+ background: pink; >+ width: 48px; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- The adjacent table-parts in each example below should *not* be >+ grouped into the same flex item. --> >+ <!-- 2 adjacent table cells --> >+ <div class="flexbox" >+ ><td class="a">cell1</td><td class="b">cell2</td></div> >+ >+ <!-- Table cell followed by tbody --> >+ <div class="flexbox" >+ ><td class="a">cell1</td><tbody class="b">t</tbody></div> >+ >+ <!-- Empty table cell (ends up occupying 2px of width), followed by >+ nonempty table cell.--> >+ <div class="flexbox" >+ ><td></td><td class="b">cell1</td></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001a-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001a-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..236e3ee3bb9f2e2c2c4f6631bb730fca9f7e929a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001a-expected.xhtml >@@ -0,0 +1,52 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ Reference case, with inline-blocks instead of flexbox/flex items, >+ with positioning done using margins. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ } >+ div.a { >+ width: 30px; >+ background: lightgreen; >+ display: inline-block; >+ } >+ div.b { >+ width: 20px; >+ background: lightblue; >+ display: inline-block; >+ } >+ img { >+ width: 40px; >+ height: 100%; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 85px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 37.5px" >+ /><div class="b" style="margin-left: 75px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="margin-left: 30px" >+ /><img src="support/solidblue.png" style="margin-left: 60px"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..3bae116b40aa472ab7b77381b8b55595ce17afb8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml >@@ -0,0 +1,57 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test verifies that we don't create anonymous flex items around >+ runs of inline content that are _purely_ whitespace. >+ >+ The test uses "white-space: pre", to try to tempt us into honoring >+ that whitespace. (but we should resist that temptation). >+ >+ The test also uses 'justify-content: space-around' to be sure we can >+ tell whether anonymous flex items are being created around the whitespace >+ (since they'd claim a share of the packing space if they were there). >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Test that anonymous flex items aren't created for pure-whitespace inline content</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> >+ <link rel="match" href="flexbox-whitespace-handling-001-ref.xhtml"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ white-space: pre; >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ justify-content: space-around; >+ } >+ div.a { >+ flex: none; >+ width: 30px; >+ background: lightgreen; >+ } >+ div.b { >+ flex: none; >+ width: 20px; >+ background: lightblue; >+ } >+ img { width: 40px; } >+ </style> >+ </head> >+ <body> >+ <!-- whitespace & tab after flex item --> >+ <div class="flexbox"><div class="a"/> </div> >+ >+ <!-- 2 spaces before flex item --> >+ <div class="flexbox"> <div class="a"/><div class="b"/></div> >+ >+ <!-- newline & whitespace between flex items --> >+ <div class="flexbox"><img src="support/solidblue.png"/> >+ <img src="support/solidblue.png"/></div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001b-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001b-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..236e3ee3bb9f2e2c2c4f6631bb730fca9f7e929a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001b-expected.xhtml >@@ -0,0 +1,52 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ Reference case, with inline-blocks instead of flexbox/flex items, >+ with positioning done using margins. >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ } >+ div.a { >+ width: 30px; >+ background: lightgreen; >+ display: inline-block; >+ } >+ div.b { >+ width: 20px; >+ background: lightblue; >+ display: inline-block; >+ } >+ img { >+ width: 40px; >+ height: 100%; >+ } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 85px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <div class="a" style="margin-left: 37.5px" >+ /><div class="b" style="margin-left: 75px"/> >+ </div> >+ >+ <div class="flexbox"> >+ <img src="support/solidblue.png" style="margin-left: 30px" >+ /><img src="support/solidblue.png" style="margin-left: 60px"/> >+ </div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..43a4c60ce0c87913883e905024fd1f6fb5e1b5dc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml >@@ -0,0 +1,48 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test is like the -1a variant, but with the whitespace removed between >+ flex items (since that whitespace should be ignored anyway, if we're >+ doing things right). >+--> >+<!-- XXXdholbert Does this testcase add value? >+ (Maybe it should be an alternate reference case.) --> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Test that flex items are created correctly</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> >+ <link rel="match" href="flexbox-whitespace-handling-001-ref.xhtml"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ justify-content: space-around; >+ } >+ div.a { >+ width: 30px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ background: lightblue; >+ } >+ img { width: 40px; } >+ </style> >+ </head> >+ <body> >+ <div class="flexbox"><div class="a"/></div> >+ >+ <div class="flexbox"><div class="a"/><div class="b"/></div> >+ >+ <div class="flexbox" >+ ><img src="support/solidblue.png" >+ /><img src="support/solidblue.png"/></div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-002-expected.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-002-expected.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..eeeebb482d39bd800efebe32292275eea82fe2fd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-002-expected.xhtml >@@ -0,0 +1,52 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This reference case is the same as the testcase, but with an explicit <div> >+ around each run of content that we expect to turn into an anonymous >+ flex item (to ensure that the whitespace is included). >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ white-space: pre; >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ justify-content: space-around; >+ } >+ div.a { >+ width: 30px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ background: lightblue; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- spaces around inline content at the beginning of flexbox --> >+ <div class="flexbox"><div> abc</div><div class="a"/></div> >+ <div class="flexbox"><div>abc </div><div class="a"/></div> >+ <div class="flexbox"><div> abc </div><div class="a"/></div> >+ >+ <!-- spaces around inline content at the end of flexbox --> >+ <div class="flexbox"><div class="a"/><div> abc</div></div> >+ <div class="flexbox"><div class="a"/><div>abc </div></div> >+ <div class="flexbox"><div class="a"/><div> abc </div></div> >+ >+ <!-- whitespace around inline content in between flex items --> >+ <div class="flexbox"><div class="a"/><div> abc</div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div>abc </div><div class="b"/></div> >+ <div class="flexbox"><div class="a"/><div> abc </div><div class="b"/></div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-002.xhtml b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-002.xhtml >new file mode 100644 >index 0000000000000000000000000000000000000000..c80947f81226944fb5f0628a6f1b1191ee237cdb >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-002.xhtml >@@ -0,0 +1,54 @@ >+<?xml version="1.0" encoding="UTF-8"?> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- >+ This test verifies that we preserve whitespace at the beginning & end of >+ anonymous flex items (using "white-space: pre" so that it actually >+ occupies space and affects the rendering). >+--> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Test: Test that whitespace is preserved at the edges of anonymous flex items if 'white-space: pre' is set</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> >+ <link rel="match" href="flexbox-whitespace-handling-002-ref.xhtml"/> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> >+ <style> >+ div { height: 100px; } >+ div.flexbox { >+ white-space: pre; >+ border: 1px dashed blue; >+ width: 200px; >+ display: flex; >+ justify-content: space-around; >+ } >+ div.a { >+ width: 30px; >+ background: lightgreen; >+ } >+ div.b { >+ width: 20px; >+ background: lightblue; >+ } >+ </style> >+ </head> >+ <body> >+ <!-- spaces around inline content at the beginning of flexbox --> >+ <div class="flexbox"> abc<div class="a"/></div> >+ <div class="flexbox">abc <div class="a"/></div> >+ <div class="flexbox"> abc <div class="a"/></div> >+ >+ <!-- spaces around inline content at the end of flexbox --> >+ <div class="flexbox"><div class="a"/> abc</div> >+ <div class="flexbox"><div class="a"/>abc </div> >+ <div class="flexbox"><div class="a"/> abc </div> >+ >+ <!-- whitespace around inline content in between flex items --> >+ <div class="flexbox"><div class="a"/> abc<div class="b"/></div> >+ <div class="flexbox"><div class="a"/>abc <div class="b"/></div> >+ <div class="flexbox"><div class="a"/> abc <div class="b"/></div> >+ </body> >+</html> >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..98d23cc8de2108606b24e9ddfc3de5b3a3ff5c8c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-001-expected.html >@@ -0,0 +1,59 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) >+ for the testcase's ::before and ::after generated content. >+ >+ fakeBefore div is always the first child; fakeAfter is always the last. >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ align-items: flex-end; >+ justify-content: space-between; >+ height: 50px; >+ width: 300px; >+ margin-bottom: 2px; >+ background: lightgray; >+ } >+ .fakeBefore { >+ align-self: center; >+ content: 'b'; >+ background: yellow; >+ } >+ .fakeAfter { >+ align-self: center; >+ content: 'a'; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ <div class="fakeBefore">b</div> >+ x >+ <div>y</div> >+ z >+ </div> >+ <div class="flexContainer"> >+ x >+ <div>y</div> >+ z >+ <div class="fakeAfter">a</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="fakeBefore">b</div> >+ x >+ <div>y</div> >+ z >+ <div class="fakeAfter">a</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0abf6ea898a7fe69a3232327d4c176a4ddd0e3e1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-001.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on >+ a flex container and treat them as flex items (e.g. honoring "align-self", >+ and not merging them into anonymous flex items formed around text). >+--> >+<html> >+<head> >+ <title>CSS Test: Testing that generated content nodes are treated as a flex items</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> >+ <link rel="match" href="flexbox-with-pseudo-elements-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ align-items: flex-end; >+ justify-content: space-between; >+ height: 50px; >+ width: 300px; >+ margin-bottom: 2px; >+ background: lightgray; >+ } >+ div.withBefore::before { >+ align-self: center; >+ content: 'b'; >+ background: yellow; >+ } >+ div.withAfter::after { >+ align-self: center; >+ content: 'a'; >+ background: lightblue; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer withBefore"> >+ x >+ <div>y</div> >+ z >+ </div> >+ <div class="flexContainer withAfter"> >+ x >+ <div>y</div> >+ z >+ </div> >+ <div class="flexContainer withBefore withAfter"> >+ x >+ <div>y</div> >+ z >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..48d17019b6dee0a44511f06582c839ab69479236 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-002-expected.html >@@ -0,0 +1,85 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) >+ for the testcase's ::before and ::after generated content. >+ >+ fakeBefore div is always the first child; fakeAfter is always the last. >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ margin-bottom: 2px; >+ background: lightgray; >+ } >+ .fakeBefore { >+ background: yellow; >+ /* This 'order' value should place us after the other elements, visually, >+ even though we're ::before. */ >+ order: 1; >+ } >+ .fakeAfter { >+ background: lightblue; >+ order: -1; >+ } >+ </style> >+</head> >+<body> >+ <!-- 'b' should be at end, due to its high 'order' value: --> >+ <div class="flexContainer"> >+ <div class="fakeBefore">b</div> >+ <div>I</div> >+ </div> >+ >+ <!-- 'b' should be at beginning, since it's '::before' and the other item has >+ a matching 'order' value: --> >+ <div class="flexContainer"> >+ <div class="fakeBefore">b</div> >+ <div style="order: 1">I</div> >+ </div> >+ >+ <!-- 'a' should be at beginning, due to its low 'order' value: --> >+ <div class="flexContainer"> >+ <div>I</div> >+ <div class="fakeAfter">a</div> >+ </div> >+ >+ <!-- 'a' should be at end, since it's '::after' and the other item has >+ a matching 'order' value: --> >+ <div class="flexContainer"> >+ <div style="order: -1">I</div> >+ <div class="fakeAfter">a</div> >+ </div> >+ >+ <!-- As above, the ::after 'a' should be at beginning, and the ::before 'b' >+ should be at end, due to their 'order' values --> >+ <div class="flexContainer"> >+ <div class="fakeBefore">b</div> >+ <div>I</div> >+ <div class="fakeAfter">a</div> >+ </div> >+ >+ <!-- ...but now the normal item "I" has its order increased, so it'll go >+ at the end. --> >+ <div class="flexContainer"> >+ <div class="fakeBefore">b</div> >+ <div style="order: 1">I</div> >+ <div class="fakeAfter">a</div> >+ </div> >+ >+ <!-- ...and now the normal item "I" has its order reduced, so it'll go >+ at the beginning. --> >+ <div class="flexContainer"> >+ <div class="fakeBefore">b</div> >+ <div style="order: -1">I</div> >+ <div class="fakeAfter">a</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6e0738e7496d8f36304118a8cc1be4ac945b552f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-002.html >@@ -0,0 +1,79 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on >+ a flex container and treat them as flex items (e.g. honoring "order"). >+--> >+<html> >+<head> >+ <title>CSS Test: Testing that generated content nodes are treated as a flex items, and honor 'order'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> >+ <link rel="match" href="flexbox-with-pseudo-elements-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ margin-bottom: 2px; >+ background: lightgray; >+ } >+ .withBefore::before { >+ content: 'b'; >+ background: yellow; >+ /* This 'order' value should place us after the other elements, visually, >+ even though we're ::before. */ >+ order: 1; >+ } >+ .withAfter::after { >+ content: 'a'; >+ background: lightblue; >+ /* This 'order' value should place us before the other elements, visually, >+ even though we're ::after. */ >+ order: -1; >+ } >+ </style> >+</head> >+<body> >+ <!-- 'b' should be at end, due to its high 'order' value: --> >+ <div class="flexContainer withBefore"> >+ <div>I</div> >+ </div> >+ >+ <!-- 'b' should be at beginning, since it's '::before' and the other item has >+ a matching 'order' value: --> >+ <div class="flexContainer withBefore"> >+ <div style="order: 1">I</div> >+ </div> >+ >+ <!-- 'a' should be at beginning, due to its low 'order' value: --> >+ <div class="flexContainer withAfter"> >+ <div>I</div> >+ </div> >+ >+ <!-- 'b' should be at beginning, since it's '::after' and the other item has >+ a matching 'order' value: --> >+ <div class="flexContainer withAfter"> >+ <div style="order: -1">I</div> >+ </div> >+ >+ <!-- As above, the ::after 'a' should be at beginning, and the ::before 'b' >+ should be at end, due to their 'order' values --> >+ <div class="flexContainer withBefore withAfter"> >+ <div>I</div> >+ </div> >+ >+ <!-- ...but now the normal item "I" has its order increased, so it'll go >+ at the end. --> >+ <div class="flexContainer withBefore withAfter"> >+ <div style="order: 1">I</div> >+ </div> >+ >+ <!-- ...and now the normal item "I" has its order reduced, so it'll go >+ at the beginning. --> >+ <div class="flexContainer withBefore withAfter"> >+ <div style="order: -1">I</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..bdb973023aed9fc02176521062c9eff7ec94bc68 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-003-expected.html >@@ -0,0 +1,61 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) >+ for the testcase's ::before and ::after generated content. >+ >+ fakeBefore div is always the first child; fakeAfter is always the last. >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ align-items: flex-end; >+ justify-content: space-between; >+ height: 50px; >+ width: 300px; >+ margin-bottom: 2px; >+ background: lightgray; >+ } >+ .fakeBefore { >+ content: 'b'; >+ background: yellow; >+ align-self: center; >+ order: 1; >+ } >+ .fakeAfter { >+ content: 'a'; >+ background: lightblue; >+ align-self: center; >+ order: -1; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ <div class="fakeBefore">b</div> >+ x >+ <div>y</div> >+ z >+ </div> >+ <div class="flexContainer"> >+ x >+ <div>y</div> >+ z >+ <div class="fakeAfter">a</div> >+ </div> >+ <div class="flexContainer"> >+ <div class="fakeBefore">b</div> >+ x >+ <div>y</div> >+ z >+ <div class="fakeAfter">a</div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..fe531b126f31ad159ecdc572312252dd82d6aa80 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-003.html >@@ -0,0 +1,67 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on a >+ flex container, specifically when they've got display:table-row or >+ table-cell. >+ >+ The table-row / table-cell 'display' values should be blockified, and the >+ pseudo-elements should be treated as flex items. (They should not get >+ wrapped in an anonymous table box.) --> >+<html> >+<head> >+ <title>CSS Test: Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> >+ <link rel="match" href="flexbox-with-pseudo-elements-003-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ align-items: flex-end; >+ justify-content: space-between; >+ height: 50px; >+ width: 300px; >+ margin-bottom: 2px; >+ background: lightgray; >+ } >+ div.withBefore::before { >+ display: table-row; >+ content: 'b'; >+ background: yellow; >+ /* If these "align-self" & "order" properties impact the rendering (as >+ they should), that verifies we're being treated as a flex item. */ >+ align-self: center; >+ order: 1; >+ } >+ div.withAfter::after { >+ display: table-cell; >+ content: 'a'; >+ background: lightblue; >+ /* If these "align-self" & "order" properties impact the rendering (as >+ they should), that verifies we're being treated as a flex item. */ >+ align-self: center; >+ order: -1; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer withBefore"> >+ x >+ <div>y</div> >+ z >+ </div> >+ <div class="flexContainer withAfter"> >+ x >+ <div>y</div> >+ z >+ </div> >+ <div class="flexContainer withBefore withAfter"> >+ x >+ <div>y</div> >+ z >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..e2d59662a7bc8a1eefa114ecd4bf348ca4624153 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-001-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ /* Testcase has direction: ltr; */ >+ /* Testcase has writing-mode: horizontal-tb; */ >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ float: left; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- row wrap --> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"><!-- row wrap-reverse --> >+ <div class="item3"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap --> >+ <div class="item2"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item3"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap-reverse --> >+ <div class="item4"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item1"></div> >+ </div> >+ >+ <div class="flexContainer"><!-- column wrap --> >+ <div class="item1"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"><!-- column wrap-reverse --> >+ <div class="item3"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap --> >+ <div class="item2"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item3"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap-reverse --> >+ <div class="item4"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item1"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b2fb6d3f1f070a5ca7540c8f67b71ca855b9b70a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-001.html >@@ -0,0 +1,78 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> >+ <link rel="match" href="flexbox-writing-mode-001-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ direction: ltr; >+ writing-mode: horizontal-tb; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer" style="flex-flow: row wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+ <div class="flexContainer" style="flex-flow: column wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..4c3166171b36ad1c770007bb0211b49329592beb >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-002-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ /* Testcase has direction: ltr; */ >+ /* Testcase has writing-mode: vertical-rl; */ >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ float: left; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- row wrap --> >+ <div class="item3"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"><!-- row wrap-reverse --> >+ <div class="item1"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap --> >+ <div class="item4"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item1"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap-reverse --> >+ <div class="item2"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item3"></div> >+ </div> >+ >+ <div class="flexContainer"><!-- column wrap --> >+ <div class="item2"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item3"></div> >+ </div> >+ <div class="flexContainer"><!-- column wrap-reverse --> >+ <div class="item4"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item1"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap --> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap-reverse --> >+ <div class="item3"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item2"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8e1c724ed7bf574d5558a2f467e50ec95408cda1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-002.html >@@ -0,0 +1,78 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> >+ <link rel="match" href="flexbox-writing-mode-002-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ direction: ltr; >+ writing-mode: vertical-rl; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer" style="flex-flow: row wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+ <div class="flexContainer" style="flex-flow: column wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2d89eea66bb9ffb85e596031d7d2f0a44d9883b8 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-003-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ /* Testcase has direction: ltr; */ >+ /* Testcase has writing-mode: vertical-lr; */ >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ float: left; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- row wrap --> >+ <div class="item1"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"><!-- row wrap-reverse --> >+ <div class="item3"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap --> >+ <div class="item2"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item3"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap-reverse --> >+ <div class="item4"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item1"></div> >+ </div> >+ >+ <div class="flexContainer"><!-- column wrap --> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"><!-- column wrap-reverse --> >+ <div class="item3"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap --> >+ <div class="item2"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item3"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap-reverse --> >+ <div class="item4"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item1"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..9b4450487f3694c7509507301f32bed496736925 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-003.html >@@ -0,0 +1,78 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> >+ <link rel="match" href="flexbox-writing-mode-003-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ direction: ltr; >+ writing-mode: vertical-lr; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer" style="flex-flow: row wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+ <div class="flexContainer" style="flex-flow: column wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-004-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1176830b56e74b133d0bcc85c3000d04f04dbfaa >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-004-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ /* Testcase has direction: rtl; */ >+ /* Testcase has writing-mode: horizontal-tb; */ >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ float: left; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- row wrap --> >+ <div class="item2"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item3"></div> >+ </div> >+ <div class="flexContainer"><!-- row wrap-reverse --> >+ <div class="item4"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item1"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap --> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap-reverse --> >+ <div class="item3"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item2"></div> >+ </div> >+ >+ <div class="flexContainer"><!-- column wrap --> >+ <div class="item3"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"><!-- column wrap-reverse --> >+ <div class="item1"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap --> >+ <div class="item4"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item1"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap-reverse --> >+ <div class="item2"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item3"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..38f4158680859b236b1d54054f1cf6b50137181a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-004.html >@@ -0,0 +1,78 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> >+ <link rel="match" href="flexbox-writing-mode-004-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ direction: rtl; >+ writing-mode: horizontal-tb; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer" style="flex-flow: row wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+ <div class="flexContainer" style="flex-flow: column wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-005-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a0894911bd8131c26758c71008d310c1ce52452a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-005-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ /* Testcase has direction: rtl; */ >+ /* Testcase has writing-mode: vertical-rl; */ >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ float: left; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- row wrap --> >+ <div class="item4"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item1"></div> >+ </div> >+ <div class="flexContainer"><!-- row wrap-reverse --> >+ <div class="item2"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item3"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap --> >+ <div class="item3"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap-reverse --> >+ <div class="item1"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item4"></div> >+ </div> >+ >+ <div class="flexContainer"><!-- column wrap --> >+ <div class="item4"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item1"></div> >+ </div> >+ <div class="flexContainer"><!-- column wrap-reverse --> >+ <div class="item2"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item3"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap --> >+ <div class="item3"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap-reverse --> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-005.html >new file mode 100644 >index 0000000000000000000000000000000000000000..65826fc2e37f5eba89bb7be6a86a51d1410eb19c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-005.html >@@ -0,0 +1,78 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> >+ <link rel="match" href="flexbox-writing-mode-005-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ direction: rtl; >+ writing-mode: vertical-rl; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer" style="flex-flow: row wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+ <div class="flexContainer" style="flex-flow: column wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-006-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-006-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8c045354bc687d566d85efd2236ac8efafec787c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-006-expected.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 Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ /* Testcase has direction: rtl; */ >+ /* Testcase has writing-mode: vertical-lr; */ >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ float: left; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"><!-- row wrap --> >+ <div class="item2"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item3"></div> >+ </div> >+ <div class="flexContainer"><!-- row wrap-reverse --> >+ <div class="item4"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item1"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap --> >+ <div class="item1"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"><!-- row-reverse wrap-reverse --> >+ <div class="item3"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item2"></div> >+ </div> >+ >+ <div class="flexContainer"><!-- column wrap --> >+ <div class="item3"></div><div class="item4"></div> >+ <div class="item1"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"><!-- column wrap-reverse --> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap --> >+ <div class="item4"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item1"></div> >+ </div> >+ <div class="flexContainer"><!-- column-reverse wrap-reverse --> >+ <div class="item2"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item3"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-006.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3e8352a45a2c519d53e8eea64c2c7d17270e2f4b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-006.html >@@ -0,0 +1,78 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> >+ <link rel="match" href="flexbox-writing-mode-006-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ direction: rtl; >+ writing-mode: vertical-lr; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer" style="flex-flow: row wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+ <div class="flexContainer" style="flex-flow: column wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-007-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-007-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0d2e9207beeaa4c7931f82213d233df700d6360c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-007-expected.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ float: left; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-007.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-007.html >new file mode 100644 >index 0000000000000000000000000000000000000000..521af54af49fbb4901dca1b7a0243135c0b35c23 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-007.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 Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> >+ <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> >+ <link rel="match" href="flexbox-writing-mode-007-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ writing-mode: horizontal-tb; >+ flex-flow: row wrap; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ >+ /* Classes applied to flex container, to customize its children >+ * (which should not affect their sizing): >+ */ >+ .kids_horizontal_tb > * { >+ writing-mode: horizontal-tb; >+ } >+ .kids_vertical_lr > * { >+ writing-mode: vertical-lr; >+ } >+ .kids_vertical_rl > * { >+ writing-mode: vertical-rl; >+ } >+ >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer kids_horizontal_tb"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer kids_vertical_lr"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer kids_vertical_rl"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-008-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-008-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..8a21dd65f331d9b767111d496d72e4f6562c0d8d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-008-expected.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ float: left; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item3"></div> >+ <div class="item2"></div><div class="item4"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-008.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-008.html >new file mode 100644 >index 0000000000000000000000000000000000000000..98fd83fbc86118e827b9766dd8b74898b5f7fe54 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-008.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 Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> >+ <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> >+ <link rel="match" href="flexbox-writing-mode-008-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ writing-mode: vertical-lr; >+ flex-flow: row wrap; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ >+ /* Classes applied to flex container, to customize its children >+ * (which should not affect their sizing): >+ */ >+ .kids_horizontal_tb > * { >+ writing-mode: horizontal-tb; >+ } >+ .kids_vertical_lr > * { >+ writing-mode: vertical-lr; >+ } >+ .kids_vertical_rl > * { >+ writing-mode: vertical-rl; >+ } >+ >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer kids_horizontal_tb"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer kids_vertical_lr"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer kids_vertical_rl"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-009-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-009-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..5a96eb9998106821b9cac791058868399652243c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-009-expected.html >@@ -0,0 +1,56 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ float: left; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ <div class="item3"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="item3"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="item3"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item2"></div> >+ </div> >+ <div class="flexContainer"> >+ <div class="item3"></div><div class="item1"></div> >+ <div class="item4"></div><div class="item2"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-009.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-009.html >new file mode 100644 >index 0000000000000000000000000000000000000000..edd63a982a3771e0e1c789c6369e0279558b821f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-009.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 Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> >+ <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> >+ <link rel="match" href="flexbox-writing-mode-009-ref.html"> >+ <meta charset="utf-8"> >+ <style> >+ .flexContainer { >+ display: flex; >+ width: 40px; >+ height: 30px; >+ border: 1px solid gray; >+ margin-bottom: 5px; >+ writing-mode: vertical-rl; >+ flex-flow: row wrap; >+ } >+ .flexContainer > * { >+ width: 20px; >+ height: 15px; >+ } >+ .item1 { >+ /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ >+ background: cyan; >+ } >+ .item2 { >+ background: magenta; >+ } >+ .item3 { >+ background: yellow; >+ } >+ .item4 { >+ background: black; >+ } >+ >+ /* Classes applied to flex container, to customize its children >+ * (which should not affect their sizing): >+ */ >+ .kids_horizontal_tb > * { >+ writing-mode: horizontal-tb; >+ } >+ .kids_vertical_lr > * { >+ writing-mode: vertical-lr; >+ } >+ .kids_vertical_rl > * { >+ writing-mode: vertical-rl; >+ } >+ >+ </style> >+</head> >+<body> >+ <div class="flexContainer"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer kids_horizontal_tb"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer kids_vertical_lr"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+ <div class="flexContainer kids_vertical_rl"> >+ <div class="item1"></div><div class="item2"></div> >+ <div class="item3"></div><div class="item4"></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-010-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-010-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d30d71e4d2c9d4269837089120cee1b8f3472d3d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-010-expected.html >@@ -0,0 +1,90 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: block; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 150px; >+ width: 500px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ } >+ >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ >+ .container > .hl, .container > .hr { >+ /* In the testcase, these items are stretched vertically >+ via the default "align-self:stretch" behavior, and because >+ they have a height of "auto". >+ (The rest of the items have a non-auto height from "inline-size" >+ and their vertical writing-mode, so those ones do not stretch.) */ >+ height: 118px; >+ } >+ >+ .container.hl > * { float: left; } >+ .container.hr > * { float: right; } >+ >+ </style> >+</head> >+<body> >+ >+<div class="container hl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container hl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+<div class="container hr"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container hr"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-010.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-010.html >new file mode 100644 >index 0000000000000000000000000000000000000000..542bde16ce5827de3dda6317b4336259e55ead44 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-010.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: Testing a mix of flex items with various values for >+ 'writing-mode' / 'direction' in a horizontal row-oriented flex container. >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> >+ <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> >+ <link rel="match" href="flexbox-writing-mode-010-ref.html"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: row; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 150px; >+ width: 500px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ } >+ >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ </style> >+</head> >+<body> >+ >+<div class="container hl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container hl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+<div class="container hr"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container hr"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-011-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-011-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0f97d42ce5a08cc0e3c6769a746989c12b232d3a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-011-expected.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 Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: block; >+ float: left; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 500px; >+ width: 150px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ >+ /* This really floats to top ('logical left'), since all the containers >+ have a vertical writing mode. */ >+ float: left; >+ } >+ >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ >+ >+ .container > .vl, .container > .vr, >+ .container > .vl_rtl, .container > .vr_rtl { >+ /* In the testcase, these items are stretched horizontally >+ via the default "align-self:stretch" behavior, and because >+ they have a width of "auto". >+ (The rest of the items have a non-auto width from "inline-size" >+ and their horizontal writing-mode, so those ones do not stretch.) */ >+ width: 126px; >+ } >+ </style> >+</head> >+<body> >+ >+<div class="container vl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+<div class="container vr"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vr"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-011.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-011.html >new file mode 100644 >index 0000000000000000000000000000000000000000..697edb9be00f244652f343c4e15d52f71c36063a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-011.html >@@ -0,0 +1,85 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title> >+ CSS Test: Testing a mix of flex items with various values for >+ 'writing-mode' / 'direction' in a vertical row-oriented flex container. >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> >+ <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> >+ <link rel="match" href="flexbox-writing-mode-011-ref.html"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: row; >+ float: left; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 500px; >+ width: 150px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ } >+ >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ </style> >+</head> >+<body> >+ >+<div class="container vl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+<div class="container vr"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vr"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-012-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-012-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..7d6ca8e5654a302666781e487729efa9f3cb9a1c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-012-expected.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 Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: block; >+ float: left; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 500px; >+ width: 150px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ >+ /* This really floats to top ('logical left'), since all the containers >+ have a vertical writing mode. */ >+ float: right; >+ } >+ >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ >+ >+ .container > .vl, .container > .vr, >+ .container > .vl_rtl, .container > .vr_rtl { >+ /* In the testcase, these items are stretched horizontally >+ via the default "align-self:stretch" behavior, and because >+ they have a width of "auto". >+ (The rest of the items have a non-auto width from "inline-size" >+ and their horizontal writing-mode, so those ones do not stretch.) */ >+ width: 126px; >+ } >+ </style> >+</head> >+<body> >+ >+<div class="container vl_rtl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vl_rtl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+<div class="container vr_rtl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vr_rtl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-012.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-012.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b722d459e14a741ec499ffe33e3857cb4dcea342 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-012.html >@@ -0,0 +1,86 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title> >+ CSS Test: Testing a mix of flex items with various values for >+ 'writing-mode' / 'direction' in a vertical row-oriented flex container >+ with 'direction' flipped. >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> >+ <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> >+ <link rel="match" href="flexbox-writing-mode-012-ref.html"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: row; >+ float: left; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 500px; >+ width: 150px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ } >+ >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ </style> >+</head> >+<body> >+ >+<div class="container vl_rtl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vl_rtl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+<div class="container vr_rtl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vr_rtl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-013-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-013-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d57e801aec1cbdd51a0f2d322fc690c16da438bd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-013-expected.html >@@ -0,0 +1,94 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: block; >+ float: left; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 500px; >+ width: 150px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ } >+ >+ nocollapse { >+ /* special element to disable margin-collapsing */ >+ display: block; >+ overflow: hidden; >+ height: 0; >+ } >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ >+ .container > .vl, .container > .vr, >+ .container > .vl_rtl, .container > .vr_rtl { >+ /* In the testcase, these items are stretched horizontally >+ via the default "align-self:stretch" behavior, and because >+ they have a width of "auto". >+ (The rest of the items have a non-auto width from "inline-size" >+ and their horizontal writing-mode, so those ones do not stretch.) */ >+ width: 126px; >+ } >+ </style> >+</head> >+<body> >+ >+<div class="container hl"> >+ <span class="hl small">p b c</span> <nocollapse></nocollapse> >+ <span class="hl big">p e</span> <nocollapse></nocollapse> >+ <span class="hr small">p b c</span> <nocollapse></nocollapse> >+ <span class="hr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl small">p b c</span> <nocollapse></nocollapse> >+ <span class="vl big">p e</span> <nocollapse></nocollapse> >+</div> >+<div class="container hl"> >+ <span class="vr small">p b c</span> <nocollapse></nocollapse> >+ <span class="vr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> >+ <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> >+</div> >+<div class="container hr"> >+ <span class="hl small">p b c</span> <nocollapse></nocollapse> >+ <span class="hl big">p e</span> <nocollapse></nocollapse> >+ <span class="hr small">p b c</span> <nocollapse></nocollapse> >+ <span class="hr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl small">p b c</span> <nocollapse></nocollapse> >+ <span class="vl big">p e</span> <nocollapse></nocollapse> >+</div> >+<div class="container hr"> >+ <span class="vr small">p b c</span> <nocollapse></nocollapse> >+ <span class="vr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> >+ <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-013.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-013.html >new file mode 100644 >index 0000000000000000000000000000000000000000..3d90e7120274e1e1ff9f0cc8ae34c471de42072d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-013.html >@@ -0,0 +1,85 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title> >+ CSS Test: Testing a mix of flex items with various values for >+ 'writing-mode' / 'direction' in a horizontal column-oriented flex container. >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> >+ <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> >+ <link rel="match" href="flexbox-writing-mode-013-ref.html"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: column; >+ float: left; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 500px; >+ width: 150px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ } >+ >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ </style> >+</head> >+<body> >+ >+<div class="container hl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container hl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+<div class="container hr"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container hr"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-014-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-014-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d57910ee61695e9876c1e9a6e167d83d2fca544a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-014-expected.html >@@ -0,0 +1,92 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: block; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 150px; >+ width: 500px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ } >+ >+ nocollapse { >+ /* special element to disable margin-collapsing */ >+ display: block; >+ overflow: hidden; >+ height: 0; >+ } >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ >+ .container > .hl, .container > .hr { >+ /* In the testcase, these items are stretched vertically >+ via the default "align-self:stretch" behavior, and because >+ they have a height of "auto". >+ (The rest of the items have a non-auto height from "inline-size" >+ and their vertical writing-mode, so those ones do not stretch.) */ >+ height: 118px; >+ } >+ </style> >+</head> >+<body> >+ >+<div class="container vl"> >+ <span class="hl small">p b c</span> <nocollapse></nocollapse> >+ <span class="hl big">p e</span> <nocollapse></nocollapse> >+ <span class="hr small">p b c</span> <nocollapse></nocollapse> >+ <span class="hr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl small">p b c</span> <nocollapse></nocollapse> >+ <span class="vl big">p e</span> <nocollapse></nocollapse> >+</div> >+<div class="container vl"> >+ <span class="vr small">p b c</span> <nocollapse></nocollapse> >+ <span class="vr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> >+ <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> >+</div> >+<div class="container vr"> >+ <span class="hl small">p b c</span> <nocollapse></nocollapse> >+ <span class="hl big">p e</span> <nocollapse></nocollapse> >+ <span class="hr small">p b c</span> <nocollapse></nocollapse> >+ <span class="hr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl small">p b c</span> <nocollapse></nocollapse> >+ <span class="vl big">p e</span> <nocollapse></nocollapse> >+</div> >+<div class="container vr"> >+ <span class="vr small">p b c</span> <nocollapse></nocollapse> >+ <span class="vr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> >+ <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-014.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-014.html >new file mode 100644 >index 0000000000000000000000000000000000000000..299229b1c3bd72a4e6eb5697af9d7535d3257973 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-014.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: Testing a mix of flex items with various values for >+ 'writing-mode' / 'direction' in a vertical column-oriented flex container. >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> >+ <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> >+ <link rel="match" href="flexbox-writing-mode-014-ref.html"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: column; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 150px; >+ width: 500px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ } >+ >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ </style> >+</head> >+<body> >+ >+<div class="container vl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+<div class="container vr"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vr"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-015-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-015-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c8df3cbb878a3c5cd56fa3e4f65890b8e75a1b12 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-015-expected.html >@@ -0,0 +1,92 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: block; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 150px; >+ width: 500px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ } >+ >+ nocollapse { >+ /* special element to disable margin-collapsing */ >+ display: block; >+ overflow: hidden; >+ height: 0; >+ } >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ >+ .container > .hl, .container > .hr { >+ /* In the testcase, these items are stretched vertically >+ via the default "align-self:stretch" behavior, and because >+ they have a height of "auto". >+ (The rest of the items have a non-auto height from "inline-size" >+ and their vertical writing-mode, so those ones do not stretch.) */ >+ height: 118px; >+ } >+ </style> >+</head> >+<body> >+ >+<div class="container vl_rtl"> >+ <span class="hl small">p b c</span> <nocollapse></nocollapse> >+ <span class="hl big">p e</span> <nocollapse></nocollapse> >+ <span class="hr small">p b c</span> <nocollapse></nocollapse> >+ <span class="hr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl small">p b c</span> <nocollapse></nocollapse> >+ <span class="vl big">p e</span> <nocollapse></nocollapse> >+</div> >+<div class="container vl_rtl"> >+ <span class="vr small">p b c</span> <nocollapse></nocollapse> >+ <span class="vr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> >+ <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> >+</div> >+<div class="container vr_rtl"> >+ <span class="hl small">p b c</span> <nocollapse></nocollapse> >+ <span class="hl big">p e</span> <nocollapse></nocollapse> >+ <span class="hr small">p b c</span> <nocollapse></nocollapse> >+ <span class="hr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl small">p b c</span> <nocollapse></nocollapse> >+ <span class="vl big">p e</span> <nocollapse></nocollapse> >+</div> >+<div class="container vr_rtl"> >+ <span class="vr small">p b c</span> <nocollapse></nocollapse> >+ <span class="vr big">p e</span> <nocollapse></nocollapse> >+ <span class="vl_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vl_rtl big">p e</span> <nocollapse></nocollapse> >+ <span class="vr_rtl small">p b c</span><nocollapse></nocollapse> >+ <span class="vr_rtl big">p e</span> <nocollapse></nocollapse> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-015.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-015.html >new file mode 100644 >index 0000000000000000000000000000000000000000..eb7fa1b981cfbe40bf1daebaf45ff52be03241e5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-015.html >@@ -0,0 +1,85 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title> >+ CSS Test: Testing a mix of flex items with various values for >+ 'writing-mode' / 'direction' in a vertical column-oriented flex container >+ with 'direction' flipped. >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> >+ <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> >+ <link rel="match" href="flexbox-writing-mode-015-ref.html"> >+ <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: column; >+ border: 2px solid purple; >+ padding: 2px; >+ margin-bottom: 2em; >+ height: 150px; >+ width: 500px; >+ } >+ >+ span { >+ display: block; >+ background: lightgrey; >+ border: 2px solid black; >+ margin: 11px 13px 17px 7px; >+ inline-size: 6px; >+ } >+ >+ .small { font: 12px Ahem; } >+ .big { font: 20px Ahem; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ </style> >+</head> >+<body> >+ >+<div class="container vl_rtl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vl_rtl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+<div class="container vr_rtl"> >+ <span class="hl small">p b c</span> >+ <span class="hl big">p e</span> >+ <span class="hr small">p b c</span> >+ <span class="hr big">p e</span> >+ <span class="vl small">p b c</span> >+ <span class="vl big">p e</span> >+</div> >+<div class="container vr_rtl"> >+ <span class="vr small">p b c</span> >+ <span class="vr big">p e</span> >+ <span class="vl_rtl small">p b c</span> >+ <span class="vl_rtl big">p e</span> >+ <span class="vr_rtl small">p b c</span> >+ <span class="vr_rtl big">p e</span> >+</div> >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-016-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-016-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c3a223389d0455b2fe71d74837e5ff6121567432 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-016-expected.html >@@ -0,0 +1,136 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title>CSS Reftest Reference</title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <style> >+ .container { >+ display: block; >+ border: 2px solid purple; >+ margin: 3px; >+ /* This red should't be visible, because each container should shrinkwrap >+ its sole child (and the child should cover up this background). */ >+ background: red; >+ /* Float the containers, to test in "rows", with 1 row per writing-mode. */ >+ float: left; >+ } >+ br { clear: both; } >+ >+ .container > * { >+ width: 10px; >+ height: 10px; >+ background: teal; >+ border: 1px solid yellow; >+ } >+ .container > * > * { >+ background: pink; >+ height: 4px; >+ width: 4px; >+ border: 1px solid black; >+ } >+ >+ .pad_top { padding-top: 3px; } >+ .pad_right { padding-right: 4px; } >+ .pad_bottom { padding-bottom: 5px; } >+ .pad_left { padding-left: 6px; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ </style> >+</head> >+<body> >+ <!-- Here, we test padding on each side of a flex item, across 6 different >+ writing-mode combinations (writing-mode X direction). --> >+ <div class="container hl"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container hl"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container hl"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container hl"> >+ <div class="pad_left"><div></div></div> >+ </div> >+ <br> >+ >+ <div class="container hr"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container hr"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container hr"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container hr"> >+ <div class="pad_left"><div></div></div> >+ </div> >+ <br> >+ >+ <div class="container vl"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container vl"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container vl"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container vl"> >+ <div class="pad_left"><div></div></div> >+ </div> >+ <br> >+ >+ <div class="container vr"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container vr"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container vr"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container vr"> >+ <div class="pad_left"><div></div></div> >+ </div> >+ <br> >+ >+ <div class="container vl_rtl"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container vl_rtl"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container vl_rtl"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container vl_rtl"> >+ <div class="pad_left"><div></div></div> >+ </div> >+ <br> >+ >+ <div class="container vr_rtl"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container vr_rtl"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container vr_rtl"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container vr_rtl"> >+ <div class="pad_left"><div></div></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-016.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-016.html >new file mode 100644 >index 0000000000000000000000000000000000000000..94c732358351f990c2a4d7533b2e36598c2ec197 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-016.html >@@ -0,0 +1,144 @@ >+<!DOCTYPE html> >+<!-- >+ Any copyright is dedicated to the Public Domain. >+ http://creativecommons.org/publicdomain/zero/1.0/ >+--> >+<html> >+<head> >+ <title> >+ CSS Test: Testing auto-sized flex containers >+ with various 'writing-mode' values >+ and various padding amounts on flex items. >+ </title> >+ <meta charset="utf-8"> >+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+ <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> >+ <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode"> >+ <link rel="match" href="flexbox-writing-mode-016-ref.html"> >+ <style> >+ .container { >+ display: flex; >+ flex-direction: row; >+ border: 2px solid purple; >+ margin: 3px; >+ /* This red should't be visible, because each container should shrinkwrap >+ its sole child (and the child should cover up this background). */ >+ background: red; >+ /* Float the containers, to test in "rows", with 1 row per writing-mode. */ >+ float: left; >+ } >+ br { clear: both; } >+ >+ .container > * { >+ width: 10px; >+ height: 10px; >+ background: teal; >+ border: 1px solid yellow; >+ } >+ .container > * > * { >+ background: pink; >+ height: 4px; >+ width: 4px; >+ border: 1px solid black; >+ } >+ >+ .pad_top { padding-top: 3px; } >+ .pad_right { padding-right: 4px; } >+ .pad_bottom { padding-bottom: 5px; } >+ .pad_left { padding-left: 6px; } >+ >+ .hl { writing-mode: horizontal-tb; direction: ltr; } >+ .hr { writing-mode: horizontal-tb; direction: rtl; } >+ .vl { writing-mode: vertical-lr; direction: ltr; } >+ .vr { writing-mode: vertical-rl; direction: ltr; } >+ .vl_rtl { writing-mode: vertical-lr; direction: rtl; } >+ .vr_rtl { writing-mode: vertical-rl; direction: rtl; } >+ </style> >+</head> >+<body> >+ <!-- Here, we test padding on each side of a flex item, across 6 different >+ writing-mode combinations (writing-mode X direction). --> >+ <div class="container hl"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container hl"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container hl"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container hl"> >+ <div class="pad_left"><div></div></div> >+ </div> >+ <br> >+ >+ <div class="container hr"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container hr"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container hr"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container hr"> >+ <div class="pad_left"><div></div></div> >+ </div> >+ <br> >+ >+ <div class="container vl"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container vl"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container vl"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container vl"> >+ <div class="pad_left"><div></div></div> >+ </div> >+ <br> >+ >+ <div class="container vr"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container vr"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container vr"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container vr"> >+ <div class="pad_left"><div></div></div> >+ </div> >+ <br> >+ >+ <div class="container vl_rtl"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container vl_rtl"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container vl_rtl"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container vl_rtl"> >+ <div class="pad_left"><div></div></div> >+ </div> >+ <br> >+ >+ <div class="container vr_rtl"> >+ <div class="pad_top"><div></div></div> >+ </div> >+ <div class="container vr_rtl"> >+ <div class="pad_right"><div></div></div> >+ </div> >+ <div class="container vr_rtl"> >+ <div class="pad_bottom"><div></div></div> >+ </div> >+ <div class="container vr_rtl"> >+ <div class="pad_left"><div></div></div> >+ </div> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_absolute-atomic-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_absolute-atomic-expected.html >deleted file mode 100644 >index 310ea204b32da7b43b8fda0526ae7b037b3c53ce..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_absolute-atomic-expected.html >+++ /dev/null >@@ -1,21 +0,0 @@ >-<!DOCTYPE html> >-<title>flexbox | abspos atomic flexitems</title> >-<link rel="author" href="http://opera.com" title="Opera Software"> >-<style> >-body {margin: 0;} >-body>div { >- background: #ffcc00; >- >- display: flex; >- justify-content: space-around; >-} >-div div { >- background: #3366cc; >- margin: 20px; >-} >-</style> >- >-<div> >- <div>filler</div> >- <div>filler</div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_absolute-atomic.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_absolute-atomic.html >deleted file mode 100644 >index dae6b3e43ea71f3795508dd0ca4b243d4510c383..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_absolute-atomic.html >+++ /dev/null >@@ -1,28 +0,0 @@ >-<!DOCTYPE html> >-<title>flexbox | abspos atomic flexitems</title> >-<link rel="author" href="http://opera.com" title="Opera Software"> >-<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> >-<link rel="match" href="flexbox_absolute-atomic-ref.html"> >-<style> >-body {margin: 0;} >-body>div { >- background: #ffcc00; >- >- display: flex; >- justify-content: space-around; >-} >-div div { >- background: #3366cc; >- margin: 20px; >-} >-#abs { >- position: absolute; >- top: -1000px; >-} >-</style> >- >-<div> >- <div>filler</div> >- <div id="abs">filler</div> >- <div>filler</div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-abspos-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-abspos-expected.html >deleted file mode 100644 >index f2fab5a3b178970297c50cd3655dba0ff7cc11bc..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-abspos-expected.html >+++ /dev/null >@@ -1,3 +0,0 @@ >-<!doctype html> >-<title>CSS Test Reference</title> >-<!-- Intentionally blank --> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-abspos.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-abspos.html >deleted file mode 100644 >index 27fdf99c58562013b7bdec40e27bc6eb18cdf775..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-abspos.html >+++ /dev/null >@@ -1,15 +0,0 @@ >-<!DOCTYPE html> >-<title>flexbox | absolutely positioned inline</title> >-<link rel="author" href="http://opera.com" title="Opera Software"> >-<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items"> >-<link rel="match" href="../reference/blank.html"> >-<style> >-div { >- background: red; >- margin-top: -20em; >- position: absolute; >- display: inline-flex; >-} >-</style> >- >-<div>FAIL</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow-expected.html >deleted file mode 100644 >index f6443f6a78adc038a427d9eeaf1265fd77e09a26..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow-expected.html >+++ /dev/null >@@ -1,35 +0,0 @@ >-<!DOCTYPE html> >-<title>flexbox | justify-content: center / overflow</title> >-<link rel="author" href="http://opera.com" title="Opera Software"> >-<style> >-div { >- font-family: monospace; >- background: blue; >- margin: 1em 0 0 10em; >- border: 1px solid black; >- height: 8em; >- width: 4em; >- position: relative; >-} >-span { >- background: yellow; >- margin: 1em 0 0 -2.85em; >- height: 6em; >- display: inline-block; >-} >-span:nth-child(2) { >- background: pink; >- margin-left: 2em; >-} >-span:nth-child(3) { >- background: lightblue; >- margin-left: 0; >- position: relative; >- top: -7em; >- left: 4.95em >-} >-</style> >- >-<div> >- <span>dam</span><span>dam</span><span>dam</span> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..59993aa5fd1159fdeeded2098f7cff3508ddc0cd >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow-expected.txt >@@ -0,0 +1,6 @@ >+Blue is the flexbox. Orange are items that overflow it. >+ >+PASS span 1 >+PASS span 2 >+PASS span 3 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow.html >index 6f4d2baaeeaaa4af6b26efb1b6c0cfd2d8c5d14d..5bedb824b673faca5d38ae50755ae009adcee4e3 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow.html >@@ -1,36 +1,40 @@ > <!DOCTYPE html> > <title>flexbox | justify-content: center / overflow</title> > <link rel="author" href="http://opera.com" title="Opera Software"> >+<link rel="author" href="mailto:dgrogan@chromium.org" title="David Grogan"> > <link rel="help" > href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> >-<link rel="match" href="flexbox_justifycontent-center-overflow-ref.html"> >-<style> >-div { >- font-family: monospace; >- background: blue; >- padding: 0; >- margin: 1em 0 0 10em; >- border: 1px solid black; >- height: 8em; >- width: 4em; >+<meta name="assert" content="Items that overflow a singleline justify-content:center flexbox container are positioned correctly."> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+Blue is the flexbox. Orange are items that overflow it. > >- display: flex; >- justify-content: center; >+<style> >+.flexbox { >+ background: blue; >+ margin-left: 50px; >+ height: 150px; >+ width: 50px; >+ display: flex; >+ justify-content: center; >+ position: relative; > } > span { >- background: white; >- margin: 1em; >- width: 5em; >- max-width: 6em; >- display: inline-block; >- >- flex: 1 0 0%; >+ background: orange; >+ margin: 10px; >+ flex: 1 0 40px; > } >-span:nth-child(1) {background: yellow;} >-span:nth-child(2) {background: pink;} >-span:nth-child(3) {background: lightblue;} > </style> > >-<div> >- <span>dam</span><span>dam</span><span>dam</span> >+<div class=flexbox> >+ <span data-expected-width=40 data-offset-x=-55></span> >+ <span data-expected-width=40 data-offset-x=5></span> >+ <span data-expected-width=40 data-offset-x=65></span> > </div> >+ >+<script> >+ checkLayout('span'); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2-expected.html >index 46441a4c084777427dc981a3723eb88f93778840..af3616a5c238f5047ea4ef191f128a008e427e7b 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2-expected.html >@@ -1,8 +1,10 @@ > <!DOCTYPE html> > <title>flexbox | singleline flexcontainer versus stf :: table</title> > <link rel="author" href="http://opera.com" title="Opera Software"> >+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> > <style> > div, p { >+ font-family: Ahem; > display: inline-block; > } > p { >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2.html >index de954fdf37f41fe48790b66cd458f33c7fc2acbc..9600a85dd125d1c7cd06bde393a2f8e5ce9f1067 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2.html >@@ -3,6 +3,7 @@ > <link rel="author" href="http://opera.com" title="Opera Software"> > <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> > <link rel="match" href="flexbox_stf-table-singleline-ref.html"> >+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> > <style> > #test { > background: blue; >@@ -15,6 +16,7 @@ div div { > display: flex; > } > p { >+ font-family: Ahem; > margin: 1em 0; > width: 200px; > } >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-expected.html >index 46441a4c084777427dc981a3723eb88f93778840..af3616a5c238f5047ea4ef191f128a008e427e7b 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-expected.html >@@ -1,8 +1,10 @@ > <!DOCTYPE html> > <title>flexbox | singleline flexcontainer versus stf :: table</title> > <link rel="author" href="http://opera.com" title="Opera Software"> >+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> > <style> > div, p { >+ font-family: Ahem; > display: inline-block; > } > p { >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline.html >index f1d2914c83046dbc2741171d6c5a58ac3c367e87..7f9491a25cea582016b9273df74ffac41e3c97f6 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline.html >@@ -3,6 +3,7 @@ > <link rel="author" href="http://opera.com" title="Opera Software"> > <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"> > <link rel="match" href="flexbox_stf-table-singleline-ref.html"> >+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> > <style> > #test { > background: red; >@@ -15,6 +16,7 @@ div div { > display: flex; > } > p { >+ font-family: Ahem; > margin: 1em 0; > width: 200px; > } >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexible-order-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexible-order-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..12e94ba598e74cd253f0f91daf7e88f44884b7fc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexible-order-expected.html >@@ -0,0 +1,53 @@ >+<!DOCTYPE html> >+<html> >+<head><title>CSS Test: Change the value of 'order' property</title> >+<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" /> >+ >+<style> >+ >+.box { >+ margin:0 auto; >+ background:#CCC; >+ border-radius:5px; >+ width:600px; >+} >+ >+.box div { >+ margin:0; >+ width:200px; >+ float:left; >+ text-align:center; >+} >+ >+.box .red { >+ background:#F00; >+} >+.box .blue { >+ background:#00F; >+} >+.box .black { >+ color:#FFF; >+ background:#000; >+} >+ >+ >+ >+ >+</style> >+ >+</head> >+ >+<body> >+ >+ >+<!-- FLEX CONTAINER --> >+<div class="box"> >+ <div class="blue">B</div> >+ <div class="red">A</div> >+ <div class="black">C</div> >+</div> >+ >+ >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexible-order.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexible-order.html >new file mode 100644 >index 0000000000000000000000000000000000000000..6f8d5f691a4be328999f375aa4ef940d01021e74 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexible-order.html >@@ -0,0 +1,66 @@ >+<!DOCTYPE html> >+<html> >+<head><title>CSS Test: Change the value of 'order' property</title> >+ >+<meta name="assert" content="The order of three should be blue-red-black" /> >+ >+<link rel="match" href="reference/flexible-order-ref.html"> >+<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" /> >+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" /> >+ >+<style> >+ >+.box { >+ margin:0 auto; >+ background:#CCC; >+ border-radius:5px; >+ width:600px; >+ display:flex; >+ flex-flow:row; >+} >+ >+.box div { >+ text-align:center; >+} >+ >+.box .red { >+ order:-2; >+ flex:0 1 auto; >+ width:200px; >+ background:#F00; >+} >+.box .blue { >+ order:-4; >+ flex:0 1 auto; >+ width:200px; >+ background:#00F; >+} >+.box .black { >+ order:-1; >+ flex:0 1 auto; >+ width:200px; >+ background:#000; >+ color:#FFF; >+} >+ >+ >+ >+ >+</style> >+ >+</head> >+ >+<body> >+ >+ >+<!-- FLEX CONTAINER --> >+<div class="box"> >+ <div class="red">A</div> >+ <div class="blue">B</div> >+ <div class="black">C</div> >+</div> >+ >+ >+ >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-lr-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-lr-expected.html >index d840f47e57c0460b7696522e4ece578604ecea21..0de73376ee9f9ad5d2b3e4db4b6d93746c146177 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-lr-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-lr-expected.html >@@ -17,8 +17,18 @@ > section > div{ > background-color: grey; > color: white; >+ block-size: 20px; > } >- section > div:not(:last-of-type) { >+ #bp { >+ inline-size: 120px; >+ } >+ #ww { >+ inline-size: 130px; >+ } >+ #s, #f { >+ inline-size: 40px; >+ } >+ #bp, #ww { > margin-inline-end: 20px; > margin-block-end: 20px; > } >@@ -26,9 +36,9 @@ > <body> > <p>Test passes if there are <strong> green lines between boxes</strong>.</p> > <section> >- <div>Black Panther</div> >- <div>Wonder Woman</div> >- <div>Storm</div> >- <div>Flash</div> >+ <div id=bp>Black Panther</div> >+ <div id=ww>Wonder Woman</div> >+ <div id=s>Storm</div> >+ <div id=f>Flash</div> > </section> > </body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-lr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-lr.html >index 93dd65ad467cc22e1e3a9b5afd892520fe76fb51..ae4101cecfa08b51a9fdbc9ebe00f92f34c47fc1 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-lr.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-lr.html >@@ -24,14 +24,24 @@ > section > div{ > background-color: grey; > color: white; >+ block-size: 20px; >+ } >+ #bp { >+ inline-size: 120px; >+ } >+ #ww { >+ inline-size: 130px; >+ } >+ #s, #f { >+ inline-size: 40px; > } > </style> > <body> > <p>Test passes if there are <strong> green lines between boxes</strong>.</p> > <section> >- <div>Black Panther</div> >- <div>Wonder Woman</div> >- <div>Storm</div> >- <div>Flash</div> >+ <div id=bp>Black Panther</div> >+ <div id=ww>Wonder Woman</div> >+ <div id=s>Storm</div> >+ <div id=f>Flash</div> > </section> > </body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-ltr-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-ltr-expected.html >index 893acc50bd1e0a1baed739b184f846e62f958b89..65d9eaf32f196d8633dc8672f68db5adbc760055 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-ltr-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-ltr-expected.html >@@ -13,8 +13,18 @@ > section > div{ > background-color: grey; > color: white; >+ block-size: 20px; > } >- section > div:not(:last-of-type) { >+ #bp { >+ inline-size: 120px; >+ } >+ #ww { >+ inline-size: 130px; >+ } >+ #s, #f { >+ inline-size: 40px; >+ } >+ #bp, #ww { > margin-inline-end: 20px; > margin-block-end: 20px; > } >@@ -22,9 +32,9 @@ > <body> > <p>Test passes if there are <strong> green lines between boxes</strong>.</p> > <section> >- <div>Black Panther</div> >- <div>Wonder Woman</div> >- <div>Storm</div> >- <div>Flash</div> >+ <div id=bp>Black Panther</div> >+ <div id=ww>Wonder Woman</div> >+ <div id=s>Storm</div> >+ <div id=f>Flash</div> > </section> > </body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-ltr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-ltr.html >index e5124806ea5b1d4d11748655e1c192fdaa084e3e..705d98cbf52ef9382b9a4ef542723d6d6e8c9bbf 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-ltr.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-ltr.html >@@ -20,14 +20,24 @@ > section > div{ > background-color: grey; > color: white; >+ block-size: 20px; >+ } >+ #bp { >+ inline-size: 120px; >+ } >+ #ww { >+ inline-size: 130px; >+ } >+ #s, #f { >+ inline-size: 40px; > } > </style> > <body> > <p>Test passes if there are <strong> green lines between boxes</strong>.</p> > <section> >- <div>Black Panther</div> >- <div>Wonder Woman</div> >- <div>Storm</div> >- <div>Flash</div> >+ <div id=bp>Black Panther</div> >+ <div id=ww>Wonder Woman</div> >+ <div id=s>Storm</div> >+ <div id=f>Flash</div> > </section> > </body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rl-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rl-expected.html >index 0679fadba9401c7c43a89caa3745bfd3b60b6018..9b64f122f6f1efb9052bec897cda72b6d45d2cdd 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rl-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rl-expected.html >@@ -17,8 +17,18 @@ > section > div{ > background-color: grey; > color: white; >+ block-size: 20px; > } >- section > div:not(:last-of-type) { >+ #bp { >+ inline-size: 120px; >+ } >+ #ww { >+ inline-size: 130px; >+ } >+ #s, #f { >+ inline-size: 40px; >+ } >+ #bp, #ww { > margin-inline-end: 20px; > margin-block-end: 20px; > } >@@ -26,9 +36,9 @@ > <body> > <p>Test passes if there are <strong> green lines between boxes</strong>.</p> > <section> >- <div>Black Panther</div> >- <div>Wonder Woman</div> >- <div>Storm</div> >- <div>Flash</div> >+ <div id=bp>Black Panther</div> >+ <div id=ww>Wonder Woman</div> >+ <div id=s>Storm</div> >+ <div id=f>Flash</div> > </section> > </body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rl.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rl.html >index ed6d02ec0cce4532d85814687db8b31624543850..e37baec59be69fe9d5b8f29627b72b2722f2e298 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rl.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rl.html >@@ -24,14 +24,24 @@ > section > div{ > background-color: grey; > color: white; >+ block-size: 20px; >+ } >+ #bp { >+ inline-size: 120px; >+ } >+ #ww { >+ inline-size: 130px; >+ } >+ #s, #f { >+ inline-size: 40px; > } > </style> > <body> > <p>Test passes if there are <strong> green lines between boxes</strong>.</p> > <section> >- <div>Black Panther</div> >- <div>Wonder Woman</div> >- <div>Storm</div> >- <div>Flash</div> >+ <div id=bp>Black Panther</div> >+ <div id=ww>Wonder Woman</div> >+ <div id=s>Storm</div> >+ <div id=f>Flash</div> > </section> > </body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rtl-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rtl-expected.html >index 3eeec3d0ae4e4a2662fcaccdb49bd3be9049c02b..3f64a75269d59a276943b46c6a47fa96b1cab7a2 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rtl-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rtl-expected.html >@@ -17,8 +17,18 @@ > section > div{ > background-color: grey; > color: white; >+ block-size: 20px; > } >- section > div:not(:last-of-type) { >+ #bp { >+ inline-size: 120px; >+ } >+ #ww { >+ inline-size: 130px; >+ } >+ #s, #f { >+ inline-size: 40px; >+ } >+ #bp, #ww { > margin-inline-end: 20px; > margin-block-end: 20px; > } >@@ -26,9 +36,9 @@ > <body> > <p>Test passes if there are <strong> green lines between boxes</strong>.</p> > <section> >- <div>Black Panther</div> >- <div>Wonder Woman</div> >- <div>Storm</div> >- <div>Flash</div> >+ <div id=bp>Black Panther</div> >+ <div id=ww>Wonder Woman</div> >+ <div id=s>Storm</div> >+ <div id=f>Flash</div> > </section> > </body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rtl.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rtl.html >index ebbb60a18c091677883b7cb8333950d5399f4341..eb52910dc0b21991b8424009f42966cd498c0b5a 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rtl.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/gap-006-rtl.html >@@ -24,14 +24,24 @@ > section > div{ > background-color: grey; > color: white; >+ block-size: 20px; >+ } >+ #bp { >+ inline-size: 120px; >+ } >+ #ww { >+ inline-size: 130px; >+ } >+ #s, #f { >+ inline-size: 40px; > } > </style> > <body> > <p>Test passes if there are <strong> green lines between boxes</strong>.</p> > <section> >- <div>Black Panther</div> >- <div>Wonder Woman</div> >- <div>Storm</div> >- <div>Flash</div> >+ <div id=bp>Black Panther</div> >+ <div id=ww>Wonder Woman</div> >+ <div id=s>Storm</div> >+ <div id=f>Flash</div> > </section> > </body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent-expected.txt >index e26a767164b2bcb9024096432b74ea66581ad74d..1c7f66fde8741ad2ce8f45f7f1b204c714dcc7f5 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent-expected.txt >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent-expected.txt >@@ -1,3 +1,3 @@ > >-FAIL flexbox | computed style | flex-basis: 0% assert_equals: expected "0px" but got "0%" >+PASS flexbox | computed style | flex-basis: 0% > >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html >index abdd030da8a4336001c0f50cba9d28420b259c5a..6abbc50a22b3533b675ced0ca538e7d6f3233b6e 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html >@@ -17,6 +17,6 @@ test(function() { > var body = document.body; > > assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), >- "0px"); >+ "0%"); > }); > </script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number-expected.txt >index 4697be4d55b6165a21e7f98c2a2ff975d2e1237b..69700cdbd3a0debc4d3a6a9505970a1182fd629c 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number-expected.txt >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number-expected.txt >@@ -1,3 +1,3 @@ > >-FAIL flexbox | computed style | flex: number assert_equals: expected "0px" but got "0%" >+PASS flexbox | computed style | flex: number > >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html >index 413a94f0236f79834153477701af3b7199aa9652..a35622277b890b6ee4041c15b01013bba1778413 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html >@@ -21,6 +21,6 @@ test(function() { > assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"), > "1"); > assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"), >- "0px"); >+ "0%"); > }); > </script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-005-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-005-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-005.html >new file mode 100644 >index 0000000000000000000000000000000000000000..95c57d1429e5de2a138571435134152c2c33561b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-005.html >@@ -0,0 +1,15 @@ >+<!DOCTYPE html> >+<link rel="help" href="https://crbug.com/1108928"> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> >+<p>Test passes if there is a filled green square.</p> >+<div id="target"> >+ <div style="display: flex; flex-direction: column"> >+ <div style="display: grid; height: 0; flex: 1; grid-template-rows: minmax(100px, 200%);"> >+ <div style="background: green;"></div> >+ </div> >+ </div> >+</div> >+<script> >+document.body.offsetTop; >+document.getElementById('target').style.width = '100px'; >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-006-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-006-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-006-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-006.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b5d49c4824c794513c823a9c949789f565476cd0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-006.html >@@ -0,0 +1,22 @@ >+<!DOCTYPE html> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://crbug.com/1102183"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<meta name="assert" content="used flex base size includes percent padding on grid items."> >+ >+<style> >+#reference-overlapped-red { >+ position: absolute; >+ background-color: red; >+ width: 100px; >+ height: 100px; >+ z-index: -1; >+} >+</style> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div id=reference-overlapped-red></div> >+ >+<div style="display: flex; width: 100px;"> >+ <div style="display: grid; padding-right: 100%; height: 100px; background: green;"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/height-percentage-with-dynamic-container-size-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/height-percentage-with-dynamic-container-size-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..c225bb54b730a5b94c9d98a68372de1ceacea885 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/height-percentage-with-dynamic-container-size-expected.txt >@@ -0,0 +1,8 @@ >+ >+PASS .container 1 >+PASS .container 2 >+PASS .container 3 >+height: 0% >+height: 100% >+height: 200% >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/height-percentage-with-dynamic-container-size.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/height-percentage-with-dynamic-container-size.html >new file mode 100644 >index 0000000000000000000000000000000000000000..9e13d8b17cd94086a53726385d1f5295e231a69d >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/height-percentage-with-dynamic-container-size.html >@@ -0,0 +1,69 @@ >+<!DOCTYPE html> >+<meta charset="utf-8"> >+<title>CSS Flexbox Test: Flex container with height percentage and dynamic container size</title> >+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> >+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1"> >+<meta name="assert" content="Checks that if a flex container has a definite height percentage, but then the height of the container is dynamically changed to be intrinsic, the resolved value of the percentage is correctly updated."> >+<style> >+.container { >+ width: 100px; >+ background: cyan; >+ height: 200px; >+} >+.changed .container { >+ height: auto; >+} >+.flex { >+ display: flex; >+} >+.content { >+ height: 100px; >+ width: 100px; >+} >+</style> >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<div id="log"></div> >+ >+<pre>height: 0%</pre> >+ >+<div class="container" data-expected-height="100"> >+ <div class="flex" style="height: 0%" data-expected-height="100"> >+ <div data-expected-height="100"> >+ <div class="content"></div> >+ </div> >+ </div> >+</div> >+ >+<pre>height: 100%</pre> >+ >+<div class="container" data-expected-height="100"> >+ <div class="flex" style="height: 100%" data-expected-height="100"> >+ <div data-expected-height="100"> >+ <div class="content"></div> >+ </div> >+ </div> >+</div> >+ >+<pre>height: 200%</pre> >+ >+<div class="container" data-expected-height="100"> >+ <div class="flex" style="height: 200%" data-expected-height="100"> >+ <div data-expected-height="100"> >+ <div class="content"></div> >+ </div> >+ </div> >+</div> >+ >+<script> >+// Force layout >+document.body.offsetLeft; >+ >+// Change 'height' to 'auto'. >+document.body.classList.add("changed"); >+ >+// Check final layout >+checkLayout('.container'); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-006-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-006-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..8d28e796e41b5c584ea854072ac5f560023fab83 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-006-expected.txt >@@ -0,0 +1,4 @@ >+Test passes if orange square is in bottom left corner of rectangle. >+ >+PASS .middle > div 1 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-006.html >new file mode 100644 >index 0000000000000000000000000000000000000000..354763c90ce19d4d41a3b1b2b33db14759b2ab45 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-006.html >@@ -0,0 +1,37 @@ >+<!DOCTYPE html> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property"> >+<meta name="assert" content="Flex item in nested column flexbox is justified properly."> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<style> >+.outer { >+ display: flex; >+ flex-direction: column; >+ width: 100px; >+ border: 2px solid black; >+ position: relative; >+} >+.middle { >+ flex: 0 0 50px; >+ min-height: 50px; >+ display: flex; >+ flex-direction: column; >+ justify-content: flex-end; >+} >+</style> >+ >+Test passes if orange square is in bottom left corner of rectangle. >+ >+<div class="outer"> >+ <div class="middle"> >+ <div style="width: 30px; height: 30px; background: orange" data-offset-y=20></div> >+ </div> >+</div> >+ >+<script> >+checkLayout('.middle > div'); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/ortho-table-item-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/ortho-table-item-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/ortho-table-item-001-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/ortho-table-item-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/ortho-table-item-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..dca42e559f296def8d5109f4cc688527d19d1be3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/ortho-table-item-001.html >@@ -0,0 +1,16 @@ >+<!DOCTYPE html> >+<title>ortho table is flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#ref-for-hypothetical-main-size"> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> >+<meta name="assert" content="Table's specially-defined used min width is honored when the table is an ortho flex item."> >+ >+<p>Test passes if there is a filled green square.</p> >+<div style="display: flex; width: 0px;"> >+ <div style="display: table; writing-mode: vertical-rl; min-width: 0px; width: 100px; height: 100px; background: green;"> >+ <div style="display: table-cell"> >+ <div style="width: 100px"></div> >+ </div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-002-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-002-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f674ec57d78521d5604afa93bbfe18f80a07dcec >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-002.html >@@ -0,0 +1,17 @@ >+<!DOCTYPE html> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> >+<link rel="bookmark" href="https://crbug.com/1092934"> >+<meta name="assert" content="Replaced children with % max-height are sized correctly when their parents are flex items with imposed definite heights." /> >+ >+<p>Test passes if there is a filled green square.</p> >+ >+<div style="display: flex; height: 100px;"> >+ <div> >+ <!-- This is a 200x200 green square. It's inline so that there is no >+ raciness when an image resource loads, which affects chrome's behavior >+ on this test. --> >+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'><rect width='200' height='200' fill='green'/></svg>" style="max-height: 100%"> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-003-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-003-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-003-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..eaab8a35e6fc31ee2144015c04adf12058768cb1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-003.html >@@ -0,0 +1,57 @@ >+<!doctype html> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<link rel="bookmark" href="https://crbug.com/1107604"> >+<meta name="assert" content="Replaced children with % max-height are sized correctly when they are deeply nested flex items with imposed definite heights." /> >+ >+<style> >+#reference-overlapped-red { >+ position: absolute; >+ background-color: red; >+ width: 100px; >+ height: 100px; >+ z-index: -1; >+} >+ >+#outer-flexbox { >+ display: flex; >+ width: 200px; >+ height: 200px; >+ flex-direction: column; >+ align-items: flex-start; >+} >+ >+#middle-flexbox { >+ display: flex; >+ height: 50%; >+ /* This needs to be stretched for repro */ >+ align-items: stretch; >+ min-height: 0px; >+} >+ >+#inner-flexbox { >+ display: flex; >+ align-items: flex-start; >+ min-width: 0px; >+} >+ >+img { >+ max-height: 100%; >+ min-width: 0px; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div id="reference-overlapped-red"></div> >+ >+<div id=outer-flexbox> >+ <div id=middle-flexbox> >+ <div id=inner-flexbox> >+ <!-- This is a 400x400 green square. It's inline so that there is no >+ raciness when an image resource loads, which affects chrome's behavior >+ on this test. --> >+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'><rect width='400' height='400' fill='green'/></svg>"> >+ </div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks-002-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..50933e79c20d9c5fb484d85e488ac50d595aa896 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks-002-expected.txt >@@ -0,0 +1,8 @@ >+flex with 1 wrapper div inside: >+ >+flex with several wrapper divs inside: >+ >+ >+PASS .pct 1 >+PASS .pct 2 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..c66ebd4428e963cd90ad93a204ce4840bf20b2fc >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks-002.html >@@ -0,0 +1,63 @@ >+<!doctype quirks> >+<title>CSS Flexbox: percentage size in flexbox children in quirks mode</title> >+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> >+<link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk" title="Number 4"> >+<link rel="help" href="https://crbug.com/1054185"> >+<meta name="assert" content="This test checks that percentage height/width values in flexbox descendants are correctly resolved in quirks mode."> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<style> >+.fixed-height { height: 100px; } >+.flex { >+ display: flex; >+ border: 3px solid black; >+} >+ >+.pct { >+ height: 100%; >+ min-height: 10px; >+ width: 50px; >+ display: inline-block; >+ vertical-align: top; >+ background: purple; >+} >+.px { >+ height: 50px; >+ width: 50px; >+ display: inline-block; >+ vertical-align: top; >+ background: blue >+}; >+</style> >+ >+flex with 1 wrapper div inside: >+<div class="fixed-height"> >+ <div class="flex"> >+ <div> >+ <div class="pct" data-expected-height=50></div> >+ <div class="px"></div> >+ </div> >+ </div> >+</div> >+flex with several wrapper divs inside: >+<div class="fixed-height"> >+ <div class="flex"> >+ <div> >+ <div> >+ <div> >+ <div class="pct" data-expected-height=50></div> >+ <div class="px"></div> >+ </div> >+ </div> >+ </div> >+ </div> >+</div> >+ >+<script> >+checkLayout('.pct'); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-001-expected.txt >deleted file mode 100644 >index 35a6ce7387a12912c774182c4a72d3103f53c94a..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-001-expected.txt >+++ /dev/null >@@ -1,242 +0,0 @@ >- >-PASS .flexbox 1 >-PASS .flexbox 2 >-PASS .flexbox 3 >-PASS .flexbox 4 >-PASS .flexbox 5 >-PASS .flexbox 6 >-PASS .flexbox 7 >-PASS .flexbox 8 >-PASS .flexbox 9 >-PASS .flexbox 10 >-PASS .flexbox 11 >-PASS .flexbox 12 >-PASS .flexbox 13 >-PASS .flexbox 14 >-PASS .flexbox 15 >-PASS .flexbox 16 >-PASS .flexbox 17 >-PASS .flexbox 18 >-PASS .flexbox 19 >-PASS .flexbox 20 >-PASS .flexbox 21 >-PASS .flexbox 22 >-PASS .flexbox 23 >-PASS .flexbox 24 >-PASS .flexbox 25 >-PASS .flexbox 26 >-PASS .flexbox 27 >-PASS .flexbox 28 >-PASS .flexbox 29 >-PASS .flexbox 30 >-PASS .flexbox 31 >-PASS .flexbox 32 >-PASS .flexbox 33 >-PASS .flexbox 34 >-PASS .flexbox 35 >-PASS .flexbox 36 >-PASS .flexbox 37 >-PASS .flexbox 38 >-PASS .flexbox 39 >-PASS .flexbox 40 >-PASS .flexbox 41 >-PASS .flexbox 42 >-PASS .flexbox 43 >-PASS .flexbox 44 >-PASS .flexbox 45 >-PASS .flexbox 46 >-PASS .flexbox 47 >-PASS .flexbox 48 >-PASS .flexbox 49 >-PASS .flexbox 50 >-PASS .flexbox 51 >-PASS .flexbox 52 >-PASS .flexbox 53 >-PASS .flexbox 54 >-PASS .flexbox 55 >-PASS .flexbox 56 >-PASS .flexbox 57 >-PASS .flexbox 58 >-PASS .flexbox 59 >-PASS .flexbox 60 >-PASS .flexbox 61 >-PASS .flexbox 62 >-PASS .flexbox 63 >-PASS .flexbox 64 >-PASS .flexbox 65 >-PASS .flexbox 66 >-PASS .flexbox 67 >-PASS .flexbox 68 >-PASS .flexbox 69 >-PASS .flexbox 70 >-PASS .flexbox 71 >-PASS .flexbox 72 >-PASS .flexbox 73 >-PASS .flexbox 74 >-PASS .flexbox 75 >-PASS .flexbox 76 >-PASS .flexbox 77 >-PASS .flexbox 78 >-PASS .flexbox 79 >-PASS .flexbox 80 >-PASS .flexbox 81 >-PASS .flexbox 82 >-PASS .flexbox 83 >-PASS .flexbox 84 >-PASS .flexbox 85 >-PASS .flexbox 86 >-PASS .flexbox 87 >-PASS .flexbox 88 >-PASS .flexbox 89 >-PASS .flexbox 90 >-PASS .flexbox 91 >-PASS .flexbox 92 >-PASS .flexbox 93 >-PASS .flexbox 94 >-PASS .flexbox 95 >-PASS .flexbox 96 >-PASS .flexbox 97 >-PASS .flexbox 98 >-PASS .flexbox 99 >-PASS .flexbox 100 >-PASS .flexbox 101 >-PASS .flexbox 102 >-PASS .flexbox 103 >-PASS .flexbox 104 >-PASS .flexbox 105 >-PASS .flexbox 106 >-PASS .flexbox 107 >-PASS .flexbox 108 >-PASS .flexbox 109 >-PASS .flexbox 110 >-PASS .flexbox 111 >-PASS .flexbox 112 >-PASS .flexbox 113 >-PASS .flexbox 114 >-PASS .flexbox 115 >-PASS .flexbox 116 >-PASS .flexbox 117 >-PASS .flexbox 118 >-PASS .flexbox 119 >-PASS .flexbox 120 >-horizontal-tb ltr row justify-content-flex-start >-horizontal-tb ltr row justify-content-flex-end >-horizontal-tb ltr row justify-content-center >-horizontal-tb ltr row justify-content-space-between >-horizontal-tb ltr row justify-content-space-around >-horizontal-tb rtl row justify-content-flex-start >-horizontal-tb rtl row justify-content-flex-end >-horizontal-tb rtl row justify-content-center >-horizontal-tb rtl row justify-content-space-between >-horizontal-tb rtl row justify-content-space-around >-horizontal-tb ltr column justify-content-flex-start >-horizontal-tb ltr column justify-content-flex-end >-horizontal-tb ltr column justify-content-center >-horizontal-tb ltr column justify-content-space-between >-horizontal-tb ltr column justify-content-space-around >-horizontal-tb rtl column justify-content-flex-start >-horizontal-tb rtl column justify-content-flex-end >-horizontal-tb rtl column justify-content-center >-horizontal-tb rtl column justify-content-space-between >-horizontal-tb rtl column justify-content-space-around >-horizontal-tb ltr row-reverse justify-content-flex-start >-horizontal-tb ltr row-reverse justify-content-flex-end >-horizontal-tb ltr row-reverse justify-content-center >-horizontal-tb ltr row-reverse justify-content-space-between >-horizontal-tb ltr row-reverse justify-content-space-around >-horizontal-tb rtl row-reverse justify-content-flex-start >-horizontal-tb rtl row-reverse justify-content-flex-end >-horizontal-tb rtl row-reverse justify-content-center >-horizontal-tb rtl row-reverse justify-content-space-between >-horizontal-tb rtl row-reverse justify-content-space-around >-horizontal-tb ltr column-reverse justify-content-flex-start >-horizontal-tb ltr column-reverse justify-content-flex-end >-horizontal-tb ltr column-reverse justify-content-center >-horizontal-tb ltr column-reverse justify-content-space-between >-horizontal-tb ltr column-reverse justify-content-space-around >-horizontal-tb rtl column-reverse justify-content-flex-start >-horizontal-tb rtl column-reverse justify-content-flex-end >-horizontal-tb rtl column-reverse justify-content-center >-horizontal-tb rtl column-reverse justify-content-space-between >-horizontal-tb rtl column-reverse justify-content-space-around >-vertical-rl ltr row justify-content-flex-start >-vertical-rl ltr row justify-content-flex-end >-vertical-rl ltr row justify-content-center >-vertical-rl ltr row justify-content-space-between >-vertical-rl ltr row justify-content-space-around >-vertical-rl rtl row justify-content-flex-start >-vertical-rl rtl row justify-content-flex-end >-vertical-rl rtl row justify-content-center >-vertical-rl rtl row justify-content-space-between >-vertical-rl rtl row justify-content-space-around >-vertical-rl ltr column justify-content-flex-start >-vertical-rl ltr column justify-content-flex-end >-vertical-rl ltr column justify-content-center >-vertical-rl ltr column justify-content-space-between >-vertical-rl ltr column justify-content-space-around >-vertical-rl rtl column justify-content-flex-start >-vertical-rl rtl column justify-content-flex-end >-vertical-rl rtl column justify-content-center >-vertical-rl rtl column justify-content-space-between >-vertical-rl rtl column justify-content-space-around >-vertical-rl ltr row-reverse justify-content-flex-start >-vertical-rl ltr row-reverse justify-content-flex-end >-vertical-rl ltr row-reverse justify-content-center >-vertical-rl ltr row-reverse justify-content-space-between >-vertical-rl ltr row-reverse justify-content-space-around >-vertical-rl rtl row-reverse justify-content-flex-start >-vertical-rl rtl row-reverse justify-content-flex-end >-vertical-rl rtl row-reverse justify-content-center >-vertical-rl rtl row-reverse justify-content-space-between >-vertical-rl rtl row-reverse justify-content-space-around >-vertical-rl ltr column-reverse justify-content-flex-start >-vertical-rl ltr column-reverse justify-content-flex-end >-vertical-rl ltr column-reverse justify-content-center >-vertical-rl ltr column-reverse justify-content-space-between >-vertical-rl ltr column-reverse justify-content-space-around >-vertical-rl rtl column-reverse justify-content-flex-start >-vertical-rl rtl column-reverse justify-content-flex-end >-vertical-rl rtl column-reverse justify-content-center >-vertical-rl rtl column-reverse justify-content-space-between >-vertical-rl rtl column-reverse justify-content-space-around >-vertical-lr ltr row justify-content-flex-start >-vertical-lr ltr row justify-content-flex-end >-vertical-lr ltr row justify-content-center >-vertical-lr ltr row justify-content-space-between >-vertical-lr ltr row justify-content-space-around >-vertical-lr rtl row justify-content-flex-start >-vertical-lr rtl row justify-content-flex-end >-vertical-lr rtl row justify-content-center >-vertical-lr rtl row justify-content-space-between >-vertical-lr rtl row justify-content-space-around >-vertical-lr ltr column justify-content-flex-start >-vertical-lr ltr column justify-content-flex-end >-vertical-lr ltr column justify-content-center >-vertical-lr ltr column justify-content-space-between >-vertical-lr ltr column justify-content-space-around >-vertical-lr rtl column justify-content-flex-start >-vertical-lr rtl column justify-content-flex-end >-vertical-lr rtl column justify-content-center >-vertical-lr rtl column justify-content-space-between >-vertical-lr rtl column justify-content-space-around >-vertical-lr ltr row-reverse justify-content-flex-start >-vertical-lr ltr row-reverse justify-content-flex-end >-vertical-lr ltr row-reverse justify-content-center >-vertical-lr ltr row-reverse justify-content-space-between >-vertical-lr ltr row-reverse justify-content-space-around >-vertical-lr rtl row-reverse justify-content-flex-start >-vertical-lr rtl row-reverse justify-content-flex-end >-vertical-lr rtl row-reverse justify-content-center >-vertical-lr rtl row-reverse justify-content-space-between >-vertical-lr rtl row-reverse justify-content-space-around >-vertical-lr ltr column-reverse justify-content-flex-start >-vertical-lr ltr column-reverse justify-content-flex-end >-vertical-lr ltr column-reverse justify-content-center >-vertical-lr ltr column-reverse justify-content-space-between >-vertical-lr ltr column-reverse justify-content-space-around >-vertical-lr rtl column-reverse justify-content-flex-start >-vertical-lr rtl column-reverse justify-content-flex-end >-vertical-lr rtl column-reverse justify-content-center >-vertical-lr rtl column-reverse justify-content-space-between >-vertical-lr rtl column-reverse justify-content-space-around >- >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-001.html >deleted file mode 100644 >index f60174084652a3373c6b1873e02da373575c53cd..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-001.html >+++ /dev/null >@@ -1,709 +0,0 @@ >-<!DOCTYPE html> >-<html> >-<title>CSS Test: Absolutely positioned children of flexboxes</title> >-<link rel="author" title="Google Inc." href="http://www.google.com/"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<meta name="flags" content="dom"> >-<meta name="assert" content="Checks that we correctly position abspos children >-in a number of writing modes and alignments"> >-<style> >-body { >- margin: 0; >-} >- >-.title { >- margin-top: 1em; >-} >- >-.flexbox { >- display: flex; >- background-color: #aaa; >- position: relative; >-} >-.flexbox div { >- border: 0; >- flex: none; >-} >- >-.horizontal-tb { >- writing-mode: horizontal-tb; >-} >-.vertical-rl { >- writing-mode: vertical-rl; >-} >-.vertical-lr { >- writing-mode: vertical-lr; >-} >- >-.row { >- flex-flow: row; >-} >-.row-reverse { >- flex-flow: row-reverse; >-} >-.column { >- flex-flow: column; >-} >-.column-reverse { >- flex-flow: column-reverse; >-} >- >-.flexbox :nth-child(1) { >- background-color: blue; >-} >-.flexbox :nth-child(2) { >- background-color: green; >-} >- >-.rtl { >- direction: rtl; >-} >-.ltr { >- direction: ltr; >-} >- >-.justify-content-flex-start { >- justify-content: flex-start; >-} >-.justify-content-flex-end { >- justify-content: flex-end; >-} >-.justify-content-center { >- justify-content: center; >-} >-.justify-content-space-between { >- justify-content: space-between; >-} >-.justify-content-space-around { >- justify-content: space-around; >-} >-</style> >-<script src="/resources/testharness.js"></script> >-<script src="/resources/testharnessreport.js"></script> >-<script src="/resources/check-layout-th.js"></script> >-<body onload="checkLayout('.flexbox')"> >-<div id=log></div> >-<script> >-// Each flexbox has two abspos children - one is 40x10, the other 10x20. >-// The flexbox itself is 80x20. >-// All that is flipped for vertical flows. >-var expectations = { >- 'horizontal-tb': { >- 'row': { >- 'ltr': { >- 'flex-start': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'center': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'flex-end': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'space-around': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- }, >- }, >- 'column': { >- 'ltr': { >- 'flex-start': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [0, 40], >- 'child2': [0, 70], >- }, >- 'center': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [10, 0], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [10, 40], >- 'child2': [0, 70], >- }, >- 'center': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [10, 0], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- }, >- }, >- 'row-reverse': { >- 'ltr': { >- 'flex-start': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'flex-end': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'space-around': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'center': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- }, >- }, >- 'column-reverse': { >- 'ltr': { >- 'flex-start': { >- 'child1': [0, 40], >- 'child2': [0, 70], >- }, >- 'flex-end': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [0, 40], >- 'child2': [0, 70], >- }, >- 'space-around': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [10, 40], >- 'child2': [0, 70], >- }, >- 'flex-end': { >- 'child1': [10, 0], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [10, 40], >- 'child2': [0, 70], >- }, >- 'space-around': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- }, >- }, >- }, >- 'vertical-rl': { >- 'row': { >- 'ltr': { >- 'flex-start': { >- 'child1': [10, 0], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [10, 40], >- 'child2': [0, 70], >- }, >- 'center': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [10, 0], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [10, 40], >- 'child2': [0, 70], >- }, >- 'flex-end': { >- 'child1': [10, 0], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [10, 40], >- 'child2': [0, 70], >- }, >- 'space-around': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- }, >- }, >- 'column': { >- 'ltr': { >- 'flex-start': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'flex-end': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'space-around': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [40, 10], >- 'child2': [70, 0], >- }, >- 'flex-end': { >- 'child1': [0, 10], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [20, 10], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [40, 10], >- 'child2': [70, 0], >- }, >- 'space-around': { >- 'child1': [20, 10], >- 'child2': [35, 0], >- }, >- }, >- }, >- 'row-reverse': { >- 'ltr': { >- 'flex-start': { >- 'child1': [10, 40], >- 'child2': [0, 70], >- }, >- 'flex-end': { >- 'child1': [10, 0], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [10, 40], >- 'child2': [0, 70], >- }, >- 'space-around': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [10, 0], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [10, 40], >- 'child2': [0, 70], >- }, >- 'center': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [10, 0], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [10, 20], >- 'child2': [0, 35], >- }, >- }, >- }, >- 'column-reverse': { >- 'ltr': { >- 'flex-start': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'center': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [0, 10], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [40, 10], >- 'child2': [70, 0], >- }, >- 'center': { >- 'child1': [20, 10], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [0, 10], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [20, 10], >- 'child2': [35, 0], >- }, >- }, >- }, >- }, >- 'vertical-lr': { >- 'row': { >- 'ltr': { >- 'flex-start': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [0, 40], >- 'child2': [0, 70], >- }, >- 'center': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [0, 40], >- 'child2': [0, 70], >- }, >- 'flex-end': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [0, 40], >- 'child2': [0, 70], >- }, >- 'space-around': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- }, >- }, >- 'column': { >- 'ltr': { >- 'flex-start': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'center': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [0, 10], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [40, 10], >- 'child2': [70, 0], >- }, >- 'center': { >- 'child1': [20, 10], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [0, 10], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [20, 10], >- 'child2': [35, 0], >- }, >- }, >- }, >- 'row-reverse': { >- 'ltr': { >- 'flex-start': { >- 'child1': [0, 40], >- 'child2': [0, 70], >- }, >- 'flex-end': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [0, 40], >- 'child2': [0, 70], >- }, >- 'space-around': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'flex-end': { >- 'child1': [0, 40], >- 'child2': [0, 70], >- }, >- 'center': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- 'space-between': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'space-around': { >- 'child1': [0, 20], >- 'child2': [0, 35], >- }, >- }, >- }, >- 'column-reverse': { >- 'ltr': { >- 'flex-start': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'flex-end': { >- 'child1': [0, 0], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [40, 0], >- 'child2': [70, 0], >- }, >- 'space-around': { >- 'child1': [20, 0], >- 'child2': [35, 0], >- }, >- }, >- 'rtl': { >- 'flex-start': { >- 'child1': [40, 10], >- 'child2': [70, 0], >- }, >- 'flex-end': { >- 'child1': [0, 10], >- 'child2': [0, 0], >- }, >- 'center': { >- 'child1': [20, 10], >- 'child2': [35, 0], >- }, >- 'space-between': { >- 'child1': [40, 10], >- 'child2': [70, 0], >- }, >- 'space-around': { >- 'child1': [20, 10], >- 'child2': [35, 0], >- }, >- }, >- }, >- }, >-}; >- >-var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; >-var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; >-var directions = ['ltr', 'rtl']; >-var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around']; >- >-function mainAxisDirection(writingMode, flexDirection) >-{ >- if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1) >- || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1)) >- return 'width'; >- return 'height'; >-} >- >-function addChild(flexbox, mainAxis, crossAxis, mainAxisLength, crossAxisLength, expectations) >-{ >- var child = document.createElement('div'); >- child.setAttribute('style', mainAxis + ': ' + mainAxisLength + 'px;' >- + crossAxis + ': ' + crossAxisLength + 'px; position: absolute;'); >- >- child.setAttribute("data-expected-" + mainAxis, mainAxisLength); >- child.setAttribute("data-expected-" + crossAxis, crossAxisLength); >- child.setAttribute("data-offset-x", expectations[0]); >- child.setAttribute("data-offset-y", expectations[1]); >- >- flexbox.appendChild(child); >-} >- >-writingModes.forEach(function(writingMode) { >- flexDirections.forEach(function(flexDirection) { >- directions.forEach(function(direction) { >- justifyContents.forEach(function(justifyContent) { >- var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent; >- var title = document.createElement('div'); >- title.className = 'title'; >- title.innerHTML = flexboxClassName; >- document.body.appendChild(title); >- >- var mainAxis = mainAxisDirection(writingMode, flexDirection); >- var crossAxis = (mainAxis == 'width') ? 'height' : 'width'; >- >- var flexbox = document.createElement('div'); >- flexbox.className = 'flexbox ' + flexboxClassName; >- flexbox.setAttribute('style', mainAxis + ': 80px;' + crossAxis + ': 20px'); >- >- var baselineMargin = (flexDirection.indexOf('row') != -1) ? 'margin-block-start: 5px' : 'margin-inline-start: 5px'; >- >- var testExpectations = expectations[writingMode][flexDirection][direction][justifyContent]; >- addChild(flexbox, mainAxis, crossAxis, 40, 10, testExpectations['child1']); >- addChild(flexbox, mainAxis, crossAxis, 10, 20, testExpectations['child2']); >- >- document.body.appendChild(flexbox); >- }) >- }) >- }) >-}) >- >-</script> >- >-</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-002-expected.txt >deleted file mode 100644 >index 3cf7bb9dc1ff9dbc546cd87a0425954705e2b355..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-002-expected.txt >+++ /dev/null >@@ -1,20 +0,0 @@ >- >-PASS position of x >-PASS position of y >-PASS position of width >-PASS position of height >-PASS position of top >-PASS position of right >-PASS position of bottom >-PASS position of left >-PASS position of toJSON >-PASS .flexbox 1 >-PASS .flexbox 2 >-PASS .flexbox 3 >-PASS .flexbox 4 >-PASS .flexbox 5 >-PASS .flexbox 6 >-PASS .flexbox 7 >-PASS .flexbox 8 >-PASS .flexbox 9 >- >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-002.html >deleted file mode 100644 >index ef16ccd6d192ccfd43a1e4992f6dd746861c5294..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-002.html >+++ /dev/null >@@ -1,160 +0,0 @@ >-<!DOCTYPE html> >-<html> >-<title>CSS Test: Absolutely positioned children of flexboxes</title> >-<link href="support/flexbox.css" rel="stylesheet"> >-<link rel="author" title="Google Inc." href="http://www.google.com/"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<meta name="flags" content="dom"> >-<meta name="assert" content="Checks that we correctly position abspos children >-with different alignments and dynamic changes"> >-<style> >-body { >- margin: 0; >-} >-.flexbox { >- background-color: green; >- height: 100px; >- width: 100px; >- margin: 10px; >-} >-.flexbox > * { >- flex: none; >-} >-.relative { >- position: relative; >-} >-.flexbox > div { >- width: 20px; >- height: 20px; >-} >-.absolute { >- position: absolute; >-} >-#placed-absolute { >- top: 20px; >- left: 20px; >-} >- >-.rtl { >- direction: rtl; >-} >-.ltr { >- direction: ltr; >-} >- >-.flexbox :nth-child(1) { >- background-color: blue; >-} >-.flexbox :nth-child(2) { >- background-color: yellow; >-} >-.flexbox :nth-child(3) { >- background-color: salmon; >-} >-.flexbox :nth-child(4) { >- background-color: grey; >-} >-.flexbox :nth-child(5) { >- background-color: red; >-} >-.flexbox :nth-child(6) { >- background-color: orange; >-} >-.flexbox :nth-child(7) { >- background-color: purple; >-} >-</style> >- >-<script src="/resources/testharness.js"></script> >-<script src="/resources/testharnessreport.js"></script> >-<script src="/resources/check-layout-th.js"></script> >- >-<body onload="checkLayout('.flexbox')"> >-<div id=log></div> >- >-<div class='flexbox relative align-items-center'> >- <div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20></div> >-</div> >- >-<div class='flexbox relative align-items-center'> >- <div data-offset-x=0 data-offset-y=40></div> >- <div class='absolute' data-offset-x=0 data-offset-y=40></div> >- <div data-offset-x=20 data-offset-y=40></div> >- <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> >-</div> >- >-<div class="relative"> >-<div class='flexbox align-items-center'> >- <div data-offset-x=10 data-offset-y=40></div> >- <div class='absolute' data-offset-x=10 data-offset-y=40></div> >- <div data-offset-x=30 data-offset-y=40></div> >- <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> >-</div> >-</div> >- >-<div class='flexbox relative column rtl'> >- <div data-offset-x=80 data-offset-y=0></div> >- <div class='absolute' data-offset-x=80 data-offset-y=0></div> >- <div data-offset-x=80 data-offset-y=20></div> >- <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> >-</div> >- >-<div class="relative"> >-<div class='flexbox wrap-reverse'> >- <div style="width:90px" data-offset-x=10 data-offset-y=80></div> >- <div class="absolute" data-offset-x=10 data-offset-y=80></div> >- <div data-offset-x=10 data-offset-y=30></div> >- <div class="absolute" data-offset-x=10 data-offset-y=80></div> >- <div data-offset-x=30 data-offset-y=30></div> >- <div class="absolute" data-offset-x=10 data-offset-y=80></div> >- <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> >-</div> >-</div> >- >-<div class='flexbox relative'> >- <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div> >- <div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0></div> >- <div class="absolute" style="margin: auto;" data-offset-x=0 data-offset-y=0></div> >- <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div> >-</div> >- >-<div class='flexbox align-items-stretch relative'> >- <div style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=100></div> >- <div class="absolute" style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=0></div> >- <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div> >-</div> >- >-<div class="flexbox wrap relative"> >- <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div> >- <div class="absolute" data-offset-x=0 data-offset-y=0></div> >- <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div> >- <div class="absolute" data-offset-x=0 data-offset-y=0></div> >- <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div> >- <div class="absolute" data-offset-x=0 data-offset-y=0></div> >-</div> >- >-<div class="flexbox wrap relative align-items-flex-end"> >- <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div> >- <div class="absolute" data-offset-x=0 data-offset-y=80></div> >- <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div> >- <div class="absolute" data-offset-x=0 data-offset-y=80></div> >- <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div> >- <div class="absolute" data-offset-x=0 data-offset-y=80></div> >-</div> >- >- >-<script> >-var absolute = document.getElementById('placed-absolute'); >-var beforePosition = absolute.getBoundingClientRect(); >-document.querySelector('.flexbox').style.height = '101px'; >-var afterPosition = absolute.getBoundingClientRect(); >- >-// Positioned element should not change position when the height of it's parent flexbox is changed. >-for (key in beforePosition) { >- test(function() { >- assert_equals(beforePosition[key], afterPosition[key]); >- }, 'position of ' + key); >-} >-</script> >-</body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-003-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-003-expected.txt >deleted file mode 100644 >index 063e5631b45a9d1ae7790c046faed37453e8a62d..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-003-expected.txt >+++ /dev/null >@@ -1,18 +0,0 @@ >- >-PASS .rect 1 >-PASS .rect 2 >-PASS .rect 3 >-PASS .rect 4 >-PASS .rect 5 >-PASS .rect 6 >-PASS .rect 7 >-PASS .rect 8 >-PASS .rect 9 >-PASS .rect 10 >-PASS .rect 11 >-PASS .rect 12 >-PASS .rect 13 >-PASS .rect 14 >-PASS .rect 15 >-PASS .rect 16 >- >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-003.html >deleted file mode 100644 >index 1944c93652a7bb6ccc8a430f0610b1bb9db3356d..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-003.html >+++ /dev/null >@@ -1,96 +0,0 @@ >-<!DOCTYPE html> >-<title>CSS Test: Absolutely positioned children of flexboxes</title> >-<link rel="author" title="Google Inc." href="http://www.google.com/"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<meta name="flags" content="dom"> >-<meta name="assert" content="Checks that we correctly handle border and >-padding in combination with abspos items"> >-<style> >-.rect { >- position: absolute; >- width: 50px; >- height: 50px; >- background-color: green; >-} >- >-.flexbox { >- position: relative; >- width: 100px; >- height: 100px; >- outline: 3px solid black; >-} >-</style> >- >-<link rel="stylesheet" href="support/flexbox.css"> >- >-<script src="/resources/testharness.js"></script> >-<script src="/resources/testharnessreport.js"></script> >-<script src="/resources/check-layout-th.js"></script> >- >-<body onload="checkLayout('.rect')"> >-<div id=log></div> >- >-<div class="flexbox" style="padding-top: 10px; padding-left: 20px;"> >- <div class="rect" data-offset-x="20" data-offset-y="10"></div> >-</div> >- >-<div class="flexbox column" style="padding-top: 10px; padding-left: 20px;"> >- <div class="rect" data-offset-x="20" data-offset-y="10"></div> >-</div> >- >-<div class="flexbox" style="writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;"> >- <div class="rect" data-offset-x="20" data-offset-y="10"></div> >-</div> >- >-<div class="flexbox column" style="writing-mode: vertical-lr; padding-top: 10px; padding-left: 20px;"> >- <div class="rect" data-offset-x="20" data-offset-y="10"></div> >-</div> >- >-<div class="flexbox" style="direction: rtl; padding-top: 10px; padding-right: 20px;"> >- <div class="rect" data-offset-x="50" data-offset-y="10"></div> >-</div> >- >-<div class="flexbox column" style="direction: rtl; padding-top: 10px; padding-right: 20px;"> >- <div class="rect" data-offset-x="50" data-offset-y="10"></div> >-</div> >- >-<div class="flexbox" style="direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;"> >- <div class="rect" data-offset-x="20" data-offset-y="50"></div> >-</div> >- >-<div class="flexbox column" style="direction: rtl; writing-mode: vertical-lr; padding-bottom: 10px; padding-left: 20px;"> >- <div class="rect" data-offset-x="20" data-offset-y="50"></div> >-</div> >- >-<hr> >-<div class="flexbox" style="border-top: 10px solid; border-left: 20px solid;"> >- <div class="rect" data-offset-x="0" data-offset-y="0"></div> >-</div> >- >-<div class="flexbox column" style="border-top: 10px solid; border-left: 20px solid;"> >- <div class="rect" data-offset-x="0" data-offset-y="0"></div> >-</div> >- >-<div class="flexbox" style="writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;"> >- <div class="rect" data-offset-x="0" data-offset-y="0"></div> >-</div> >- >-<div class="flexbox column" style="writing-mode: vertical-lr; border-top: 10px solid; border-left: 20px solid;"> >- <div class="rect" data-offset-x="0" data-offset-y="0"></div> >-</div> >- >-<div class="flexbox" style="direction: rtl; border-top: 10px solid; border-right: 20px solid;"> >- <div class="rect" data-offset-x="50" data-offset-y="0"></div> >-</div> >- >-<div class="flexbox column" style="direction: rtl; border-top: 10px solid; border-right: 20px solid;"> >- <div class="rect" data-offset-x="50" data-offset-y="0"></div> >-</div> >- >-<div class="flexbox" style="direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;"> >- <div class="rect" data-offset-x="0" data-offset-y="50"></div> >-</div> >- >-<div class="flexbox column" style="direction: rtl; writing-mode: vertical-lr; border-bottom: 10px solid; border-left: 20px solid;"> >- <div class="rect" data-offset-x="0" data-offset-y="50"></div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-004-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-004-expected.txt >deleted file mode 100644 >index 0fdedbe7a0143b03d15114370addc09826451d2f..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-004-expected.txt >+++ /dev/null >@@ -1,3 +0,0 @@ >- >-PASS #flex 1 >- >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-004.html >deleted file mode 100644 >index af8bc6284c076b473af509d5d8fd1e81dbea286d..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-004.html >+++ /dev/null >@@ -1,44 +0,0 @@ >-<!DOCTYPE html> >-<title>CSS Test: Absolutely positioned children of flexboxes</title> >-<link rel="author" title="Google Inc." href="http://www.google.com/"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<meta name="flags" content="dom"> >-<meta name="assert" content="Checks that we correctly handle when a flex item >-becomes absolutely positioned"> >-<style> >-#flex { >- display: flex; >- position: relative; >- background: red; >- width: 500px; >- height: 200px; >-} >- >-#item { >- background: green; >- left: 0; >- right: 0; >- top: 0; >- bottom: 0; >-} >-</style> >- >-<script src="/resources/testharness.js"></script> >-<script src="/resources/testharnessreport.js"></script> >-<script src="/resources/check-layout-th.js"></script> >- >-<script> >-function update() { >- var item = document.getElementById("item"); >- item.offsetHeight; >- item.style.position = "absolute"; >- item.offsetHeight; >- checkLayout("#flex"); >-} >-</script> >- >-<body onload="update();"> >- >-<div id="flex"> >- <div id="item" data-expected-width="500"></div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-005-expected.html >deleted file mode 100644 >index 2f7e669c72fc263d4b39d7a198d8abafbf54b463..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-005-expected.html >+++ /dev/null >@@ -1,14 +0,0 @@ >-<!DOCTYPE html> >-<link rel="author" title="Google Inc." href="http://www.google.com/"> >-<p>This test should not have a horizontal scrollbar</p> >- >-<div style="width: 400px; height: 100px; overflow-x: hidden; overflow-y: scroll;"> >-<br> >-<br> >-<br> >-<br> >-<br> >-<br> >-<br> >-<br> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-005.html >deleted file mode 100644 >index 3199dfb9a699986ecbc7ff474628cf1cfbf0b0b6..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-005.html >+++ /dev/null >@@ -1,66 +0,0 @@ >-<!DOCTYPE html> >-<title>CSS Test: Absolutely positioned children of flexboxes</title> >-<link rel="author" title="Google Inc." href="http://www.google.com/"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<link rel="match" href="position-absolute-005-ref.html"> >-<meta name="assert" content="Checks that we correctly handle overflow: auto in >-abspos nodes in flexbox"> >- >-<style> >- body { >- width: 400px; >- height: 300px; >- } >- >- .flexbox { >- display: flex; >- } >- >- .column { >- flex-direction: column; >- } >- >- .flex11a { >- flex: 1 1 auto; >- } >- >- .root { >- height: 100px; >- overflow-y: auto; >- position: relative; >- } >- >- #abspos { >- position: absolute; >- left: 0; >- right: 0; >- top: 0; >- height: 10px; >- } >-</style> >- >- >-<p>This test should not have a horizontal scrollbar</p> >- >-<div class="flexbox column"> >- <div class="flexbox"> >- <div class="flex11a"> >- <div class="root"> >- <div> >- <div> >- <div id="history"></div> >- <div id="abspos"></div> >- </div> >- </div> >- </div> >- </div> >- </div> >-</div> >- >-<script> >-onload = function() { >- var historyEl = document.getElementById('history'); >- historyEl.offsetWidth; >- historyEl.innerText = '\n\n\n\n\n\n\n\n'; >-}; >-</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-006-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-006-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-006-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-006.html >deleted file mode 100644 >index 011daa6695cd31418ac4ada1d975a65586c29523..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-006.html >+++ /dev/null >@@ -1,22 +0,0 @@ >-<!DOCTYPE html> >-<title>abspos items</title> >-<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<link rel="bookmark" href="https://crbug.com/1066859"> >-<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid." /> >- >-<style> >-div { >- height: 100px; >- width: 100px; >-} >-</style> >- >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- >-<div style="display: grid; position: relative;"> >- <div style="display: flex; align-items: center; background: red"> >- <div style="position: absolute; background: green"> >- </div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-007-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-007-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-007-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-007.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-007.html >deleted file mode 100644 >index 2bf8d637d2c80fd2e0208916e28bec2faa1f6e27..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-007.html >+++ /dev/null >@@ -1,20 +0,0 @@ >-<!DOCTYPE html> >-<title>abspos items</title> >-<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<link rel="bookmark" href="https://crbug.com/1066859"> >-<meta name="assert" content="Flex sets correct static position for abspos item when containing block is root element." /> >- >-<style> >-div { >- height: 100px; >- width: 100px; >-} >-</style> >- >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- >-<div style="display: flex; align-items: center; background: red"> >- <div style="position: absolute; background: green"> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-008-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-008-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-008-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-008.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-008.html >deleted file mode 100644 >index 822e8b3339784193fbb120e3b4addf0292946988..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-008.html >+++ /dev/null >@@ -1,22 +0,0 @@ >-<!DOCTYPE html> >-<title>abspos items</title> >-<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<link rel="bookmark" href="https://crbug.com/1066859"> >-<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and alignment is flex-end." /> >- >-<style> >-div { >- height: 100px; >- width: 100px; >-} >-</style> >- >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- >-<div style="display: grid; position: relative;"> >- <div style="display: flex; align-items: flex-end; background: red"> >- <div style="position: absolute; background: green"> >- </div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-009-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-009-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-009-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-009.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-009.html >deleted file mode 100644 >index c5e69e091496f2944be7e7f437cdf12b440f7af3..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-009.html >+++ /dev/null >@@ -1,21 +0,0 @@ >-<!DOCTYPE html> >-<title>abspos items</title> >-<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<link rel="bookmark" href="https://crbug.com/1066859"> >-<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and abspos item is also grid." /> >-<style> >-div { >- height: 100px; >- width: 100px; >-} >-</style> >- >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- >-<div style="display: grid; position: relative;"> >- <div style="display: flex; align-items: center; background: red"> >- <div style="position: absolute; background: green; display: grid"> >- </div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-010-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-010-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-010-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-010.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-010.html >deleted file mode 100644 >index 64c228e3487a98e294e1b6de114e994ba234d2c7..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-010.html >+++ /dev/null >@@ -1,21 +0,0 @@ >-<!DOCTYPE html> >-<title>abspos items</title> >-<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<link rel="bookmark" href="https://crbug.com/1066859"> >-<meta name="assert" content="Flex sets correct static position for grid abspos item when containg block is regular block flow." /> >-<style> >-div { >- height: 100px; >- width: 100px; >-} >-</style> >- >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- >-<div style="position: relative;"> >- <div style="display: flex; align-items: center; background: red"> >- <div style="position: absolute; background: green; display: grid"> >- </div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-011-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-011-expected.xht >deleted file mode 100644 >index 05a13794482a94f6c10bd9d4c98704e63ef60331..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-011-expected.xht >+++ /dev/null >@@ -1,19 +0,0 @@ >-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >-<html xmlns="http://www.w3.org/1999/xhtml"> >- <head> >- <title>CSS Reftest Reference</title> >- <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >- <style type="text/css"><![CDATA[ >- div >- { >- background-color: green; >- height: 100px; >- width: 100px; >- } >- ]]></style> >- </head> >- <body> >- <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- <div></div> >- </body> >-</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-011.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-011.html >deleted file mode 100644 >index d4cc862c3010d66659e8727d9388ef8d641622bd..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-011.html >+++ /dev/null >@@ -1,22 +0,0 @@ >-<!DOCTYPE html> >-<title>abspos items</title> >-<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >-<link rel="bookmark" href="https://crbug.com/1066859"> >-<meta name="assert" content="Flex sets correct static position for abspos item when containing block is grid and weird abspos edge is due to justify-content, not alignment." /> >- >-<style> >-div { >- height: 100px; >- width: 100px; >-} >-</style> >- >-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >- >-<div style="display: grid; position: relative;"> >- <div style="display: flex; justify-content: flex-end; background: red"> >- <div style="position: absolute; background: green"> >- </div> >-</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-012-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-012-expected.txt >deleted file mode 100644 >index b8c2c299248de48c6f11acd88e76014e69f68072..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-012-expected.txt >+++ /dev/null >@@ -1,258 +0,0 @@ >- >-PASS .flexbox 1 >-PASS .flexbox 2 >-PASS .flexbox 3 >-PASS .flexbox 4 >-PASS .flexbox 5 >-PASS .flexbox 6 >-PASS .flexbox 7 >-PASS .flexbox 8 >-PASS .flexbox 9 >-PASS .flexbox 10 >-PASS .flexbox 11 >-PASS .flexbox 12 >-PASS .flexbox 13 >-PASS .flexbox 14 >-PASS .flexbox 15 >-PASS .flexbox 16 >-PASS .flexbox 17 >-PASS .flexbox 18 >-PASS .flexbox 19 >-PASS .flexbox 20 >-PASS .flexbox 21 >-PASS .flexbox 22 >-PASS .flexbox 23 >-PASS .flexbox 24 >-PASS .flexbox 25 >-PASS .flexbox 26 >-PASS .flexbox 27 >-PASS .flexbox 28 >-PASS .flexbox 29 >-PASS .flexbox 30 >-PASS .flexbox 31 >-PASS .flexbox 32 >-FAIL .flexbox 33 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 34 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 35 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 36 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 37 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 38 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 39 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 40 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 41 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 42 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 43 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 44 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 45 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 46 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 47 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 48 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 49 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 50 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 51 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 52 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 53 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 54 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 55 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 56 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 57 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 58 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 59 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 60 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 61 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 62 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 63 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 64 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-PASS .flexbox 65 >-PASS .flexbox 66 >-PASS .flexbox 67 >-PASS .flexbox 68 >-PASS .flexbox 69 >-PASS .flexbox 70 >-PASS .flexbox 71 >-PASS .flexbox 72 >-PASS .flexbox 73 >-PASS .flexbox 74 >-PASS .flexbox 75 >-PASS .flexbox 76 >-PASS .flexbox 77 >-PASS .flexbox 78 >-PASS .flexbox 79 >-PASS .flexbox 80 >-PASS .flexbox 81 >-PASS .flexbox 82 >-PASS .flexbox 83 >-PASS .flexbox 84 >-PASS .flexbox 85 >-PASS .flexbox 86 >-PASS .flexbox 87 >-PASS .flexbox 88 >-PASS .flexbox 89 >-PASS .flexbox 90 >-PASS .flexbox 91 >-PASS .flexbox 92 >-PASS .flexbox 93 >-PASS .flexbox 94 >-PASS .flexbox 95 >-PASS .flexbox 96 >-horizontal-tb ltr row justify-content-flex-start align-items-flex-start .flexbox 1 >-horizontal-tb ltr row justify-content-flex-start align-items-flex-end .flexbox 2 >-horizontal-tb ltr row justify-content-flex-end align-items-flex-start .flexbox 3 >-horizontal-tb ltr row justify-content-flex-end align-items-flex-end .flexbox 4 >-horizontal-tb rtl row justify-content-flex-start align-items-flex-start .flexbox 5 >-horizontal-tb rtl row justify-content-flex-start align-items-flex-end .flexbox 6 >-horizontal-tb rtl row justify-content-flex-end align-items-flex-start .flexbox 7 >-horizontal-tb rtl row justify-content-flex-end align-items-flex-end .flexbox 8 >-horizontal-tb ltr column justify-content-flex-start align-items-flex-start .flexbox 9 >-horizontal-tb ltr column justify-content-flex-start align-items-flex-end .flexbox 10 >-horizontal-tb ltr column justify-content-flex-end align-items-flex-start .flexbox 11 >-horizontal-tb ltr column justify-content-flex-end align-items-flex-end .flexbox 12 >-horizontal-tb rtl column justify-content-flex-start align-items-flex-start .flexbox 13 >-horizontal-tb rtl column justify-content-flex-start align-items-flex-end .flexbox 14 >-horizontal-tb rtl column justify-content-flex-end align-items-flex-start .flexbox 15 >-horizontal-tb rtl column justify-content-flex-end align-items-flex-end .flexbox 16 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-start .flexbox 17 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-end .flexbox 18 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-start .flexbox 19 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-end .flexbox 20 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-start .flexbox 21 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-end .flexbox 22 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-start .flexbox 23 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-end .flexbox 24 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-start .flexbox 25 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-end .flexbox 26 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-start .flexbox 27 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-end .flexbox 28 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-start .flexbox 29 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-end .flexbox 30 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-start .flexbox 31 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-end .flexbox 32 >-vertical-rl ltr row justify-content-flex-start align-items-flex-start .flexbox 33 >-vertical-rl ltr row justify-content-flex-start align-items-flex-end .flexbox 34 >-vertical-rl ltr row justify-content-flex-end align-items-flex-start .flexbox 35 >-vertical-rl ltr row justify-content-flex-end align-items-flex-end .flexbox 36 >-vertical-rl rtl row justify-content-flex-start align-items-flex-start .flexbox 37 >-vertical-rl rtl row justify-content-flex-start align-items-flex-end .flexbox 38 >-vertical-rl rtl row justify-content-flex-end align-items-flex-start .flexbox 39 >-vertical-rl rtl row justify-content-flex-end align-items-flex-end .flexbox 40 >-vertical-rl ltr column justify-content-flex-start align-items-flex-start .flexbox 41 >-vertical-rl ltr column justify-content-flex-start align-items-flex-end .flexbox 42 >-vertical-rl ltr column justify-content-flex-end align-items-flex-start .flexbox 43 >-vertical-rl ltr column justify-content-flex-end align-items-flex-end .flexbox 44 >-vertical-rl rtl column justify-content-flex-start align-items-flex-start .flexbox 45 >-vertical-rl rtl column justify-content-flex-start align-items-flex-end .flexbox 46 >-vertical-rl rtl column justify-content-flex-end align-items-flex-start .flexbox 47 >-vertical-rl rtl column justify-content-flex-end align-items-flex-end .flexbox 48 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start .flexbox 49 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end .flexbox 50 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start .flexbox 51 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end .flexbox 52 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start .flexbox 53 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end .flexbox 54 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start .flexbox 55 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end .flexbox 56 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start .flexbox 57 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end .flexbox 58 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start .flexbox 59 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end .flexbox 60 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start .flexbox 61 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end .flexbox 62 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start .flexbox 63 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end .flexbox 64 >-vertical-lr ltr row justify-content-flex-start align-items-flex-start .flexbox 65 >-vertical-lr ltr row justify-content-flex-start align-items-flex-end .flexbox 66 >-vertical-lr ltr row justify-content-flex-end align-items-flex-start .flexbox 67 >-vertical-lr ltr row justify-content-flex-end align-items-flex-end .flexbox 68 >-vertical-lr rtl row justify-content-flex-start align-items-flex-start .flexbox 69 >-vertical-lr rtl row justify-content-flex-start align-items-flex-end .flexbox 70 >-vertical-lr rtl row justify-content-flex-end align-items-flex-start .flexbox 71 >-vertical-lr rtl row justify-content-flex-end align-items-flex-end .flexbox 72 >-vertical-lr ltr column justify-content-flex-start align-items-flex-start .flexbox 73 >-vertical-lr ltr column justify-content-flex-start align-items-flex-end .flexbox 74 >-vertical-lr ltr column justify-content-flex-end align-items-flex-start .flexbox 75 >-vertical-lr ltr column justify-content-flex-end align-items-flex-end .flexbox 76 >-vertical-lr rtl column justify-content-flex-start align-items-flex-start .flexbox 77 >-vertical-lr rtl column justify-content-flex-start align-items-flex-end .flexbox 78 >-vertical-lr rtl column justify-content-flex-end align-items-flex-start .flexbox 79 >-vertical-lr rtl column justify-content-flex-end align-items-flex-end .flexbox 80 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-start .flexbox 81 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-end .flexbox 82 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-start .flexbox 83 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-end .flexbox 84 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-start .flexbox 85 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-end .flexbox 86 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-start .flexbox 87 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-end .flexbox 88 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-start .flexbox 89 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-end .flexbox 90 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-start .flexbox 91 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-end .flexbox 92 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-start .flexbox 93 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-end .flexbox 94 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-start .flexbox 95 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-end .flexbox 96 >- >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-012.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-012.html >deleted file mode 100644 >index fb90a526251fc10dbc3272c0ac9ed244930e8b6a..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-012.html >+++ /dev/null >@@ -1,117 +0,0 @@ >-<!DOCTYPE html> >-<html> >-<title>CSS Test: Absolutely positioned children of flexboxes</title> >-<link rel="author" title="Google Inc." href="http://www.google.com/"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<meta name="flags" content=""> >-<meta name="assert" content="Checks that we correctly position abspos children in a number of writing modes and alignments when containing block is grid."> >-<style> >- >-.abspos { >- height: 50px; >- width: 50px; >- background: lightblue; >- position: absolute; >- flex: none; >-} >- >-.grid { >- display: grid; >- position: relative; >-} >- >-.title { >- margin-top: 1em; >-} >- >-.flexbox { >- display: flex; >- background-color: #aaa; >- height: 100px; >- width: 100px; >-} >- >-.horizontal-tb { >- writing-mode: horizontal-tb; >-} >-.vertical-rl { >- writing-mode: vertical-rl; >-} >-.vertical-lr { >- writing-mode: vertical-lr; >-} >- >-.rtl { >- direction: rtl; >-} >-.ltr { >- direction: ltr; >-} >- >-.align-items-flex-start { >- align-items: flex-start; >-} >-.align-items-flex-end { >- align-items: flex-end; >-} >-.justify-content-flex-start { >- justify-content: flex-start; >-} >-.justify-content-flex-end { >- justify-content: flex-end; >-} >-</style> >-<script src="/resources/testharness.js"></script> >-<script src="/resources/testharnessreport.js"></script> >-<script src="/resources/check-layout-th.js"></script> >-<body onload="checkLayout('.flexbox')"> >-<div id=log></div> >-<script> >- >-var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; >-var directions = ['ltr', 'rtl']; >-var justifyContents = ['flex-start', 'flex-end']; >-var alignItems = ['flex-start', 'flex-end']; >-var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; >- >-// These were harvested from Firefox 76.0b4. >-var x = [0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50]; >- >-var y = [0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0]; >- >-var test_number = 1; >- >-writingModes.forEach(function(flexWritingMode) { >- flexDirections.forEach(function(flexDirection) { >- directions.forEach(function(direction) { >- justifyContents.forEach(function(justifyContent) { >- alignItems.forEach(function(alignment) { >- var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment; >- var title = document.createElement('div'); >- title.className = 'title'; >- title.innerHTML = flexboxClassName + " .flexbox " + (test_number++); >- document.body.appendChild(title); >- >- var flexbox = document.createElement('div'); >- flexbox.className = 'flexbox ' + flexboxClassName; >- >- var child = document.createElement('div'); >- child.setAttribute('class', 'abspos'); >- child.setAttribute("data-offset-x", x.shift()); >- child.setAttribute("data-offset-y", y.shift()); >- flexbox.appendChild(child); >- >- var relpos = document.createElement('div'); >- relpos.className = 'grid'; >- relpos.appendChild(flexbox); >- >- document.body.appendChild(relpos); >- }) >- }) >- }) >- }) >-}) >- >-</script> >- >-</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-013-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-013-expected.txt >deleted file mode 100644 >index 6c4af347d1fff9182facb6de8d950b272c0b0446..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-013-expected.txt >+++ /dev/null >@@ -1,1154 +0,0 @@ >- >-PASS .flexbox 1 >-PASS .flexbox 2 >-PASS .flexbox 3 >-PASS .flexbox 4 >-PASS .flexbox 5 >-PASS .flexbox 6 >-PASS .flexbox 7 >-PASS .flexbox 8 >-PASS .flexbox 9 >-PASS .flexbox 10 >-PASS .flexbox 11 >-PASS .flexbox 12 >-PASS .flexbox 13 >-PASS .flexbox 14 >-PASS .flexbox 15 >-PASS .flexbox 16 >-PASS .flexbox 17 >-PASS .flexbox 18 >-PASS .flexbox 19 >-PASS .flexbox 20 >-PASS .flexbox 21 >-PASS .flexbox 22 >-PASS .flexbox 23 >-PASS .flexbox 24 >-PASS .flexbox 25 >-PASS .flexbox 26 >-PASS .flexbox 27 >-PASS .flexbox 28 >-PASS .flexbox 29 >-PASS .flexbox 30 >-PASS .flexbox 31 >-PASS .flexbox 32 >-PASS .flexbox 33 >-PASS .flexbox 34 >-PASS .flexbox 35 >-PASS .flexbox 36 >-PASS .flexbox 37 >-PASS .flexbox 38 >-PASS .flexbox 39 >-PASS .flexbox 40 >-PASS .flexbox 41 >-PASS .flexbox 42 >-PASS .flexbox 43 >-PASS .flexbox 44 >-PASS .flexbox 45 >-PASS .flexbox 46 >-PASS .flexbox 47 >-PASS .flexbox 48 >-PASS .flexbox 49 >-PASS .flexbox 50 >-PASS .flexbox 51 >-PASS .flexbox 52 >-PASS .flexbox 53 >-PASS .flexbox 54 >-PASS .flexbox 55 >-PASS .flexbox 56 >-PASS .flexbox 57 >-PASS .flexbox 58 >-PASS .flexbox 59 >-PASS .flexbox 60 >-PASS .flexbox 61 >-PASS .flexbox 62 >-PASS .flexbox 63 >-PASS .flexbox 64 >-PASS .flexbox 65 >-PASS .flexbox 66 >-PASS .flexbox 67 >-PASS .flexbox 68 >-PASS .flexbox 69 >-PASS .flexbox 70 >-PASS .flexbox 71 >-PASS .flexbox 72 >-PASS .flexbox 73 >-PASS .flexbox 74 >-PASS .flexbox 75 >-PASS .flexbox 76 >-PASS .flexbox 77 >-PASS .flexbox 78 >-PASS .flexbox 79 >-PASS .flexbox 80 >-PASS .flexbox 81 >-PASS .flexbox 82 >-PASS .flexbox 83 >-PASS .flexbox 84 >-PASS .flexbox 85 >-PASS .flexbox 86 >-PASS .flexbox 87 >-PASS .flexbox 88 >-PASS .flexbox 89 >-PASS .flexbox 90 >-PASS .flexbox 91 >-PASS .flexbox 92 >-PASS .flexbox 93 >-PASS .flexbox 94 >-PASS .flexbox 95 >-PASS .flexbox 96 >-PASS .flexbox 97 >-PASS .flexbox 98 >-PASS .flexbox 99 >-PASS .flexbox 100 >-PASS .flexbox 101 >-PASS .flexbox 102 >-PASS .flexbox 103 >-PASS .flexbox 104 >-PASS .flexbox 105 >-PASS .flexbox 106 >-PASS .flexbox 107 >-PASS .flexbox 108 >-PASS .flexbox 109 >-PASS .flexbox 110 >-PASS .flexbox 111 >-PASS .flexbox 112 >-PASS .flexbox 113 >-PASS .flexbox 114 >-PASS .flexbox 115 >-PASS .flexbox 116 >-PASS .flexbox 117 >-PASS .flexbox 118 >-PASS .flexbox 119 >-PASS .flexbox 120 >-PASS .flexbox 121 >-PASS .flexbox 122 >-PASS .flexbox 123 >-PASS .flexbox 124 >-PASS .flexbox 125 >-PASS .flexbox 126 >-PASS .flexbox 127 >-PASS .flexbox 128 >-PASS .flexbox 129 >-PASS .flexbox 130 >-PASS .flexbox 131 >-PASS .flexbox 132 >-PASS .flexbox 133 >-PASS .flexbox 134 >-PASS .flexbox 135 >-PASS .flexbox 136 >-PASS .flexbox 137 >-PASS .flexbox 138 >-PASS .flexbox 139 >-PASS .flexbox 140 >-PASS .flexbox 141 >-PASS .flexbox 142 >-PASS .flexbox 143 >-PASS .flexbox 144 >-FAIL .flexbox 145 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 146 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 147 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 148 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 149 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 150 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 151 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 152 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 153 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 154 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 155 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 156 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 157 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 158 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 159 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 160 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 161 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 162 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 163 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 164 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 165 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 166 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 167 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 168 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 169 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 170 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 171 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 172 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 173 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 174 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 175 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 176 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 177 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 178 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 179 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 180 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 181 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 182 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 183 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 184 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 185 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 186 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 187 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 188 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end nowrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 189 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch nowrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 190 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 191 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end nowrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 192 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch nowrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 193 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 194 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 195 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 196 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 197 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 198 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 199 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 200 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 201 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 202 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 203 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 204 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 205 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 206 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 207 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 208 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 209 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 210 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 211 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 212 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 213 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 214 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 215 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 216 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 217 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 218 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 219 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 220 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 221 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 222 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 223 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 224 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 225 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 226 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 227 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 228 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 229 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 230 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 231 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 232 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 233 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 234 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 235 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 236 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end wrap"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 237 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch wrap"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 238 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 239 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end wrap"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 240 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch wrap"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 241 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 242 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 243 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 244 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 245 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 246 assert_equals: >-<div class="flexbox vertical-rl ltr row justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 247 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 248 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 249 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 250 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 251 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 252 assert_equals: >-<div class="flexbox vertical-rl rtl row justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 253 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 254 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 255 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 256 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 257 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 258 assert_equals: >-<div class="flexbox vertical-rl ltr column justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 259 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 260 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 261 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 262 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 263 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 264 assert_equals: >-<div class="flexbox vertical-rl rtl column justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 265 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 266 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 267 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 268 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 269 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 270 assert_equals: >-<div class="flexbox vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 271 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 272 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 273 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 274 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 275 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 276 assert_equals: >-<div class="flexbox vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 277 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 278 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 279 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 280 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 281 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 282 assert_equals: >-<div class="flexbox vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 283 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 284 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="50"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 285 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="0" data-offset-y="0"></div></div> >-offsetLeft expected 0 but got 669 >-FAIL .flexbox 286 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 287 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="50"></div></div> >-offsetLeft expected 50 but got 719 >-FAIL .flexbox 288 assert_equals: >-<div class="flexbox vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch wrap-reverse"><div class="abspos" data-offset-x="50" data-offset-y="0"></div></div> >-offsetLeft expected 50 but got 719 >-PASS .flexbox 289 >-PASS .flexbox 290 >-PASS .flexbox 291 >-PASS .flexbox 292 >-PASS .flexbox 293 >-PASS .flexbox 294 >-PASS .flexbox 295 >-PASS .flexbox 296 >-PASS .flexbox 297 >-PASS .flexbox 298 >-PASS .flexbox 299 >-PASS .flexbox 300 >-PASS .flexbox 301 >-PASS .flexbox 302 >-PASS .flexbox 303 >-PASS .flexbox 304 >-PASS .flexbox 305 >-PASS .flexbox 306 >-PASS .flexbox 307 >-PASS .flexbox 308 >-PASS .flexbox 309 >-PASS .flexbox 310 >-PASS .flexbox 311 >-PASS .flexbox 312 >-PASS .flexbox 313 >-PASS .flexbox 314 >-PASS .flexbox 315 >-PASS .flexbox 316 >-PASS .flexbox 317 >-PASS .flexbox 318 >-PASS .flexbox 319 >-PASS .flexbox 320 >-PASS .flexbox 321 >-PASS .flexbox 322 >-PASS .flexbox 323 >-PASS .flexbox 324 >-PASS .flexbox 325 >-PASS .flexbox 326 >-PASS .flexbox 327 >-PASS .flexbox 328 >-PASS .flexbox 329 >-PASS .flexbox 330 >-PASS .flexbox 331 >-PASS .flexbox 332 >-PASS .flexbox 333 >-PASS .flexbox 334 >-PASS .flexbox 335 >-PASS .flexbox 336 >-PASS .flexbox 337 >-PASS .flexbox 338 >-PASS .flexbox 339 >-PASS .flexbox 340 >-PASS .flexbox 341 >-PASS .flexbox 342 >-PASS .flexbox 343 >-PASS .flexbox 344 >-PASS .flexbox 345 >-PASS .flexbox 346 >-PASS .flexbox 347 >-PASS .flexbox 348 >-PASS .flexbox 349 >-PASS .flexbox 350 >-PASS .flexbox 351 >-PASS .flexbox 352 >-PASS .flexbox 353 >-PASS .flexbox 354 >-PASS .flexbox 355 >-PASS .flexbox 356 >-PASS .flexbox 357 >-PASS .flexbox 358 >-PASS .flexbox 359 >-PASS .flexbox 360 >-PASS .flexbox 361 >-PASS .flexbox 362 >-PASS .flexbox 363 >-PASS .flexbox 364 >-PASS .flexbox 365 >-PASS .flexbox 366 >-PASS .flexbox 367 >-PASS .flexbox 368 >-PASS .flexbox 369 >-PASS .flexbox 370 >-PASS .flexbox 371 >-PASS .flexbox 372 >-PASS .flexbox 373 >-PASS .flexbox 374 >-PASS .flexbox 375 >-PASS .flexbox 376 >-PASS .flexbox 377 >-PASS .flexbox 378 >-PASS .flexbox 379 >-PASS .flexbox 380 >-PASS .flexbox 381 >-PASS .flexbox 382 >-PASS .flexbox 383 >-PASS .flexbox 384 >-PASS .flexbox 385 >-PASS .flexbox 386 >-PASS .flexbox 387 >-PASS .flexbox 388 >-PASS .flexbox 389 >-PASS .flexbox 390 >-PASS .flexbox 391 >-PASS .flexbox 392 >-PASS .flexbox 393 >-PASS .flexbox 394 >-PASS .flexbox 395 >-PASS .flexbox 396 >-PASS .flexbox 397 >-PASS .flexbox 398 >-PASS .flexbox 399 >-PASS .flexbox 400 >-PASS .flexbox 401 >-PASS .flexbox 402 >-PASS .flexbox 403 >-PASS .flexbox 404 >-PASS .flexbox 405 >-PASS .flexbox 406 >-PASS .flexbox 407 >-PASS .flexbox 408 >-PASS .flexbox 409 >-PASS .flexbox 410 >-PASS .flexbox 411 >-PASS .flexbox 412 >-PASS .flexbox 413 >-PASS .flexbox 414 >-PASS .flexbox 415 >-PASS .flexbox 416 >-PASS .flexbox 417 >-PASS .flexbox 418 >-PASS .flexbox 419 >-PASS .flexbox 420 >-PASS .flexbox 421 >-PASS .flexbox 422 >-PASS .flexbox 423 >-PASS .flexbox 424 >-PASS .flexbox 425 >-PASS .flexbox 426 >-PASS .flexbox 427 >-PASS .flexbox 428 >-PASS .flexbox 429 >-PASS .flexbox 430 >-PASS .flexbox 431 >-PASS .flexbox 432 >-horizontal-tb ltr row justify-content-flex-start align-items-flex-start nowrap .flexbox 1 >-horizontal-tb ltr row justify-content-flex-start align-items-flex-end nowrap .flexbox 2 >-horizontal-tb ltr row justify-content-flex-start align-items-stretch nowrap .flexbox 3 >-horizontal-tb ltr row justify-content-flex-end align-items-flex-start nowrap .flexbox 4 >-horizontal-tb ltr row justify-content-flex-end align-items-flex-end nowrap .flexbox 5 >-horizontal-tb ltr row justify-content-flex-end align-items-stretch nowrap .flexbox 6 >-horizontal-tb rtl row justify-content-flex-start align-items-flex-start nowrap .flexbox 7 >-horizontal-tb rtl row justify-content-flex-start align-items-flex-end nowrap .flexbox 8 >-horizontal-tb rtl row justify-content-flex-start align-items-stretch nowrap .flexbox 9 >-horizontal-tb rtl row justify-content-flex-end align-items-flex-start nowrap .flexbox 10 >-horizontal-tb rtl row justify-content-flex-end align-items-flex-end nowrap .flexbox 11 >-horizontal-tb rtl row justify-content-flex-end align-items-stretch nowrap .flexbox 12 >-horizontal-tb ltr column justify-content-flex-start align-items-flex-start nowrap .flexbox 13 >-horizontal-tb ltr column justify-content-flex-start align-items-flex-end nowrap .flexbox 14 >-horizontal-tb ltr column justify-content-flex-start align-items-stretch nowrap .flexbox 15 >-horizontal-tb ltr column justify-content-flex-end align-items-flex-start nowrap .flexbox 16 >-horizontal-tb ltr column justify-content-flex-end align-items-flex-end nowrap .flexbox 17 >-horizontal-tb ltr column justify-content-flex-end align-items-stretch nowrap .flexbox 18 >-horizontal-tb rtl column justify-content-flex-start align-items-flex-start nowrap .flexbox 19 >-horizontal-tb rtl column justify-content-flex-start align-items-flex-end nowrap .flexbox 20 >-horizontal-tb rtl column justify-content-flex-start align-items-stretch nowrap .flexbox 21 >-horizontal-tb rtl column justify-content-flex-end align-items-flex-start nowrap .flexbox 22 >-horizontal-tb rtl column justify-content-flex-end align-items-flex-end nowrap .flexbox 23 >-horizontal-tb rtl column justify-content-flex-end align-items-stretch nowrap .flexbox 24 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 25 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 26 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 27 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 28 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 29 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 30 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 31 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 32 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 33 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 34 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 35 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 36 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 37 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 38 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 39 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 40 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 41 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 42 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 43 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 44 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 45 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 46 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 47 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 48 >-horizontal-tb ltr row justify-content-flex-start align-items-flex-start wrap .flexbox 49 >-horizontal-tb ltr row justify-content-flex-start align-items-flex-end wrap .flexbox 50 >-horizontal-tb ltr row justify-content-flex-start align-items-stretch wrap .flexbox 51 >-horizontal-tb ltr row justify-content-flex-end align-items-flex-start wrap .flexbox 52 >-horizontal-tb ltr row justify-content-flex-end align-items-flex-end wrap .flexbox 53 >-horizontal-tb ltr row justify-content-flex-end align-items-stretch wrap .flexbox 54 >-horizontal-tb rtl row justify-content-flex-start align-items-flex-start wrap .flexbox 55 >-horizontal-tb rtl row justify-content-flex-start align-items-flex-end wrap .flexbox 56 >-horizontal-tb rtl row justify-content-flex-start align-items-stretch wrap .flexbox 57 >-horizontal-tb rtl row justify-content-flex-end align-items-flex-start wrap .flexbox 58 >-horizontal-tb rtl row justify-content-flex-end align-items-flex-end wrap .flexbox 59 >-horizontal-tb rtl row justify-content-flex-end align-items-stretch wrap .flexbox 60 >-horizontal-tb ltr column justify-content-flex-start align-items-flex-start wrap .flexbox 61 >-horizontal-tb ltr column justify-content-flex-start align-items-flex-end wrap .flexbox 62 >-horizontal-tb ltr column justify-content-flex-start align-items-stretch wrap .flexbox 63 >-horizontal-tb ltr column justify-content-flex-end align-items-flex-start wrap .flexbox 64 >-horizontal-tb ltr column justify-content-flex-end align-items-flex-end wrap .flexbox 65 >-horizontal-tb ltr column justify-content-flex-end align-items-stretch wrap .flexbox 66 >-horizontal-tb rtl column justify-content-flex-start align-items-flex-start wrap .flexbox 67 >-horizontal-tb rtl column justify-content-flex-start align-items-flex-end wrap .flexbox 68 >-horizontal-tb rtl column justify-content-flex-start align-items-stretch wrap .flexbox 69 >-horizontal-tb rtl column justify-content-flex-end align-items-flex-start wrap .flexbox 70 >-horizontal-tb rtl column justify-content-flex-end align-items-flex-end wrap .flexbox 71 >-horizontal-tb rtl column justify-content-flex-end align-items-stretch wrap .flexbox 72 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 73 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 74 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 75 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 76 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 77 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 78 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 79 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 80 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 81 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 82 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 83 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 84 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 85 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 86 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 87 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 88 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 89 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 90 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 91 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 92 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 93 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 94 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 95 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 96 >-horizontal-tb ltr row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 97 >-horizontal-tb ltr row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 98 >-horizontal-tb ltr row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 99 >-horizontal-tb ltr row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 100 >-horizontal-tb ltr row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 101 >-horizontal-tb ltr row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 102 >-horizontal-tb rtl row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 103 >-horizontal-tb rtl row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 104 >-horizontal-tb rtl row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 105 >-horizontal-tb rtl row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 106 >-horizontal-tb rtl row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 107 >-horizontal-tb rtl row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 108 >-horizontal-tb ltr column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 109 >-horizontal-tb ltr column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 110 >-horizontal-tb ltr column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 111 >-horizontal-tb ltr column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 112 >-horizontal-tb ltr column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 113 >-horizontal-tb ltr column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 114 >-horizontal-tb rtl column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 115 >-horizontal-tb rtl column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 116 >-horizontal-tb rtl column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 117 >-horizontal-tb rtl column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 118 >-horizontal-tb rtl column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 119 >-horizontal-tb rtl column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 120 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 121 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 122 >-horizontal-tb ltr row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 123 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 124 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 125 >-horizontal-tb ltr row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 126 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 127 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 128 >-horizontal-tb rtl row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 129 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 130 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 131 >-horizontal-tb rtl row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 132 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 133 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 134 >-horizontal-tb ltr column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 135 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 136 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 137 >-horizontal-tb ltr column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 138 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 139 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 140 >-horizontal-tb rtl column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 141 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 142 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 143 >-horizontal-tb rtl column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 144 >-vertical-rl ltr row justify-content-flex-start align-items-flex-start nowrap .flexbox 145 >-vertical-rl ltr row justify-content-flex-start align-items-flex-end nowrap .flexbox 146 >-vertical-rl ltr row justify-content-flex-start align-items-stretch nowrap .flexbox 147 >-vertical-rl ltr row justify-content-flex-end align-items-flex-start nowrap .flexbox 148 >-vertical-rl ltr row justify-content-flex-end align-items-flex-end nowrap .flexbox 149 >-vertical-rl ltr row justify-content-flex-end align-items-stretch nowrap .flexbox 150 >-vertical-rl rtl row justify-content-flex-start align-items-flex-start nowrap .flexbox 151 >-vertical-rl rtl row justify-content-flex-start align-items-flex-end nowrap .flexbox 152 >-vertical-rl rtl row justify-content-flex-start align-items-stretch nowrap .flexbox 153 >-vertical-rl rtl row justify-content-flex-end align-items-flex-start nowrap .flexbox 154 >-vertical-rl rtl row justify-content-flex-end align-items-flex-end nowrap .flexbox 155 >-vertical-rl rtl row justify-content-flex-end align-items-stretch nowrap .flexbox 156 >-vertical-rl ltr column justify-content-flex-start align-items-flex-start nowrap .flexbox 157 >-vertical-rl ltr column justify-content-flex-start align-items-flex-end nowrap .flexbox 158 >-vertical-rl ltr column justify-content-flex-start align-items-stretch nowrap .flexbox 159 >-vertical-rl ltr column justify-content-flex-end align-items-flex-start nowrap .flexbox 160 >-vertical-rl ltr column justify-content-flex-end align-items-flex-end nowrap .flexbox 161 >-vertical-rl ltr column justify-content-flex-end align-items-stretch nowrap .flexbox 162 >-vertical-rl rtl column justify-content-flex-start align-items-flex-start nowrap .flexbox 163 >-vertical-rl rtl column justify-content-flex-start align-items-flex-end nowrap .flexbox 164 >-vertical-rl rtl column justify-content-flex-start align-items-stretch nowrap .flexbox 165 >-vertical-rl rtl column justify-content-flex-end align-items-flex-start nowrap .flexbox 166 >-vertical-rl rtl column justify-content-flex-end align-items-flex-end nowrap .flexbox 167 >-vertical-rl rtl column justify-content-flex-end align-items-stretch nowrap .flexbox 168 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 169 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 170 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 171 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 172 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 173 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 174 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 175 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 176 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 177 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 178 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 179 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 180 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 181 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 182 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 183 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 184 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 185 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 186 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 187 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 188 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 189 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 190 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 191 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 192 >-vertical-rl ltr row justify-content-flex-start align-items-flex-start wrap .flexbox 193 >-vertical-rl ltr row justify-content-flex-start align-items-flex-end wrap .flexbox 194 >-vertical-rl ltr row justify-content-flex-start align-items-stretch wrap .flexbox 195 >-vertical-rl ltr row justify-content-flex-end align-items-flex-start wrap .flexbox 196 >-vertical-rl ltr row justify-content-flex-end align-items-flex-end wrap .flexbox 197 >-vertical-rl ltr row justify-content-flex-end align-items-stretch wrap .flexbox 198 >-vertical-rl rtl row justify-content-flex-start align-items-flex-start wrap .flexbox 199 >-vertical-rl rtl row justify-content-flex-start align-items-flex-end wrap .flexbox 200 >-vertical-rl rtl row justify-content-flex-start align-items-stretch wrap .flexbox 201 >-vertical-rl rtl row justify-content-flex-end align-items-flex-start wrap .flexbox 202 >-vertical-rl rtl row justify-content-flex-end align-items-flex-end wrap .flexbox 203 >-vertical-rl rtl row justify-content-flex-end align-items-stretch wrap .flexbox 204 >-vertical-rl ltr column justify-content-flex-start align-items-flex-start wrap .flexbox 205 >-vertical-rl ltr column justify-content-flex-start align-items-flex-end wrap .flexbox 206 >-vertical-rl ltr column justify-content-flex-start align-items-stretch wrap .flexbox 207 >-vertical-rl ltr column justify-content-flex-end align-items-flex-start wrap .flexbox 208 >-vertical-rl ltr column justify-content-flex-end align-items-flex-end wrap .flexbox 209 >-vertical-rl ltr column justify-content-flex-end align-items-stretch wrap .flexbox 210 >-vertical-rl rtl column justify-content-flex-start align-items-flex-start wrap .flexbox 211 >-vertical-rl rtl column justify-content-flex-start align-items-flex-end wrap .flexbox 212 >-vertical-rl rtl column justify-content-flex-start align-items-stretch wrap .flexbox 213 >-vertical-rl rtl column justify-content-flex-end align-items-flex-start wrap .flexbox 214 >-vertical-rl rtl column justify-content-flex-end align-items-flex-end wrap .flexbox 215 >-vertical-rl rtl column justify-content-flex-end align-items-stretch wrap .flexbox 216 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 217 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 218 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 219 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 220 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 221 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 222 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 223 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 224 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 225 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 226 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 227 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 228 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 229 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 230 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 231 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 232 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 233 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 234 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 235 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 236 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 237 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 238 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 239 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 240 >-vertical-rl ltr row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 241 >-vertical-rl ltr row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 242 >-vertical-rl ltr row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 243 >-vertical-rl ltr row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 244 >-vertical-rl ltr row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 245 >-vertical-rl ltr row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 246 >-vertical-rl rtl row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 247 >-vertical-rl rtl row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 248 >-vertical-rl rtl row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 249 >-vertical-rl rtl row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 250 >-vertical-rl rtl row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 251 >-vertical-rl rtl row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 252 >-vertical-rl ltr column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 253 >-vertical-rl ltr column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 254 >-vertical-rl ltr column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 255 >-vertical-rl ltr column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 256 >-vertical-rl ltr column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 257 >-vertical-rl ltr column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 258 >-vertical-rl rtl column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 259 >-vertical-rl rtl column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 260 >-vertical-rl rtl column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 261 >-vertical-rl rtl column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 262 >-vertical-rl rtl column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 263 >-vertical-rl rtl column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 264 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 265 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 266 >-vertical-rl ltr row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 267 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 268 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 269 >-vertical-rl ltr row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 270 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 271 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 272 >-vertical-rl rtl row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 273 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 274 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 275 >-vertical-rl rtl row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 276 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 277 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 278 >-vertical-rl ltr column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 279 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 280 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 281 >-vertical-rl ltr column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 282 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 283 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 284 >-vertical-rl rtl column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 285 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 286 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 287 >-vertical-rl rtl column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 288 >-vertical-lr ltr row justify-content-flex-start align-items-flex-start nowrap .flexbox 289 >-vertical-lr ltr row justify-content-flex-start align-items-flex-end nowrap .flexbox 290 >-vertical-lr ltr row justify-content-flex-start align-items-stretch nowrap .flexbox 291 >-vertical-lr ltr row justify-content-flex-end align-items-flex-start nowrap .flexbox 292 >-vertical-lr ltr row justify-content-flex-end align-items-flex-end nowrap .flexbox 293 >-vertical-lr ltr row justify-content-flex-end align-items-stretch nowrap .flexbox 294 >-vertical-lr rtl row justify-content-flex-start align-items-flex-start nowrap .flexbox 295 >-vertical-lr rtl row justify-content-flex-start align-items-flex-end nowrap .flexbox 296 >-vertical-lr rtl row justify-content-flex-start align-items-stretch nowrap .flexbox 297 >-vertical-lr rtl row justify-content-flex-end align-items-flex-start nowrap .flexbox 298 >-vertical-lr rtl row justify-content-flex-end align-items-flex-end nowrap .flexbox 299 >-vertical-lr rtl row justify-content-flex-end align-items-stretch nowrap .flexbox 300 >-vertical-lr ltr column justify-content-flex-start align-items-flex-start nowrap .flexbox 301 >-vertical-lr ltr column justify-content-flex-start align-items-flex-end nowrap .flexbox 302 >-vertical-lr ltr column justify-content-flex-start align-items-stretch nowrap .flexbox 303 >-vertical-lr ltr column justify-content-flex-end align-items-flex-start nowrap .flexbox 304 >-vertical-lr ltr column justify-content-flex-end align-items-flex-end nowrap .flexbox 305 >-vertical-lr ltr column justify-content-flex-end align-items-stretch nowrap .flexbox 306 >-vertical-lr rtl column justify-content-flex-start align-items-flex-start nowrap .flexbox 307 >-vertical-lr rtl column justify-content-flex-start align-items-flex-end nowrap .flexbox 308 >-vertical-lr rtl column justify-content-flex-start align-items-stretch nowrap .flexbox 309 >-vertical-lr rtl column justify-content-flex-end align-items-flex-start nowrap .flexbox 310 >-vertical-lr rtl column justify-content-flex-end align-items-flex-end nowrap .flexbox 311 >-vertical-lr rtl column justify-content-flex-end align-items-stretch nowrap .flexbox 312 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 313 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 314 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 315 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 316 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 317 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 318 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 319 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 320 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 321 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 322 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 323 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 324 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 325 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 326 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 327 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 328 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 329 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 330 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-start nowrap .flexbox 331 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-end nowrap .flexbox 332 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-stretch nowrap .flexbox 333 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-start nowrap .flexbox 334 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-end nowrap .flexbox 335 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-stretch nowrap .flexbox 336 >-vertical-lr ltr row justify-content-flex-start align-items-flex-start wrap .flexbox 337 >-vertical-lr ltr row justify-content-flex-start align-items-flex-end wrap .flexbox 338 >-vertical-lr ltr row justify-content-flex-start align-items-stretch wrap .flexbox 339 >-vertical-lr ltr row justify-content-flex-end align-items-flex-start wrap .flexbox 340 >-vertical-lr ltr row justify-content-flex-end align-items-flex-end wrap .flexbox 341 >-vertical-lr ltr row justify-content-flex-end align-items-stretch wrap .flexbox 342 >-vertical-lr rtl row justify-content-flex-start align-items-flex-start wrap .flexbox 343 >-vertical-lr rtl row justify-content-flex-start align-items-flex-end wrap .flexbox 344 >-vertical-lr rtl row justify-content-flex-start align-items-stretch wrap .flexbox 345 >-vertical-lr rtl row justify-content-flex-end align-items-flex-start wrap .flexbox 346 >-vertical-lr rtl row justify-content-flex-end align-items-flex-end wrap .flexbox 347 >-vertical-lr rtl row justify-content-flex-end align-items-stretch wrap .flexbox 348 >-vertical-lr ltr column justify-content-flex-start align-items-flex-start wrap .flexbox 349 >-vertical-lr ltr column justify-content-flex-start align-items-flex-end wrap .flexbox 350 >-vertical-lr ltr column justify-content-flex-start align-items-stretch wrap .flexbox 351 >-vertical-lr ltr column justify-content-flex-end align-items-flex-start wrap .flexbox 352 >-vertical-lr ltr column justify-content-flex-end align-items-flex-end wrap .flexbox 353 >-vertical-lr ltr column justify-content-flex-end align-items-stretch wrap .flexbox 354 >-vertical-lr rtl column justify-content-flex-start align-items-flex-start wrap .flexbox 355 >-vertical-lr rtl column justify-content-flex-start align-items-flex-end wrap .flexbox 356 >-vertical-lr rtl column justify-content-flex-start align-items-stretch wrap .flexbox 357 >-vertical-lr rtl column justify-content-flex-end align-items-flex-start wrap .flexbox 358 >-vertical-lr rtl column justify-content-flex-end align-items-flex-end wrap .flexbox 359 >-vertical-lr rtl column justify-content-flex-end align-items-stretch wrap .flexbox 360 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 361 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 362 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 363 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 364 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 365 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 366 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 367 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 368 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-stretch wrap .flexbox 369 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 370 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 371 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-stretch wrap .flexbox 372 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 373 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 374 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 375 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 376 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 377 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 378 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-start wrap .flexbox 379 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-end wrap .flexbox 380 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-stretch wrap .flexbox 381 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-start wrap .flexbox 382 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-end wrap .flexbox 383 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-stretch wrap .flexbox 384 >-vertical-lr ltr row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 385 >-vertical-lr ltr row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 386 >-vertical-lr ltr row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 387 >-vertical-lr ltr row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 388 >-vertical-lr ltr row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 389 >-vertical-lr ltr row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 390 >-vertical-lr rtl row justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 391 >-vertical-lr rtl row justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 392 >-vertical-lr rtl row justify-content-flex-start align-items-stretch wrap-reverse .flexbox 393 >-vertical-lr rtl row justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 394 >-vertical-lr rtl row justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 395 >-vertical-lr rtl row justify-content-flex-end align-items-stretch wrap-reverse .flexbox 396 >-vertical-lr ltr column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 397 >-vertical-lr ltr column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 398 >-vertical-lr ltr column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 399 >-vertical-lr ltr column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 400 >-vertical-lr ltr column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 401 >-vertical-lr ltr column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 402 >-vertical-lr rtl column justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 403 >-vertical-lr rtl column justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 404 >-vertical-lr rtl column justify-content-flex-start align-items-stretch wrap-reverse .flexbox 405 >-vertical-lr rtl column justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 406 >-vertical-lr rtl column justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 407 >-vertical-lr rtl column justify-content-flex-end align-items-stretch wrap-reverse .flexbox 408 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 409 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 410 >-vertical-lr ltr row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 411 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 412 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 413 >-vertical-lr ltr row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 414 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 415 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 416 >-vertical-lr rtl row-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 417 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 418 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 419 >-vertical-lr rtl row-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 420 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 421 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 422 >-vertical-lr ltr column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 423 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 424 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 425 >-vertical-lr ltr column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 426 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-start wrap-reverse .flexbox 427 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-flex-end wrap-reverse .flexbox 428 >-vertical-lr rtl column-reverse justify-content-flex-start align-items-stretch wrap-reverse .flexbox 429 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-start wrap-reverse .flexbox 430 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-flex-end wrap-reverse .flexbox 431 >-vertical-lr rtl column-reverse justify-content-flex-end align-items-stretch wrap-reverse .flexbox 432 >- >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-013.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-013.html >deleted file mode 100644 >index cdbdfcfbf72b25b49093bb681067e94e7be3573d..0000000000000000000000000000000000000000 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-013.html >+++ /dev/null >@@ -1,154 +0,0 @@ >-<!DOCTYPE html> >-<title>CSS Test: Absolutely positioned children of flexboxes</title> >-<link rel="author" title="Google Inc." href="http://www.google.com/"> >-<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> >-<meta name="assert" content="Checks the abspos position of flex children in a number of writing modes, alignments, etc."> >-<style> >-.abspos { >- height: 50px; >- width: 50px; >- background: lightblue; >- position: absolute; >- flex: none; >-} >- >-.relpos { >- position: relative; >-} >- >-.title { >- margin-top: 1em; >-} >- >-.flexbox { >- display: flex; >- background-color: #aaa; >- height: 100px; >- width: 100px; >-} >- >-.horizontal-tb { >- writing-mode: horizontal-tb; >-} >-.vertical-rl { >- writing-mode: vertical-rl; >-} >-.vertical-lr { >- writing-mode: vertical-lr; >-} >- >-.rtl { >- direction: rtl; >-} >-.ltr { >- direction: ltr; >-} >- >-.align-items-flex-start { >- align-items: flex-start; >-} >-.align-items-flex-end { >- align-items: flex-end; >-} >-.align-items-stretch { >- align-items: stretch; >-} >-.justify-content-flex-start { >- justify-content: flex-start; >-} >-.justify-content-flex-end { >- justify-content: flex-end; >-} >- >-.row { >- flex-direction: row; >-} >-.row-reverse { >- flex-direction: row-reverse; >-} >-.column { >- flex-direction: column; >-} >-.column-reverse { >- flex-direction: column-reverse; >-} >- >-.nowrap { >- flex-wrap: nowrap; >-} >-.wrap { >- flex-wrap: wrap; >-} >-.wrap-reverse { >- flex-wrap: wrap-reverse; >-} >- >-</style> >-<script src="/resources/testharness.js"></script> >-<script src="/resources/testharnessreport.js"></script> >-<script src="/resources/check-layout-th.js"></script> >-<body onload="checkLayout('.flexbox')"> >-<div id=log></div> >-<script> >- >-var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; >-var directions = ['ltr', 'rtl']; >-var justifyContents = ['flex-start', 'flex-end']; >-var alignItems = ['flex-start', 'flex-end', 'stretch']; >-var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; >-var wraps = ['nowrap', 'wrap', 'wrap-reverse']; >- >-// These expected values were harvested from Chrome 85. Firefox 78b6 agrees >-// except when align-items:stretch and flex-wrap:wrap-reverse are both in >-// effect. >-// Chrome 83 and FF 78b6 agree with these values when the lone flex child is >-// position:static instead of position:absolute. That is evidence that these >-// values are all correct, because the position of a staticpos child is >-// specified to be identical to the abspos position when there are no other >-// children or specified offsets. >-var x = [0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0]; >- >-var y = [0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,0,50,0,0,50,0,0,50,0,0,50,0,0,0,0,50,50,50,0,0,0,50,50,50,0,50,0,0,50,0,0,50,0,0,50,0,50,50,50,0,0,0,50,50,50,0,0,0,50,0,50,50,0,50,50,0,50,50,0,50,0,0,0,50,50,50,0,0,0,50,50,50,50,0,50,50,0,50,50,0,50,50,0,50,50,50,50,0,0,0,50,50,50,0,0,0,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,0,50,0,0,50,0,50,0,50,50,0,50,50,50,50,0,0,0,0,0,0,50,50,50,0,50,0,0,50,0,50,0,50,50,0,50,0,0,0,50,50,50,50,50,50,0,0,0,50,0,50,50,0,50,0,50,0,0,50,0,50,50,50,0,0,0,0,0,0,50,50,50,50,0,50,50,0,50,0,50,0,0,50,0]; >- >-var test_number = 1; >- >-writingModes.forEach(function(flexWritingMode) { >- wraps.forEach(function(wrap) { >- flexDirections.forEach(function(flexDirection) { >- directions.forEach(function(direction) { >- justifyContents.forEach(function(justifyContent) { >- alignItems.forEach(function(alignment) { >- var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment + ' ' + wrap; >- var title = document.createElement('div'); >- title.className = 'title'; >- title.innerHTML = flexboxClassName + " .flexbox " + (test_number++); >- document.body.appendChild(title); >- >- var flexbox = document.createElement('div'); >- flexbox.className = 'flexbox ' + flexboxClassName; >- >- var child = document.createElement('div'); >- child.setAttribute('class', 'abspos'); >- child.setAttribute("data-offset-x", x.shift()); >- child.setAttribute("data-offset-y", y.shift()); >- flexbox.appendChild(child); >- >- var relpos = document.createElement('div'); >- relpos.className = 'relpos'; >- relpos.appendChild(flexbox); >- >- document.body.appendChild(relpos); >- }) >- }) >- }) >- }) >- }) >-}) >- >-// Print the x,y offsets for pasting into above x,y arrays. >-absposes = document.querySelectorAll('.abspos') >-lefts = Array.from(absposes).map(x => x.offsetLeft) >-tops = Array.from(absposes).map(x => x.offsetTop) >- >-</script> >-</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-scrollbar-freeze-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-scrollbar-freeze-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..d0bf617951f3a9b5e3ae8e4b77e6ff3762b3cde1 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-scrollbar-freeze-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<div style="width: 100px; height: 100px; overflow: auto;"> >+ <div style="height: 200px; background: green;"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-scrollbar-freeze.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-scrollbar-freeze.html >new file mode 100644 >index 0000000000000000000000000000000000000000..ac510f11e9160b1ed646047ed5aa44d2ebaa8a6f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-scrollbar-freeze.html >@@ -0,0 +1,16 @@ >+<!DOCTYPE html> >+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1148288"> >+<link rel="match" href="position-absolute-scrollbar-freeze-ref.html"> >+<div style="display: flex; position: relative;"> >+ <div style="display: flex;"> >+ <div id="target1" style="width: 0px;">text</div> >+ </div> >+ <div id="target2" style="position: absolute; overflow: auto; top: 0; left: 0; width: 100px; max-height: 100px; display: none;"> >+ <div style="height: 200px; background: green;"></div> >+ </div> >+</div> >+<script> >+document.body.offsetTop; >+document.getElementById('target1').innerText = ''; >+document.getElementById('target2').style.display = ''; >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-002-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-002-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-002-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..698f310e90268e74193313aba2e5966914cf8457 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-002.html >@@ -0,0 +1,12 @@ >+<!DOCTYPE html> >+<meta name="assert" content="This ensures that a relative-positioned grandchild (of a flexbox) correctly resolves percentages against its stretched parent."> >+<link rel="help" href="https://crbug.com/1106074"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div style="width: 100px; height: 100px; background: red;"></div> >+<div style="display: flex; width: 100px;"> >+ <div style="height: 100px;"></div> >+ <div style="width: 100px;"> >+ <div style="background: green; height: 100px; position: relative; top: -100%;"></div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-003-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-003-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-003-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0570b246af1ce71f3669ff758d7ee942f48b2c5f >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-003.html >@@ -0,0 +1,13 @@ >+<!DOCTYPE html> >+<meta name="assert" content="This ensures that a relative-positioned great-grandchild (of a flexbox) correctly resolves percentages against its stretched parent."> >+<link rel="help" href="https://crbug.com/1108508"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div style="display: flex; width: 100px; height: 100px;"> >+ <div> >+ <div style="width: 100%; height: 100%;"> >+ <div style="width: 100px; height: 100px; background: red;"></div> >+ <div style="width: 100px; height: 100px; background: green; position: relative; top: -100%;"></div> >+ </div> >+ </div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html >index 966f39f173952f01268dcd26a9a5892bf4a689a9..f5c3d7c1818366c403896bc1da44af11ed4e0f5b 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html >@@ -2,6 +2,14 @@ > <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> > <link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#the-height-property"> > <meta name="assert" content="The percentage height resolution quirk isn't applied to flexboxes."> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+<!-- Have to wait for onload to fire to ensure the image is loaded. --> >+<body onload="checkLayout('#container')"> >+ > <p>There should be a green square to the left of a blue square, and no red.</p> > <div id="container" style="width:200px; height:456px;"> > <div style="display:flex; background:blue;" data-expected-height="100"> >@@ -9,9 +17,3 @@ > <div style="width: 50px; height: 100%; background: red;" data-expected-height="0"></div> > </div> > </div> >-<script src="/resources/testharness.js"></script> >-<script src="/resources/testharnessreport.js"></script> >-<script src="/resources/check-layout-th.js"></script> >-<script> >- checkLayout("#container"); >-</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto-min-content-sizing-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto-min-content-sizing-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..5d6c253ff06f19f34dbfe12c001272f3ddc662f3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto-min-content-sizing-expected.txt >@@ -0,0 +1,3 @@ >+ >+PASS scrollbars-auto-min-content-sizing >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto-min-content-sizing.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto-min-content-sizing.html >new file mode 100644 >index 0000000000000000000000000000000000000000..45a1296240411fc369f5e399f6b28af31d72a14a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto-min-content-sizing.html >@@ -0,0 +1,19 @@ >+<!DOCTYPE html> >+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127415"> >+<meta name="assert" content="The presence of a scrollbar should not make a min-sized flexbox, and a single flex-item differ in size."> >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<div style="display: flex; width: 100px;"> >+ <div id="outer" style="display: flex; width: min-content; height: 100px;"> >+ <div id="inner" style="flex: 0 0 auto; overflow-y: auto;"> >+ <div style="width: 100px; height: 3000px;"></div> >+ </div> >+ </div> >+</div> >+<script> >+test(() => { >+ const outer = document.getElementById('outer'); >+ const inner = document.getElementById('inner'); >+ assert_equals(outer.getBoundingClientRect().width, inner.getBoundingClientRect().width); >+}); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-no-margin-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-no-margin-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..eaeb36e448dbef7d96881602fed38ca4d4ea10be >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-no-margin-expected.html >@@ -0,0 +1,118 @@ >+<!DOCTYPE html> >+<head> >+ >+<script src="support/scrollbars.js"></script> >+ >+<style> >+.horizontal-header { >+ width: 120px; >+} >+.vertical-header { >+ width: 60px; >+} >+.container-row { >+ display: flex; >+ flex-direction: row; >+ align-items: flex-start; >+ justify-content: flex-start; >+} >+.container { >+ flex: none; >+ margin: 5px; >+} >+.ltr { >+ direction: ltr; >+} >+.rtl { >+ direction: rtl; >+} >+.horizontal { >+ writing-mode: horizontal-tb; >+} >+.flipped-blocks { >+ writing-mode: vertical-rl; >+} >+.flipped-lines { >+ writing-mode: vertical-lr; >+} >+.flex { >+ border: 2px solid red; >+ overflow: scroll; >+ max-width: 100px; >+ max-height: 100px; >+ white-space: nowrap; >+ font-size: 0; >+ scrollbar-width: thin; >+ scrollbar-color: black white; >+} >+.row > div, .row-reverse > div { >+ display: inline-flex; >+} >+.column > div, .column-reverse > div { >+ display: flex; >+} >+ >+.flex > div { >+ width: 30px; >+ height: 30px; >+ border: 2px solid blue; >+ flex-direction: column; >+ justify-content: center; >+} >+.flex > div > div { >+ font-size: 20px; >+ text-align: center; >+ flex: none; >+} >+</style> >+ >+</head> >+ >+<div class="container-row"> >+ <div class="vertical-header ltr horizontal"></div> >+ <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> >+ <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> >+ <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> >+ <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> >+ <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> >+ <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> >+</div> >+ >+<script> >+// Override createContentNode to emulate reverse flow direction. >+createContentNode = (flexDirection, textDirection, writingMode) => { >+ var flexNode = document.createElement("div"); >+ flexNode.className = "flex " + flexDirection; >+ flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode; >+ for (var i = 1; i < 4; i++) >+ flexNode.appendChild(createLeafNode(flexDirection.endsWith("reverse") ? 4 - i : i)); >+ return flexNode; >+} >+ >+flexDirections.forEach((flexDirection) => { >+ var containerRow = createContainerRow(flexDirection); >+ document.body.appendChild(containerRow); >+}); >+ >+// Scroll all flex containers to the emulated beginning of flow. >+var nodes = document.querySelectorAll(".ltr > .row-reverse"); >+for (var i = 0; i < nodes.length; i++) { >+ nodes[i].scrollLeft = 10000; >+ nodes[i].scrollTop = 10000; >+} >+nodes = document.querySelectorAll(".rtl > .row-reverse"); >+for (var i = 0; i < nodes.length; i++) { >+ nodes[i].scrollLeft = -10000; >+ nodes[i].scrollTop = -10000; >+} >+nodes = document.querySelectorAll(".column-reverse"); >+for (var i = 0; i < nodes.length; i++) { >+ nodes[i].scrollLeft = 10000; >+ nodes[i].scrollTop = 10000; >+} >+nodes = document.querySelectorAll(".flipped-blocks > .column-reverse"); >+for (var i = 0; i < nodes.length; i++) { >+ nodes[i].scrollLeft = -10000; >+ nodes[i].scrollTop = 0; >+} >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-no-margin.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-no-margin.html >new file mode 100644 >index 0000000000000000000000000000000000000000..092e4c5ea9ff6b47440f2556482f978b88f1a82e >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-no-margin.html >@@ -0,0 +1,99 @@ >+<!DOCTYPE html> >+<head> >+<title>Scrollbars inside flexbox with direction and writing-mode</title> >+<link rel="author" title="Google, Inc." href="http://www.google.com/"> >+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> >+<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> >+<link rel="match" href="scrollbars-no-margin-ref.html"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/"> >+ >+<script src="support/scrollbars.js"></script> >+ >+<style> >+.horizontal-header { >+ width: 120px; >+} >+.vertical-header { >+ width: 60px; >+} >+.container-row { >+ display: flex; >+ flex-direction: row; >+ align-items: flex-start; >+ justify-content: flex-start; >+} >+.container { >+ flex: none; >+ margin: 5px; >+} >+.ltr { >+ direction: ltr; >+} >+.rtl { >+ direction: rtl; >+} >+.horizontal { >+ writing-mode: horizontal-tb; >+} >+.flipped-blocks { >+ writing-mode: vertical-rl; >+} >+.flipped-lines { >+ writing-mode: vertical-lr; >+} >+.flex { >+ border: 2px solid red; >+ display: flex; >+ overflow: scroll; >+ max-width: 100px; >+ max-height: 100px; >+ font-size: 0; >+ scrollbar-width: thin; >+ scrollbar-color: black white; >+} >+.column { >+ flex-direction: column; >+} >+.column-reverse { >+ flex-direction: column-reverse; >+} >+.row { >+ flex-direction: row; >+} >+.row-reverse { >+ flex-direction: row-reverse; >+} >+.flex > .leaf1, .flex > .leaf2, .flex > .leaf3 { >+ flex: none; >+ width: 30px; >+ height: 30px; >+ border: 2px solid blue; >+ display: flex; >+ flex-direction: column; >+ justify-content: center; >+} >+.flex > div > div { >+ font-size: 20px; >+ text-align: center; >+ flex: none; >+} >+</style> >+ >+</head> >+ >+<div class="container-row"> >+ <div class="vertical-header ltr horizontal"></div> >+ <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> >+ <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> >+ <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> >+ <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> >+ <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> >+ <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> >+</div> >+ >+<script> >+flexDirections.forEach((flexDirection) => { >+ var containerRow = createContainerRow(flexDirection); >+ document.body.appendChild(containerRow); >+}); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/stretch-input-in-column-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/stretch-input-in-column-expected.html >index 9024826f5e04b2b9db518788230bd1947589e056..85d2a49e3ec6576dd3d0599c13e56ec453000606 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/stretch-input-in-column-expected.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/stretch-input-in-column-expected.html >@@ -1,6 +1,6 @@ > <!DOCTYPE html> > <html> >-<link href="support/flexbox.css" rel="stylesheet"> >+<link href="../support/flexbox.css" rel="stylesheet"> > <style> > .flexbox { > background-color: grey; >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002.html >new file mode 100644 >index 0000000000000000000000000000000000000000..0594eb406ee1197ccc803af49041b0eff20481e3 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002.html >@@ -0,0 +1,27 @@ >+<!DOCTYPE html> >+<title>SVG root as flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> >+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with an intrinsic aspect ratio, but no intrinsic size"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<meta name="assert" content="SVG's intrinsic width when used as flex base size stretches into the available size when it has no specified intrinsic sizes." /> >+ >+<style> >+#reference-overlapped-red { >+ position: absolute; >+ background-color: red; >+ width: 100px; >+ height: 100px; >+ z-index: -1; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div id="reference-overlapped-red"></div> >+ >+<div style="display: flex; width: 100px;"> >+ <svg viewBox="0 0 200 200"> >+ <rect width="100%" height="100%" fill="green" /> >+ </svg> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003.html >new file mode 100644 >index 0000000000000000000000000000000000000000..778690d7948f6c2b9952483859a9484a1349b3cb >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003.html >@@ -0,0 +1,15 @@ >+<!DOCTYPE html> >+<title>SVG root as flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> >+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with an intrinsic aspect ratio, but no intrinsic size"> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> >+<meta name="assert" content="SVG's intrinsic width when used as flex base size stretches into the available size (minus inline margins) when it has no specified intrinsic sizes." /> >+ >+<p>Test passes if there is a filled green square.</p> >+ >+<div style="display: flex; width: 150px;"> >+ <svg viewBox="0 0 200 200" style="margin-right: 50px; flex: 1 0 auto;"> >+ <rect width="100%" height="100%" fill="green" /> >+ </svg> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-004-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-004-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-004-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-004.html >new file mode 100644 >index 0000000000000000000000000000000000000000..1321433634599bf4c185b4882d6ca3bee4b71e2b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-004.html >@@ -0,0 +1,27 @@ >+<!DOCTYPE html> >+<title>SVG root as flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> >+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with an intrinsic aspect ratio, but no intrinsic size"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<meta name="assert" content="SVG's intrinsic width when used as flex base size stretches into the available size when it has no specified intrinsic sizes and is passed through the aspect ratio " /> >+ >+<style> >+#reference-overlapped-red { >+ position: absolute; >+ background-color: red; >+ width: 100px; >+ height: 100px; >+ z-index: -1; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div id="reference-overlapped-red"></div> >+ >+<div style="display: flex; flex-direction: column; width: 100px; align-items: flex-start;"> >+ <svg viewBox="0 0 200 200"> >+ <rect width="100%" height="100%" fill="green" /> >+ </svg> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-005-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-005-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-005-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-005.html >new file mode 100644 >index 0000000000000000000000000000000000000000..19501347662f387141f0eb0dbb16c23906c35589 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-005.html >@@ -0,0 +1,27 @@ >+<!DOCTYPE html> >+<title>SVG root as flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> >+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with an intrinsic aspect ratio, but no intrinsic size"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<meta name="assert" content="SVG's intrinsic width when used as flex base size stretches into the available size (minus inline margins) when it has no specified intrinsic sizes and is passed through the aspect ratio, block margins have no effect. " /> >+ >+<style> >+#reference-overlapped-red { >+ position: absolute; >+ background-color: red; >+ width: 100px; >+ height: 100px; >+ z-index: -1; >+} >+</style> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div id="reference-overlapped-red"></div> >+ >+<div style="display: flex; flex-direction: column; width: 150px; align-items: flex-start;"> >+ <svg viewBox="0 0 200 200" style="margin-right: 50px; flex 1 0 auto; margin-bottom: 70px;"> >+ <rect width="100%" height="100%" fill="green" /> >+ </svg> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-006-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-006-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..998c431f941f2cfb4e400b03ce4c4fe6579992a0 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-006-expected.txt >@@ -0,0 +1,4 @@ >+The test passes if you see a 600x300 blue rectangle. >+ >+PASS svg 1 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-006.html >new file mode 100644 >index 0000000000000000000000000000000000000000..73406c8e864860479f61141d7694ac2e96a93ec7 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-006.html >@@ -0,0 +1,22 @@ >+<!DOCTYPE html> >+<title>SVG root as flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E"> >+<link rel="help" href="https://crbug.com/965672"> >+<meta name="assert" content="When SVG has aspect ratio and no intrinsic height its flex-basis is available width * ratio, not 150px, when in a column flexbox." /> >+ >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+ >+The test passes if you see a 600x300 blue rectangle. >+ >+<div style="display: flex; flex-direction: column; width: 600px;"> >+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" data-expected-width=600 data-expected-height=300> >+ <rect x="0" y="0" width="200" height="100" fill="blue" /> >+ </svg> >+</div> >+ >+<script> >+checkLayout('svg'); >+</script> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-2-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-2-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-2-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-2.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-2.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f04f9e58f7ae23f0205815fba0293efa70273aa6 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-2.html >@@ -0,0 +1,18 @@ >+<!DOCTYPE html> >+<title>table is flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> >+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<meta name="assert" content="Flex item table's min-width is honored when it is larger than the table's min-content width"> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<div style="display: flex; width: 100px;"> >+ <div style="display: table; min-width: 100px; background: green;"> >+ <div style="display:table-cell;"> >+ <div style="width: 50px; height: 100px;"></div> >+ </div> >+ </div> >+ <div style="height: 100px; background: red; flex-basis: 100px; min-width: 0px;"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a13a94f56f6a8591521f4f38de227c2d483cc00a >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3.html >@@ -0,0 +1,20 @@ >+<!DOCTYPE html> >+<title>table is flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> >+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<meta name="assert" content="Flex item table's min-content width is honored when it is larger than the table's specified min-width, and the sum of the flex base sizes are greater than the container's available size."> >+ >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ >+<!-- This test passed in Chrome 83, was broken in 84 and 85, and will start to pass again in 86. --> >+ >+<div style="display: flex; width: 100px;"> >+ <div style="display: table; min-width: 50px; background: green;"> >+ <div style="display:table-cell;"> >+ <div style="width: 100px; height: 100px;"></div> >+ </div> >+ </div> >+ <div style="height: 100px; background: red; flex-basis: 100px; min-width: 0px;"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width.html >index 3a676babde0e573f3f801d1f498b02e8a6b891ff..83f0511031ef31fa52b96bbeb24672f1d61ca964 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width.html >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width.html >@@ -3,8 +3,12 @@ > <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> > <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> > <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> >+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> > <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<meta name="assert" content="Flex item table's min-content width takes precedence over used max-width."> >+ > <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ > <div style="display:flex; width:100px; background:red;"> > <div style="display:table; min-width: 5px; width: 10px; max-width:10px; height:100px; background:green;"> > <div style="width:100px; height:10px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size.html >new file mode 100644 >index 0000000000000000000000000000000000000000..bfb6c34f556562a8a38c6a961daa5cebe0d96cf5 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size.html >@@ -0,0 +1,12 @@ >+<!DOCTYPE html> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<meta name="assert" content="The table's main-axis (block-size) size is flex to consume the available space."> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div style="display: flex; flex-direction: column; width: 100px; height: 100px; background: red;"> >+ <table style="border-spacing: 0; flex-grow: 1;"> >+ <caption style="height: 10px; background: green;"></caption> >+ <caption style="height: 20px; background: green; caption-side: bottom;"></caption> >+ <td style="background: green;"></td> >+ </table> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..2f40b6c49fdcee593a160c82c381d4c14f377a38 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001-expected.html >@@ -0,0 +1,32 @@ >+<!DOCTYPE html> >+<meta charset="utf-8"> >+<title>Flexbox Reference: display:table flex items with percent-width cells and content keywords for used flex-basis</title> >+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+<style> >+ .container { >+ display: block; >+ width: 200px; >+ border: 1px solid black; >+ } >+ table { width: max-content; } >+ td { >+ background-color: cyan; >+ width: 100%; >+ border: 1px solid gray; >+ } >+ >+</style> >+<body> >+ <div class="container"> >+ <table><tr><td>1</td><td>2</td></tr></table> >+ </div> >+ <div class="container"> >+ <table><tr><td>1</td><td>2</td></tr></table> >+ </div> >+ <div class="container"> >+ <table><tr><td>1</td><td>2</td></tr></table> >+ </div> >+ <div class="container"> >+ <table><tr><td>1</td><td>2</td></tr></table> >+ </div> >+</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001.html >new file mode 100644 >index 0000000000000000000000000000000000000000..b578b233405fdc164be5c26456f8bc1d558cf85c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001.html >@@ -0,0 +1,36 @@ >+<!DOCTYPE html> >+<meta charset="utf-8"> >+<title>Flexbox Test: display:table flex items with percent-width cells and content keywords for used flex-basis</title> >+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-flex-basis-content"> >+<link rel="match" href="table-as-item-percent-width-cell-001-ref.html"> >+<meta name="assert" content="If a table as a flex item has used 'flex-basis:content' (or another content-based keyword), and default flex factors, and plenty of space, then it should be sized similarly to a table with 'width:max-content' in a block formatting context."> >+<style> >+ .container { >+ display: flex; >+ width: 200px; >+ border: 1px solid black; >+ } >+ td { >+ background-color: cyan; >+ width: 100%; >+ border: 1px solid gray; >+ } >+ >+</style> >+<body> >+ <div class="container"> >+ <!-- The used value of flex-basis is 'content' here, due to the flex-basis >+ and the main-size property both having the value 'auto'. --> >+ <table><tr><td>1</td><td>2</td></tr></table> >+ </div> >+ <div class="container"> >+ <table style="flex-basis: content"><tr><td>1</td><td>2</td></tr></table> >+ </div> >+ <div class="container"> >+ <table style="flex-basis: min-content"><tr><td>1</td><td>2</td></tr></table> >+ </div> >+ <div class="container"> >+ <table style="flex-basis: max-content"><tr><td>1</td><td>2</td></tr></table> >+ </div> >+</body> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-width-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-width-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..82fcaa3b2aa4a271db14feb00256d0aedbce2d85 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-width-expected.html >@@ -0,0 +1,4 @@ >+<!DOCTYPE html> >+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> >+<p>Test passes if there is a filled green square.</p> >+<div style="width:100px; height:100px; background:green;"></div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-width.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-width.html >new file mode 100644 >index 0000000000000000000000000000000000000000..a4b370eb254dd84eaa90fcc4a658d101b681655c >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-width.html >@@ -0,0 +1,15 @@ >+<!DOCTYPE html> >+<title>table is flex item</title> >+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> >+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm" title="9. Flex Layout Algorithm"> >+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#used-min-width-of-table"> >+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> >+<meta name="assert" content="Table's specified width does not count as another min-width for the purposes of the flexbox algorithm."> >+ >+<p>Test passes if there is a filled green square.</p> >+ >+<!-- This test passed until Chrome 84 but has been broken since. Firefox also fails it. --> >+ >+<div style="display: flex;"> >+ <div style="display: table; width: 500px; height: 100px; background: green; flex: 0 0 100px;"></div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size-expected.xht b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size-expected.xht >new file mode 100644 >index 0000000000000000000000000000000000000000..05a13794482a94f6c10bd9d4c98704e63ef60331 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size-expected.xht >@@ -0,0 +1,19 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml"> >+ <head> >+ <title>CSS Reftest Reference</title> >+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> >+ <style type="text/css"><![CDATA[ >+ div >+ { >+ background-color: green; >+ height: 100px; >+ width: 100px; >+ } >+ ]]></style> >+ </head> >+ <body> >+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+ <div></div> >+ </body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size.html >new file mode 100644 >index 0000000000000000000000000000000000000000..06d685be8b4ad3ab84790d62b60fcf7abf19042b >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size.html >@@ -0,0 +1,12 @@ >+<!DOCTYPE html> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-stretch"> >+<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> >+<meta name="assert" content="The table's cross-axis (block-size) is stretched."> >+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> >+<div style="display: flex; width: 100px; height: 100px; background: red;"> >+ <table style="border-spacing: 0; flex-grow: 1;"> >+ <caption style="height: 10px; background: green;"></caption> >+ <caption style="height: 20px; background: green; caption-side: bottom;"></caption> >+ <td style="background: green;"></td> >+ </table> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width-expected.html >new file mode 100644 >index 0000000000000000000000000000000000000000..e598475fddf54274f93609de94b0f950618bc8e2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width-expected.html >@@ -0,0 +1,140 @@ >+<!doctype html> >+<title>Reference: display:table flex items with flex-shrink/flex-grow/flex-basis</title> >+<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006"> >+<link rel="stylesheet" href="/fonts/ahem.css"> >+<style> >+ html,body { >+ color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; >+ } >+ >+ .container { >+ display: flex; >+ width: 180px; >+ border: 1px solid blue; >+ } >+ >+ .container > * { >+ background-color: cyan; >+ display: block; >+ } >+ .test1 > * { >+ flex-shrink: 0; >+ width: 100%; >+ } >+ .test2 > * { >+ flex-shrink: 0; >+ width: 50%; >+ } >+ .test3 > * { >+ flex-shrink: 0.5; >+ width: 50%; >+ } >+ .test4 > * { >+ flex-grow: 0.1; >+ width: 50%; >+ } >+ .test5 > * { >+ flex-shrink: 0.2; >+ flex-grow: 0.5; >+ width: 10%; >+ } >+ .base > * { >+ flex-basis: 100px; >+ } >+ .large-base { >+ width: 100px; >+ } >+ .large-base > * { >+ flex-basis: 200px; >+ } >+</style> >+ >+<div class="container test1"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test2"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test3"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test4"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test5"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test1 base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test2 base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test3 base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test4 base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test5 base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test1 large-base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test2 large-base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test3 large-base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test4 large-base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test5 large-base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width.html >new file mode 100644 >index 0000000000000000000000000000000000000000..f21b5f0c6562c3970ae95202f5e3adf7a3deb489 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width.html >@@ -0,0 +1,144 @@ >+<!doctype html> >+<title>Flexbox Test: display:table flex items with flex-shrink/flex-grow/flex-basis</title> >+<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006"> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> >+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006"> >+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1454330"> >+<link rel="match" href="table-item-flex-percentage-width-ref.html"> >+<link rel="stylesheet" href="/fonts/ahem.css"> >+<style> >+ html,body { >+ color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; >+ } >+ >+ .container { >+ display: flex; >+ width: 180px; >+ border: 1px solid blue; >+ } >+ >+ .container > * { >+ background-color: cyan; >+ display: table; >+ } >+ .test1 > * { >+ flex-shrink: 0; >+ width: 100%; >+ } >+ .test2 > * { >+ flex-shrink: 0; >+ width: 50%; >+ } >+ .test3 > * { >+ flex-shrink: 0.5; >+ width: 50%; >+ } >+ .test4 > * { >+ flex-grow: 0.1; >+ width: 50%; >+ } >+ .test5 > * { >+ flex-shrink: 0.2; >+ flex-grow: 0.5; >+ width: 10%; >+ } >+ .base > * { >+ flex-basis: 100px; >+ } >+ .large-base { >+ width: 100px; >+ } >+ .large-base > * { >+ flex-basis: 200px; >+ } >+</style> >+ >+<div class="container test1"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test2"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test3"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test4"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test5"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test1 base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test2 base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test3 base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test4 base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test5 base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test1 large-base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test2 large-base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test3 large-base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test4 large-base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >+ >+<div class="container test5 large-base"> >+ <div>1</div> >+ <div>2</div> >+ <div>3</div> >+</div> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width-expected.txt >new file mode 100644 >index 0000000000000000000000000000000000000000..ce85682ccf1f91ad88ab6bc92a17e87bb17bb098 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width-expected.txt >@@ -0,0 +1,28 @@ >+ >+FAIL table 1 assert_equals: >+<div class="container"> >+ <div class="left"> >+ </div> >+ <table style="width:100%" data-expected-width="100"> >+ <tbody><tr><td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td> >+ </tr></tbody></table> >+</div> >+width expected 100 but got 200 >+FAIL table 2 assert_equals: >+<div class="container"> >+ <div class="left"> >+ </div> >+ <table style="width:70%; flex-basis: 200px" data-expected-width="100"> >+ <tbody><tr><td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width="20"><div class="spacer"></div><div class="spacer"></div></td> >+ </tr></tbody></table> >+</div> >+width expected 100 but got 140 >+ >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width.html >new file mode 100644 >index 0000000000000000000000000000000000000000..e0cd66dd8402105636ba41f70736fbc84a81b0f2 >--- /dev/null >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width.html >@@ -0,0 +1,67 @@ >+<!DOCTYPE html> >+<html> >+<head> >+<title>CSS Flexbox: table descendants</title> >+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> >+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1123100"> >+<meta name="assert" content="Percentage sized flex table does not use percent for intrinsic, or layout size."> >+<script src="/resources/testharness.js"></script> >+<script src="/resources/testharnessreport.js"></script> >+<script src="/resources/check-layout-th.js"></script> >+<style> >+ .container { >+ display:flex; >+ width: 200px; >+ } >+ .left { >+ width:200px; >+ background:yellow; >+ } >+ main table { >+ border-spacing: 0; >+ background: red; >+ } >+ .spacer { >+ display:inline-block; >+ width: 10px; >+ height: 10px; >+ background: green; >+ } >+ main td { >+ padding: 0; >+ } >+</style> >+</head> >+<body> >+<main> >+<div class="container"> >+ <div class="left"> >+ </div> >+ <table style="width:100%" data-expected-width=100> >+ <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> >+ </table> >+</div> >+ >+<div class="container"> >+ <div class="left"> >+ </div> >+ <table style="width:70%; flex-basis: 200px" data-expected-width=100> >+ <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> >+ <td data-expected-width=20><div class="spacer"></div><div class="spacer"></div></td> >+ </table> >+</div> >+</main> >+<div id=log></div> >+ >+<script> >+ checkLayout("table"); >+</script> >+</body> >+</html> >diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/w3c-import.log >index d00b17b480390920d8bd5951a6eef7baee4c20af..e9a274d33db0d7d79a60797a312eed1fd66864d1 100644 >--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/w3c-import.log >+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/w3c-import.log >@@ -14,22 +14,7 @@ Property values requiring vendor prefixes: > None > ------------------------------------------------------------------------ > List of files: >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/Flexible-order-expected.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/Flexible-order.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/META.yml >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-ltr.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-rtl-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-htb-rtl.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-ltr-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-ltr.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-rtl-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vlr-rtl.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-ltr-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-ltr.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-rtl-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-autopos-vrl-rtl.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos-descendent-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-baseline-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-baseline.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-001-expected.html >@@ -44,6 +29,13 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-005.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-006-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-006.htm >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-horiz-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-vert-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wmvert-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wrap-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wrap-002.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-content-wrap-003.html >@@ -134,10 +126,15 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/auto-margins-003.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/box-sizing-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/box-sizing-min-max-sizes-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-001-print-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-001-print.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-002-print-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/break-nested-float-in-flex-item-002-print.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/canvas-dynamic-change-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/change-column-flex-width.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/column-flex-child-with-overflow-scroll.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/columns-height-set-via-top-bottom.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/contain-size-layout-abspos-flex-container-crash.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/content-height-with-scrollbars-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/content-height-with-scrollbars.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/cross-axis-scrollbar-expected.html >@@ -178,12 +175,19 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/display-flex-001.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/display_flex_exist.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/display_inline-flex_exist.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change-nested.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-baseline-change.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-bsize-change-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-bsize-change.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-change-simplified-layout-002-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-change-simplified-layout-002.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-change-simplified-layout-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-change-simplified-layout.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/dynamic-grid-flex-abspos.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fieldset-as-item-overflow-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fieldset-as-item-overflow.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fit-content-item-001-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fit-content-item-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/fit-content-item-002-expected.html >@@ -243,6 +247,8 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-016-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-016.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-017.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-018-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-column-018.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-001-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-002-expected.xht >@@ -269,6 +275,8 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-013.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-014-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-014.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-base-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-base.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-basis-001-expected.xht >@@ -371,6 +379,10 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-inline.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-and-percentage-abspos-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-and-percentage-abspos.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-size-layout-001-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-size-layout-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-contains-strict.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-vertical-align-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-vertical-align.html >@@ -423,8 +435,20 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-023.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-024-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-024.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-025.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-026.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-027-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-027.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-028-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-028.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-029.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-030-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-height-flex-items-030.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-size-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-size-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-size-003.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-001-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-001.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-002-expected.xht >@@ -452,6 +476,10 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-013-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-013.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-014.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-015.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-016-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-minimum-width-flex-items-016.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-order-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-order.html >@@ -486,6 +514,192 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-wrap-005.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-wrap-006-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-wrap-006.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-items-center-nested-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-items-center-nested-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-002.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-003.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-004.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-005.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-block-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-block.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-table-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-001-table.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-003-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-003.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-004-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-004.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-005-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-005.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-stretch-vert-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-002.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-003-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-003.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-004-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-004.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-002.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-003-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-003.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-004-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-004.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-vert-rtl-005.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-anonymous-items-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-anonymous-items-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-horiz-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-align-self-baseline-vert-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-empty-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-horiz-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-item-vert-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-horiz-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-single-item-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001v-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-horiz-001v.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001v-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-block-vert-001v.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-horiz-001v.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-canvas-vert-001v.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-horiz-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-vert-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-fieldset-vert-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-horiz-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-horiz-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-iframe-vert-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-horiz-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-horiz-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-img-vert-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-horiz-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-horiz-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-textarea-vert-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-horiz-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-horiz-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-basic-video-vert-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-horiz-002b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-break-request-vert-002b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-baseline-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-collapsed-item-horiz-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-column-row-gap-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-005-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-005.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-006-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-definite-sizes-006.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-dyn-resize-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-dyn-resize-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-002b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-003b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-basis-content-004b.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-direction-column-expected.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-direction-column-percentage-ignored-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-direction-column-percentage-ignored.html >@@ -498,26 +712,214 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-direction-row-reverse-expected.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-direction-row-reverse.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-direction-row.htm >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-flow-002.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-default-expected.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-default.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-flexing-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-flexing.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-horiz-002.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-nowrap-expected.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-nowrap.htm >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-vert-002.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-wrap-expected.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-wrap-reverse-expected.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-wrap-reverse.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-flex-wrap-wrap.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-gap-position-absolute-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-gap-position-absolute.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-002.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-004-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-004.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001a-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001a.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001b-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-001b.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-002.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-003-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-003.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-004-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-004.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-005-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-005.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-margin-auto-horiz-002.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-reverse.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001-rtl.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002a-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002a.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002b-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002b.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002v-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-002v.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003-reverse.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003v-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-003v.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-004-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-mbp-horiz-004.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-002c.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-height-auto-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-002c.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-min-width-auto-004.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-order-from-lowest.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-order-only-flexitems-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-order-only-flexitems.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-005-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-horiz-005.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-005-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-overflow-vert-005.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001a-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001a.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001b-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-root-node-001b.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-1-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-1.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-2-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-2.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-3-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-single-line-clamp-3.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-horiz-002.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-sizing-vert-002.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-table-fixup-001-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-table-fixup-001.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001a-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001b-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-002-expected.xhtml >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-whitespace-handling-002.xhtml > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-multi-column-property-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-multi-column-property.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_absolute-atomic-expected.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_absolute-atomic.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-with-pseudo-elements-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-004-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-005-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-005.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-006-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-006.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-007-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-007.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-008-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-008.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-009-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-009.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-010-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-010.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-011-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-011.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-012-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-012.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-013-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-013.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-014-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-014.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-015-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-015.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-016-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-016.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_align-content-center-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_align-content-center.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_align-content-flexend-expected.html >@@ -807,8 +1209,6 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_generated-nested-flex-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_generated-nested-flex.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_generated.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-abspos-expected.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-abspos.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-float-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_inline-float.html >@@ -824,7 +1224,6 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_item-vertical-align-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_item-vertical-align.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-expected.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center-overflow.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-center.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-flex-end-expected.html >@@ -921,6 +1320,8 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexible-box-float-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexible-box-float.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexible-order-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexible-order.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexitem-no-margin-collapsing.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexitem-stretch-image.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flexitem-stretch-range-expected.html >@@ -1011,6 +1412,11 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-003.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-004-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-005-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-005.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-006-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/grid-flex-item-006.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/height-percentage-with-dynamic-container-size.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/hittest-anonymous-box.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/hittest-before-pseudo.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/hittest-overlapping-margin.html >@@ -1055,6 +1461,7 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-004.htm > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-005-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-005.htm >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content-006.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content_center.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content_flex-end.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/justify-content_flex-start.html >@@ -1088,6 +1495,8 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/order-painting-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/order-painting.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/order_value.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/ortho-table-item-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/ortho-table-item-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/orthogonal-flex-item-crash.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/overflow-area-001-expected.html >@@ -1136,37 +1545,28 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-margins-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-001-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-002-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-003-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-height-003.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-max-width-cross-axis.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-padding-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks-002.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-subitems-001-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-subitems-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-size.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-widths-001-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-widths-001.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-001.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-002.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-003.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-004.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-005-expected.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-005.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-006-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-006.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-007-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-007.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-008-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-008.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-009-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-009.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-010-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-010.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-011-expected.xht >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-011.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-012.html >-/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-013.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-scrollbar-freeze-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-absolute-scrollbar-freeze.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-fixed-001-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-fixed-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-002-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-003-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-percentage-top-003.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/position-relative-with-scrollable-with-abspos-crash.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/radiobutton-min-size.html >@@ -1175,8 +1575,11 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/relayout-input.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/remove-out-of-flow-child-crash.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto-min-content-sizing.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-auto.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-no-margin-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars-no-margin.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/scrollbars.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/select-element-zero-height-001-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/select-element-zero-height-001.html >@@ -1197,21 +1600,45 @@ List of files: > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/stretching-orthogonal-flows.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-001-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-003.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-004-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-004.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-005-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-005.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-006.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-auto-min-width-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-auto-min-width.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-change-cell-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-change-cell.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-cross-size.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-2-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-2.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-3.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-fixed-min-width.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-flex-cross-size.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-narrow-content-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-narrow-content.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-percent-width-cell-001.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-width-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-specified-width.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size-expected.xht >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-stretch-cross-size.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-wide-content-expected.xht > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-wide-content.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width-expected.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-item-flex-percentage-width.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-float-paint-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-float-paint.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-infinite-max-intrinsic-width-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-infinite-max-intrinsic-width.html >+/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/table-with-percent-intrinsic-width.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/text-overflow-on-flexbox-001-expected.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/text-overflow-on-flexbox-001.html > /LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/whitespace-in-flexitem-001-expected.html >diff --git a/LayoutTests/platform/glib/TestExpectations b/LayoutTests/platform/glib/TestExpectations >index aa03e8bb684ac4fa3a7ffdf39d979f71f08ea91c..794dd473f124ea8b73fdda83c9b907ce4fb72119 100644 >--- a/LayoutTests/platform/glib/TestExpectations >+++ b/LayoutTests/platform/glib/TestExpectations >@@ -353,9 +353,6 @@ webkit.org/b/169007 imported/w3c/web-platform-tests/css/css-flexbox/flex-item-co > > webkit.org/b/216767 css3/font-feature-settings-stylistic-set.html [ ImageOnlyFailure ] > >-webkit.org/b/216770 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline-2.html [ ImageOnlyFailure ] >-webkit.org/b/216770 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_stf-table-singleline.html [ ImageOnlyFailure ] >- > webkit.org/b/216853 css3/font-synthesis-small-caps.html [ ImageOnlyFailure ] > > webkit.org/b/216292 [ Release ] imported/w3c/web-platform-tests/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html [ Pass Failure ]
<b>You cannot view the attachment while viewing its details because your browser does not support IFRAMEs. <a href="attachment.cgi?id=419420">View the attachment on a separate page</a>.</b>
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 221484
:
419420
|
419692
|
419712