From abd24d001dfeb45172a1508e69273606ff18ff54 Mon Sep 17 00:00:00 2001
From: Andreas Kling <andreas@ladybird.org>
Date: Mon, 28 Oct 2024 21:03:26 +0100
Subject: [PATCH] Tests: Import a bunch of WPT tests from /css/css-flexbox

---
 .../abspos/abspos-descendent-001.txt          |  11 +
 ...lex-abspos-staticpos-align-content-001.txt |  34 +
 .../flex-abspos-staticpos-align-self-001.txt  |  35 +
 .../flex-abspos-staticpos-align-self-002.txt  |  35 +
 .../flex-abspos-staticpos-align-self-003.txt  |  35 +
 .../flex-abspos-staticpos-align-self-004.txt  |  35 +
 .../flex-abspos-staticpos-align-self-005.txt  |  35 +
 .../flex-abspos-staticpos-align-self-006.txt  |  35 +
 .../flex-abspos-staticpos-align-self-007.txt  |  35 +
 .../flex-abspos-staticpos-align-self-008.txt  |  35 +
 ...ex-abspos-staticpos-align-self-rtl-001.txt |  35 +
 ...ex-abspos-staticpos-align-self-rtl-002.txt |  35 +
 ...ex-abspos-staticpos-align-self-rtl-003.txt |  35 +
 ...ex-abspos-staticpos-align-self-rtl-004.txt |  35 +
 ...abspos-staticpos-align-self-vertWM-001.txt |  39 +
 ...abspos-staticpos-align-self-vertWM-002.txt |  39 +
 ...abspos-staticpos-align-self-vertWM-003.txt |  34 +
 ...abspos-staticpos-align-self-vertWM-004.txt |  35 +
 ...x-abspos-staticpos-justify-content-001.txt |  34 +
 ...x-abspos-staticpos-justify-content-002.txt |  34 +
 ...x-abspos-staticpos-justify-content-003.txt |  34 +
 ...x-abspos-staticpos-justify-content-004.txt |  34 +
 ...x-abspos-staticpos-justify-content-005.txt |  35 +
 ...x-abspos-staticpos-justify-content-006.txt |  34 +
 ...x-abspos-staticpos-justify-content-007.txt |  35 +
 ...x-abspos-staticpos-justify-content-008.txt |  34 +
 ...spos-staticpos-justify-content-rtl-001.txt |  35 +
 ...spos-staticpos-justify-content-rtl-002.txt |  34 +
 ...s-staticpos-justify-content-vertWM-001.txt |  34 +
 ...s-staticpos-justify-content-vertWM-002.txt |  35 +
 .../abspos/position-absolute-001.txt          | 131 ++++
 .../abspos/position-absolute-002.txt          |  29 +
 .../abspos/position-absolute-003.txt          |  27 +
 .../abspos/position-absolute-004.txt          |  11 +
 .../abspos/position-absolute-012.txt          | 107 +++
 .../abspos/position-absolute-014.txt          |  11 +
 .../abspos/position-absolute-015.txt          |  11 +
 .../css-flexbox/align-content-horiz-001a.txt  |  83 ++
 .../css-flexbox/align-content-horiz-001b.txt  |  83 ++
 .../css-flexbox/align-content-horiz-002.txt   |  83 ++
 .../css-flexbox/align-content-vert-001a.txt   |  83 ++
 .../css-flexbox/align-content-vert-001b.txt   |  83 ++
 .../css-flexbox/align-content-vert-002.txt    |  83 ++
 .../css-flexbox/align-content-wmvert-001.txt  |  83 ++
 .../css-flexbox/align-content-wrap-001.txt    |  24 +
 .../css-flexbox/align-content-wrap-002.txt    |  16 +
 .../css-flexbox/align-content-wrap-003.txt    |  55 ++
 .../css-flexbox/align-content-wrap-005.txt    |  18 +
 ...s-baseline-column-vert-lr-flexbox-item.txt |  13 +
 ...tems-baseline-column-vert-lr-grid-item.txt |  13 +
 ...gn-items-baseline-column-vert-lr-items.txt |  13 +
 ...ems-baseline-column-vert-lr-table-item.txt |  13 +
 ...s-baseline-column-vert-rl-flexbox-item.txt |  12 +
 ...tems-baseline-column-vert-rl-grid-item.txt |  12 +
 ...gn-items-baseline-column-vert-rl-items.txt |  12 +
 ...ems-baseline-column-vert-rl-table-item.txt |  12 +
 ...eline-vert-lr-column-horz-flexbox-item.txt |  13 +
 ...baseline-vert-lr-column-horz-grid-item.txt |  13 +
 ...ems-baseline-vert-lr-column-horz-items.txt |  13 +
 ...aseline-vert-lr-column-horz-table-item.txt |  11 +
 ...eline-vert-rl-column-horz-flexbox-item.txt |  13 +
 ...baseline-vert-rl-column-horz-grid-item.txt |  13 +
 ...ems-baseline-vert-rl-column-horz-items.txt |  13 +
 ...aseline-vert-rl-column-horz-table-item.txt |  11 +
 .../css/css-flexbox/align-self-014.txt        |  11 +
 .../alignment/flex-align-baseline-001.txt     |  17 +
 .../alignment/flex-align-baseline-002.txt     |  16 +
 .../alignment/flex-align-baseline-003.txt     |  16 +
 .../alignment/flex-align-baseline-004.txt     |  17 +
 .../alignment/flex-align-baseline-005.txt     |  14 +
 .../alignment/flex-align-baseline-006.txt     |  13 +
 .../alignment/flex-align-baseline-007.txt     |  13 +
 .../flex-align-baseline-fieldset-001.txt      |  15 +
 .../flex-align-baseline-fieldset-002.txt      |  14 +
 .../flex-align-baseline-fieldset-003.txt      |  14 +
 .../flex-align-baseline-flex-001.txt          |  59 ++
 .../flex-align-baseline-flex-002.txt          |  58 ++
 .../flex-align-baseline-flex-003.txt          |  27 +
 .../flex-align-baseline-flex-004.txt          |  26 +
 .../flex-align-baseline-grid-001.txt          |  23 +
 .../flex-align-baseline-grid-002.txt          |  22 +
 .../flex-align-baseline-grid-003.txt          |  22 +
 ...lign-baseline-line-clamp-001.tentative.txt |  35 +
 ...lign-baseline-line-clamp-002.tentative.txt |  34 +
 ...lign-baseline-line-clamp-003.tentative.txt |  34 +
 .../flex-align-baseline-multicol-001.txt      |  23 +
 .../flex-align-baseline-multicol-002.txt      |  22 +
 .../flex-align-baseline-multicol-003.txt      |  22 +
 .../flex-align-baseline-overflow-001.txt      |  23 +
 .../flex-align-baseline-overflow-002.txt      |  23 +
 .../flex-align-baseline-overflow-003.txt      |  23 +
 .../flex-align-baseline-table-001.txt         |  19 +
 .../flex-align-baseline-table-002.txt         |  14 +
 .../flex-align-baseline-table-003.txt         |  14 +
 .../css/css-flexbox/box-sizing-001.txt        |  20 +
 .../box-sizing-min-max-sizes-001.txt          |  12 +
 .../css-flexbox/canvas-dynamic-change-001.txt |  11 +
 .../css-flexbox/change-column-flex-width.txt  |  11 +
 ...column-flex-child-with-overflow-scroll.txt |  12 +
 .../css/css-flexbox/column-reverse-gap.txt    |  11 +
 .../columns-height-set-via-top-bottom.txt     |  12 +
 .../css-flexbox/dynamic-grid-flex-abspos.txt  |  19 +
 ...-as-container-justify-center.tentative.txt |  11 +
 .../flex-aspect-ratio-img-column-011.txt      |  21 +
 .../flex-aspect-ratio-img-column-017.txt      |  11 +
 .../flex-aspect-ratio-img-row-005.txt         |  15 +
 .../flex-aspect-ratio-img-row-013.txt         |  15 +
 .../css/css-flexbox/flex-basis-009.txt        |  11 +
 .../flex-column-relayout-assert.txt           |  11 +
 .../flex-direction-column-overlap-001.txt     |  11 +
 .../css-flexbox/flex-factor-less-than-one.txt |  33 +
 .../css/css-flexbox/flex-flow-013.txt         |  23 +
 .../flex-item-compressible-001.txt            |  26 +
 .../flex-item-compressible-002.txt            |  26 +
 .../css-flexbox/flex-item-contains-strict.txt |  19 +
 .../flex-minimum-height-flex-items-009.txt    |  12 +
 .../flex-minimum-height-flex-items-010.txt    |  12 +
 .../flex-minimum-height-flex-items-012.txt    |  11 +
 .../flex-minimum-height-flex-items-025.txt    |  15 +
 .../flex-minimum-height-flex-items-031.txt    |  83 ++
 .../css/css-flexbox/flex-minimum-size-001.txt |  16 +
 .../css/css-flexbox/flex-minimum-size-002.txt |  11 +
 .../css/css-flexbox/flex-minimum-size-003.txt |  12 +
 .../flex-minimum-width-flex-items-014.txt     |  16 +
 .../flex-one-sets-flex-basis-to-zero-px.txt   |  29 +
 ...olumn-recalculate-height-on-resize-001.txt |  11 +
 .../flex-shorthand-flex-basis-middle.txt      |  12 +
 .../flexbox-justify-content-wmvert-002.txt    |  15 +
 .../flexbox-justify-content-wmvert-003.txt    |  15 +
 ...box-lines-must-be-stretched-by-default.txt |  11 +
 .../css/css-flexbox/flexbox_first-letter.txt  |  11 +
 ...flexbox_justifycontent-center-overflow.txt |  13 +
 .../flexbox_justifycontent-rtl-001.txt        |  23 +
 .../flexbox_justifycontent-rtl-002.txt        |  22 +
 ...box_width-change-and-relayout-children.txt |  11 +
 .../flexbox_width-wrapping-column.txt         |  11 +
 .../flexitem-no-margin-collapsing.txt         |  11 +
 .../css-flexbox/flexitem-stretch-image.txt    |  11 +
 .../wpt-import/css/css-flexbox/gap-017.txt    |  11 +
 .../wpt-import/css/css-flexbox/gap-018.txt    |  11 +
 ...box_computedstyle_align-content-center.txt |  11 +
 ...x_computedstyle_align-content-flex-end.txt |  11 +
 ...computedstyle_align-content-flex-start.txt |  11 +
 ...mputedstyle_align-content-space-around.txt |  11 +
 ...putedstyle_align-content-space-between.txt |  11 +
 ...box_computedstyle_align-items-baseline.txt |  11 +
 ...exbox_computedstyle_align-items-center.txt |  11 +
 ...box_computedstyle_align-items-flex-end.txt |  11 +
 ...x_computedstyle_align-items-flex-start.txt |  11 +
 ...xbox_computedstyle_align-items-invalid.txt |  11 +
 ...xbox_computedstyle_align-items-stretch.txt |  11 +
 ...xbox_computedstyle_align-self-baseline.txt |  11 +
 ...lexbox_computedstyle_align-self-center.txt |  11 +
 ...xbox_computedstyle_align-self-flex-end.txt |  11 +
 ...ox_computedstyle_align-self-flex-start.txt |  11 +
 ...exbox_computedstyle_align-self-invalid.txt |  11 +
 ...exbox_computedstyle_align-self-stretch.txt |  11 +
 .../flexbox_computedstyle_display-inline.txt  |  11 +
 .../flexbox_computedstyle_display.txt         |  11 +
 .../flexbox_computedstyle_flex-basis-0.txt    |  11 +
 ...xbox_computedstyle_flex-basis-0percent.txt |  11 +
 .../flexbox_computedstyle_flex-basis-auto.txt |  11 +
 ...exbox_computedstyle_flex-basis-percent.txt |  11 +
 ...tedstyle_flex-direction-column-reverse.txt |  11 +
 ...ox_computedstyle_flex-direction-column.txt |  11 +
 ...x_computedstyle_flex-direction-invalid.txt |  11 +
 ...mputedstyle_flex-direction-row-reverse.txt |  11 +
 ...exbox_computedstyle_flex-direction-row.txt |  11 +
 ..._computedstyle_flex-flow-column-nowrap.txt |  11 +
 ...dstyle_flex-flow-column-reverse-nowrap.txt |  11 +
 ...tedstyle_flex-flow-column-reverse-wrap.txt |  11 +
 ...computedstyle_flex-flow-column-reverse.txt |  11 +
 ...tedstyle_flex-flow-column-wrap-reverse.txt |  11 +
 ...ox_computedstyle_flex-flow-column-wrap.txt |  11 +
 ...flexbox_computedstyle_flex-flow-column.txt |  11 +
 ...flexbox_computedstyle_flex-flow-nowrap.txt |  11 +
 ...box_computedstyle_flex-flow-row-nowrap.txt |  11 +
 ...utedstyle_flex-flow-row-reverse-nowrap.txt |  11 +
 ...yle_flex-flow-row-reverse-wrap-reverse.txt |  11 +
 ...mputedstyle_flex-flow-row-reverse-wrap.txt |  11 +
 ...ox_computedstyle_flex-flow-row-reverse.txt |  11 +
 ...mputedstyle_flex-flow-row-wrap-reverse.txt |  11 +
 ...exbox_computedstyle_flex-flow-row-wrap.txt |  11 +
 .../flexbox_computedstyle_flex-flow-row.txt   |  11 +
 .../flexbox_computedstyle_flex-flow-wrap.txt  |  11 +
 .../flexbox_computedstyle_flex-grow-0.txt     |  11 +
 ...lexbox_computedstyle_flex-grow-invalid.txt |  11 +
 ...flexbox_computedstyle_flex-grow-number.txt |  11 +
 ...ox_computedstyle_flex-shorthand-0-auto.txt |  11 +
 ...xbox_computedstyle_flex-shorthand-auto.txt |  11 +
 ...x_computedstyle_flex-shorthand-initial.txt |  11 +
 ...x_computedstyle_flex-shorthand-invalid.txt |  11 +
 ...xbox_computedstyle_flex-shorthand-none.txt |  11 +
 ...ox_computedstyle_flex-shorthand-number.txt |  11 +
 .../flexbox_computedstyle_flex-shorthand.txt  |  11 +
 .../flexbox_computedstyle_flex-shrink-0.txt   |  11 +
 ...xbox_computedstyle_flex-shrink-invalid.txt |  11 +
 ...exbox_computedstyle_flex-shrink-number.txt |  11 +
 ...lexbox_computedstyle_flex-wrap-invalid.txt |  11 +
 ...flexbox_computedstyle_flex-wrap-nowrap.txt |  11 +
 ...x_computedstyle_flex-wrap-wrap-reverse.txt |  11 +
 .../flexbox_computedstyle_flex-wrap-wrap.txt  |  11 +
 ...x_computedstyle_justify-content-center.txt |  11 +
 ...computedstyle_justify-content-flex-end.txt |  11 +
 ...mputedstyle_justify-content-flex-start.txt |  11 +
 ...utedstyle_justify-content-space-around.txt |  11 +
 ...tedstyle_justify-content-space-between.txt |  11 +
 .../flexbox_computedstyle_min-auto-size.txt   |  15 +
 .../flexbox_computedstyle_min-height-auto.txt |  11 +
 .../flexbox_computedstyle_min-width-auto.txt  |  11 +
 .../flexbox_computedstyle_order-inherit.txt   |  11 +
 .../flexbox_computedstyle_order-integer.txt   |  11 +
 .../flexbox_computedstyle_order-invalid.txt   |  11 +
 .../flexbox_computedstyle_order-negative.txt  |  11 +
 .../flexbox_computedstyle_order.txt           |  11 +
 ...percentage-with-dynamic-container-size.txt |  13 +
 .../css/css-flexbox/hittest-anonymous-box.txt |  11 +
 .../css/css-flexbox/hittest-before-pseudo.txt |  11 +
 .../hittest-overlapping-margin.txt            |  11 +
 .../css-flexbox/hittest-overlapping-order.txt |  11 +
 .../hittest-overlapping-relative.txt          |  11 +
 .../image-as-flexitem-size-001.txt            |  29 +
 .../image-as-flexitem-size-001v.txt           |  29 +
 .../image-as-flexitem-size-002.txt            |  29 +
 .../image-as-flexitem-size-002v.txt           |  29 +
 .../image-as-flexitem-size-003.txt            |  29 +
 .../image-as-flexitem-size-003v.txt           |  29 +
 .../image-as-flexitem-size-004.txt            |  29 +
 .../image-as-flexitem-size-004v.txt           |  29 +
 .../image-as-flexitem-size-005.txt            |  29 +
 .../image-as-flexitem-size-005v.txt           |  29 +
 .../image-as-flexitem-size-006.txt            |  29 +
 .../image-as-flexitem-size-006v.txt           |  29 +
 .../image-as-flexitem-size-007.txt            |  29 +
 .../image-as-flexitem-size-007v.txt           |  29 +
 .../css/css-flexbox/inline-flex.txt           |  11 +
 ...xbox-wrap-vertically-width-calculation.txt |  27 +
 .../intrinsic-size/col-wrap-004.txt           |  11 +
 .../intrinsic-size/col-wrap-005.txt           |  11 +
 .../intrinsic-size/col-wrap-010.txt           |  11 +
 .../intrinsic-size/col-wrap-018.txt           |  11 +
 .../intrinsic-size/col-wrap-019.txt           |  11 +
 .../css-flexbox/intrinsic-size/row-005.txt    |  20 +
 .../css-flexbox/intrinsic-size/row-008.txt    |  21 +
 .../intrinsic-size/row-compat-001.txt         |  14 +
 .../intrinsic-size/row-use-cases-001.txt      |  17 +
 .../intrinsic-size/row-wrap-001.txt           |  16 +
 ...ntrinsic-width-orthogonal-writing-mode.txt |  14 +
 .../css/css-flexbox/justify-content-006.txt   |  11 +
 .../css/css-flexbox/justify-content-007.txt   |  11 +
 .../justify-content_space-between-002.txt     |  11 +
 .../layout-with-inline-svg-001.txt            |  11 +
 .../css/css-flexbox/max-width-violation.txt   |  12 +
 .../css/css-flexbox/multiline-min-max.txt     |  25 +
 .../multiline-min-preferred-width.txt         |  11 +
 .../css/css-flexbox/negative-overflow-002.txt |  82 ++
 .../css/css-flexbox/negative-overflow-003.txt |  58 ++
 .../css/css-flexbox/negative-overflow.txt     |  22 +
 .../css/css-flexbox/order_value.txt           |  11 +
 ...nal-writing-modes-and-intrinsic-sizing.txt |  12 +
 .../css/css-flexbox/overflow-auto-002.txt     |  11 +
 .../css/css-flexbox/overflow-auto-003.txt     |  11 +
 .../css/css-flexbox/overflow-auto-004.txt     |  11 +
 .../css/css-flexbox/overflow-auto-006.txt     |  20 +
 .../css/css-flexbox/overflow-auto-008.txt     |  11 +
 .../parsing/flex-basis-computed.txt           |  23 +
 .../parsing/flex-basis-invalid.txt            |  15 +
 .../css-flexbox/parsing/flex-basis-valid.txt  |  18 +
 .../css/css-flexbox/parsing/flex-computed.txt |  19 +
 .../parsing/flex-direction-computed.txt       |  14 +
 .../parsing/flex-direction-invalid.txt        |  12 +
 .../parsing/flex-direction-valid.txt          |  14 +
 .../parsing/flex-flow-computed.txt            |  12 +
 .../css-flexbox/parsing/flex-flow-invalid.txt |  12 +
 .../parsing/flex-flow-shorthand.txt           |  16 +
 .../css-flexbox/parsing/flex-flow-valid.txt   |  18 +
 .../parsing/flex-grow-computed.txt            |  14 +
 .../css-flexbox/parsing/flex-grow-invalid.txt |  15 +
 .../css-flexbox/parsing/flex-grow-valid.txt   |  14 +
 .../css/css-flexbox/parsing/flex-invalid.txt  |  14 +
 .../css-flexbox/parsing/flex-shorthand.txt    |  50 ++
 .../parsing/flex-shrink-computed.txt          |  14 +
 .../parsing/flex-shrink-invalid.txt           |  15 +
 .../css-flexbox/parsing/flex-shrink-valid.txt |  14 +
 .../css/css-flexbox/parsing/flex-valid.txt    |  16 +
 .../parsing/flex-wrap-computed.txt            |  13 +
 .../css-flexbox/parsing/flex-wrap-invalid.txt |  12 +
 .../css-flexbox/parsing/flex-wrap-valid.txt   |  13 +
 .../css-flexbox/parsing/order-computed.txt    |  13 +
 .../css/css-flexbox/parsing/order-invalid.txt |  13 +
 .../css/css-flexbox/parsing/order-valid.txt   |  13 +
 .../css-flexbox/parsing/webkit-aliases.txt    |  23 +
 .../css-flexbox/percentage-heights-000.txt    |  17 +
 .../css-flexbox/percentage-heights-001.txt    |  24 +
 .../css-flexbox/percentage-heights-003.txt    |  18 +
 .../css-flexbox/percentage-heights-011.txt    |  11 +
 .../css-flexbox/percentage-heights-012.txt    |  21 +
 .../css-flexbox/percentage-heights-013.txt    |  14 +
 .../css-flexbox/percentage-margins-001.txt    |  13 +
 .../percentage-max-width-cross-axis.txt       |  12 +
 .../percentage-size-quirks-002.txt            |  13 +
 .../css-flexbox/percentage-size-quirks.txt    |  19 +
 .../css/css-flexbox/percentage-size.txt       |  19 +
 .../position-relative-percentage-top-001.txt  |  11 +
 ...s-auto-block-size-with-percentage-item.txt |  11 +
 .../css/css-flexbox/radiobutton-min-size.txt  |  11 +
 .../css/css-flexbox/relayout-align-items.txt  |  12 +
 .../css/css-flexbox/relayout-image-load.txt   |  11 +
 .../css/css-flexbox/relayout-input.txt        |  12 +
 .../scrollbars-auto-min-content-sizing.txt    |  11 +
 .../css-flexbox/shrinking-column-flexbox.txt  |  11 +
 .../stretch-after-sibling-size-change.txt     |  11 +
 .../stretched-child-shrink-on-relayout.txt    |  16 +
 .../css-flexbox/svg-root-as-flex-item-006.txt |  11 +
 .../table-with-percent-intrinsic-width.txt    |  12 +
 .../css-flexbox/text-as-flexitem-size-001.txt |  29 +
 .../input/wpt-import/css/css-flexbox/META.yml |   8 +
 .../css/css-flexbox/WEB_FEATURES.yml          |   7 +
 .../abspos/abspos-descendent-001.html         |  32 +
 ...ex-abspos-staticpos-align-content-001.html | 106 +++
 .../flex-abspos-staticpos-align-self-001.html |  98 +++
 .../flex-abspos-staticpos-align-self-002.html |  98 +++
 .../flex-abspos-staticpos-align-self-003.html |  98 +++
 .../flex-abspos-staticpos-align-self-004.html |  98 +++
 .../flex-abspos-staticpos-align-self-005.html |  98 +++
 .../flex-abspos-staticpos-align-self-006.html |  98 +++
 .../flex-abspos-staticpos-align-self-007.html |  98 +++
 .../flex-abspos-staticpos-align-self-008.html |  98 +++
 ...x-abspos-staticpos-align-self-rtl-001.html |  98 +++
 ...x-abspos-staticpos-align-self-rtl-002.html |  99 +++
 ...x-abspos-staticpos-align-self-rtl-003.html |  98 +++
 ...x-abspos-staticpos-align-self-rtl-004.html |  99 +++
 ...bspos-staticpos-align-self-vertWM-001.html | 102 +++
 ...bspos-staticpos-align-self-vertWM-002.html | 103 +++
 ...bspos-staticpos-align-self-vertWM-003.html |  98 +++
 ...bspos-staticpos-align-self-vertWM-004.html | 100 +++
 ...-abspos-staticpos-justify-content-001.html |  97 +++
 ...-abspos-staticpos-justify-content-002.html |  97 +++
 ...-abspos-staticpos-justify-content-003.html |  97 +++
 ...-abspos-staticpos-justify-content-004.html |  97 +++
 ...-abspos-staticpos-justify-content-005.html |  97 +++
 ...-abspos-staticpos-justify-content-006.html |  97 +++
 ...-abspos-staticpos-justify-content-007.html |  97 +++
 ...-abspos-staticpos-justify-content-008.html |  97 +++
 ...pos-staticpos-justify-content-rtl-001.html |  98 +++
 ...pos-staticpos-justify-content-rtl-002.html |  98 +++
 ...-staticpos-justify-content-vertWM-001.html |  98 +++
 ...-staticpos-justify-content-vertWM-002.html |  98 +++
 .../abspos/position-absolute-001.html         | 709 ++++++++++++++++++
 .../abspos/position-absolute-002.html         | 160 ++++
 .../abspos/position-absolute-003.html         |  96 +++
 .../abspos/position-absolute-004.html         |  44 ++
 .../abspos/position-absolute-012.html         | 116 +++
 .../abspos/position-absolute-014.html         |  82 ++
 .../abspos/position-absolute-015.html         |  19 +
 .../css-flexbox/align-content-horiz-001a.html | 182 +++++
 .../css-flexbox/align-content-horiz-001b.html | 183 +++++
 .../css-flexbox/align-content-horiz-002.html  | 182 +++++
 .../css-flexbox/align-content-vert-001a.html  | 182 +++++
 .../css-flexbox/align-content-vert-001b.html  | 183 +++++
 .../css-flexbox/align-content-vert-002.html   | 182 +++++
 .../css-flexbox/align-content-wmvert-001.html | 182 +++++
 .../css-flexbox/align-content-wrap-001.html   |  77 ++
 .../css-flexbox/align-content-wrap-002.html   | 108 +++
 .../css-flexbox/align-content-wrap-003.html   | 330 ++++++++
 .../css-flexbox/align-content-wrap-005.html   |  54 ++
 ...-baseline-column-vert-lr-flexbox-item.html |  42 ++
 ...ems-baseline-column-vert-lr-grid-item.html |  43 ++
 ...n-items-baseline-column-vert-lr-items.html |  35 +
 ...ms-baseline-column-vert-lr-table-item.html |  45 ++
 ...-baseline-column-vert-rl-flexbox-item.html |  44 ++
 ...ems-baseline-column-vert-rl-grid-item.html |  43 ++
 ...n-items-baseline-column-vert-rl-items.html |  35 +
 ...ms-baseline-column-vert-rl-table-item.html |  45 ++
 ...line-vert-lr-column-horz-flexbox-item.html |  42 ++
 ...aseline-vert-lr-column-horz-grid-item.html |  43 ++
 ...ms-baseline-vert-lr-column-horz-items.html |  35 +
 ...seline-vert-lr-column-horz-table-item.html |  45 ++
 ...line-vert-rl-column-horz-flexbox-item.html |  42 ++
 ...aseline-vert-rl-column-horz-grid-item.html |  43 ++
 ...ms-baseline-vert-rl-column-horz-items.html |  36 +
 ...seline-vert-rl-column-horz-table-item.html |  45 ++
 .../css/css-flexbox/align-self-014.html       |  44 ++
 .../alignment/flex-align-baseline-001.html    |  68 ++
 .../alignment/flex-align-baseline-002.html    |  68 ++
 .../alignment/flex-align-baseline-003.html    |  68 ++
 .../alignment/flex-align-baseline-004.html    |  69 ++
 .../alignment/flex-align-baseline-005.html    |  48 ++
 .../alignment/flex-align-baseline-006.html    |  52 ++
 .../alignment/flex-align-baseline-007.html    |  52 ++
 .../flex-align-baseline-fieldset-001.html     |  46 ++
 .../flex-align-baseline-fieldset-002.html     |  47 ++
 .../flex-align-baseline-fieldset-003.html     |  47 ++
 .../flex-align-baseline-flex-001.html         | 260 +++++++
 .../flex-align-baseline-flex-002.html         | 261 +++++++
 .../flex-align-baseline-flex-003.html         | 129 ++++
 .../flex-align-baseline-flex-004.html         | 130 ++++
 .../flex-align-baseline-grid-001.html         | 111 +++
 .../flex-align-baseline-grid-002.html         | 112 +++
 .../flex-align-baseline-grid-003.html         | 112 +++
 ...ign-baseline-line-clamp-001.tentative.html | 128 ++++
 ...ign-baseline-line-clamp-002.tentative.html | 129 ++++
 ...ign-baseline-line-clamp-003.tentative.html | 129 ++++
 .../flex-align-baseline-multicol-001.html     | 142 ++++
 .../flex-align-baseline-multicol-002.html     | 144 ++++
 .../flex-align-baseline-multicol-003.html     | 144 ++++
 .../flex-align-baseline-overflow-001.html     |  90 +++
 .../flex-align-baseline-overflow-002.html     |  91 +++
 .../flex-align-baseline-overflow-003.html     |  91 +++
 .../flex-align-baseline-table-001.html        |  95 +++
 .../flex-align-baseline-table-002.html        |  64 ++
 .../flex-align-baseline-table-003.html        |  64 ++
 .../css/css-flexbox/box-sizing-001.html       | 108 +++
 .../box-sizing-min-max-sizes-001.html         |  33 +
 .../canvas-dynamic-change-001.html            |  39 +
 .../css-flexbox/change-column-flex-width.html |  30 +
 ...olumn-flex-child-with-overflow-scroll.html |  38 +
 .../css/css-flexbox/column-reverse-gap.html   |  27 +
 .../columns-height-set-via-top-bottom.html    |  51 ++
 .../css-flexbox/dynamic-grid-flex-abspos.html |  82 ++
 ...as-container-justify-center.tentative.html |  46 ++
 .../flex-aspect-ratio-img-column-011.html     |  77 ++
 .../flex-aspect-ratio-img-column-017.html     |  34 +
 .../flex-aspect-ratio-img-row-005.html        |  53 ++
 .../flex-aspect-ratio-img-row-013.html        |  43 ++
 .../css/css-flexbox/flex-basis-009.html       |  41 +
 .../flex-column-relayout-assert.html          |  27 +
 .../flex-direction-column-overlap-001.html    |  56 ++
 .../flex-factor-less-than-one.html            | 180 +++++
 .../css/css-flexbox/flex-flow-013.html        | 158 ++++
 .../flex-item-compressible-001.html           | 149 ++++
 .../flex-item-compressible-002.html           | 151 ++++
 .../flex-item-contains-strict.html            |  56 ++
 .../flex-minimum-height-flex-items-009.html   |  62 ++
 .../flex-minimum-height-flex-items-010.html   |  64 ++
 .../flex-minimum-height-flex-items-012.html   |  37 +
 .../flex-minimum-height-flex-items-025.html   |  56 ++
 .../flex-minimum-height-flex-items-031.html   |  54 ++
 .../css-flexbox/flex-minimum-size-001.html    |  80 ++
 .../css-flexbox/flex-minimum-size-002.html    |  15 +
 .../css-flexbox/flex-minimum-size-003.html    |  23 +
 .../flex-minimum-width-flex-items-014.html    |  69 ++
 .../flex-one-sets-flex-basis-to-zero-px.html  | 153 ++++
 ...lumn-recalculate-height-on-resize-001.html |  74 ++
 .../flex-shorthand-flex-basis-middle.html     |  37 +
 .../flexbox-justify-content-wmvert-002.html   |  43 ++
 .../flexbox-justify-content-wmvert-003.html   |  43 ++
 ...ox-lines-must-be-stretched-by-default.html |  32 +
 .../css/css-flexbox/flexbox_first-letter.html |  20 +
 ...lexbox_justifycontent-center-overflow.html |  40 +
 .../flexbox_justifycontent-rtl-001.html       |  73 ++
 .../flexbox_justifycontent-rtl-002.html       |  73 ++
 ...ox_width-change-and-relayout-children.html |  42 ++
 .../flexbox_width-wrapping-column.html        |  44 ++
 .../flexitem-no-margin-collapsing.html        |  34 +
 .../css-flexbox/flexitem-stretch-image.html   |  35 +
 .../wpt-import/css/css-flexbox/gap-017.html   |  45 ++
 .../wpt-import/css/css-flexbox/gap-018.html   |  40 +
 ...ox_computedstyle_align-content-center.html |  22 +
 ..._computedstyle_align-content-flex-end.html |  22 +
 ...omputedstyle_align-content-flex-start.html |  22 +
 ...putedstyle_align-content-space-around.html |  22 +
 ...utedstyle_align-content-space-between.html |  22 +
 ...ox_computedstyle_align-items-baseline.html |  22 +
 ...xbox_computedstyle_align-items-center.html |  22 +
 ...ox_computedstyle_align-items-flex-end.html |  22 +
 ..._computedstyle_align-items-flex-start.html |  22 +
 ...box_computedstyle_align-items-invalid.html |  22 +
 ...box_computedstyle_align-items-stretch.html |  22 +
 ...box_computedstyle_align-self-baseline.html |  22 +
 ...exbox_computedstyle_align-self-center.html |  22 +
 ...box_computedstyle_align-self-flex-end.html |  22 +
 ...x_computedstyle_align-self-flex-start.html |  22 +
 ...xbox_computedstyle_align-self-invalid.html |  22 +
 ...xbox_computedstyle_align-self-stretch.html |  22 +
 .../flexbox_computedstyle_display-inline.html |  22 +
 .../flexbox_computedstyle_display.html        |  22 +
 .../flexbox_computedstyle_flex-basis-0.html   |  22 +
 ...box_computedstyle_flex-basis-0percent.html |  22 +
 ...flexbox_computedstyle_flex-basis-auto.html |  22 +
 ...xbox_computedstyle_flex-basis-percent.html |  27 +
 ...edstyle_flex-direction-column-reverse.html |  22 +
 ...x_computedstyle_flex-direction-column.html |  22 +
 ..._computedstyle_flex-direction-invalid.html |  22 +
 ...putedstyle_flex-direction-row-reverse.html |  22 +
 ...xbox_computedstyle_flex-direction-row.html |  22 +
 ...computedstyle_flex-flow-column-nowrap.html |  26 +
 ...style_flex-flow-column-reverse-nowrap.html |  26 +
 ...edstyle_flex-flow-column-reverse-wrap.html |  26 +
 ...omputedstyle_flex-flow-column-reverse.html |  25 +
 ...edstyle_flex-flow-column-wrap-reverse.html |  26 +
 ...x_computedstyle_flex-flow-column-wrap.html |  26 +
 ...lexbox_computedstyle_flex-flow-column.html |  25 +
 ...lexbox_computedstyle_flex-flow-nowrap.html |  25 +
 ...ox_computedstyle_flex-flow-row-nowrap.html |  26 +
 ...tedstyle_flex-flow-row-reverse-nowrap.html |  26 +
 ...le_flex-flow-row-reverse-wrap-reverse.html |  26 +
 ...putedstyle_flex-flow-row-reverse-wrap.html |  26 +
 ...x_computedstyle_flex-flow-row-reverse.html |  25 +
 ...putedstyle_flex-flow-row-wrap-reverse.html |  26 +
 ...xbox_computedstyle_flex-flow-row-wrap.html |  26 +
 .../flexbox_computedstyle_flex-flow-row.html  |  25 +
 .../flexbox_computedstyle_flex-flow-wrap.html |  25 +
 .../flexbox_computedstyle_flex-grow-0.html    |  22 +
 ...exbox_computedstyle_flex-grow-invalid.html |  22 +
 ...lexbox_computedstyle_flex-grow-number.html |  22 +
 ...x_computedstyle_flex-shorthand-0-auto.html |  26 +
 ...box_computedstyle_flex-shorthand-auto.html |  26 +
 ..._computedstyle_flex-shorthand-initial.html |  26 +
 ..._computedstyle_flex-shorthand-invalid.html |  26 +
 ...box_computedstyle_flex-shorthand-none.html |  26 +
 ...x_computedstyle_flex-shorthand-number.html |  26 +
 .../flexbox_computedstyle_flex-shorthand.html |  26 +
 .../flexbox_computedstyle_flex-shrink-0.html  |  22 +
 ...box_computedstyle_flex-shrink-invalid.html |  22 +
 ...xbox_computedstyle_flex-shrink-number.html |  22 +
 ...exbox_computedstyle_flex-wrap-invalid.html |  22 +
 ...lexbox_computedstyle_flex-wrap-nowrap.html |  22 +
 ..._computedstyle_flex-wrap-wrap-reverse.html |  22 +
 .../flexbox_computedstyle_flex-wrap-wrap.html |  22 +
 ..._computedstyle_justify-content-center.html |  22 +
 ...omputedstyle_justify-content-flex-end.html |  22 +
 ...putedstyle_justify-content-flex-start.html |  22 +
 ...tedstyle_justify-content-space-around.html |  22 +
 ...edstyle_justify-content-space-between.html |  22 +
 .../flexbox_computedstyle_min-auto-size.html  |  49 ++
 ...flexbox_computedstyle_min-height-auto.html |  26 +
 .../flexbox_computedstyle_min-width-auto.html |  25 +
 .../flexbox_computedstyle_order-inherit.html  |  25 +
 .../flexbox_computedstyle_order-integer.html  |  22 +
 .../flexbox_computedstyle_order-invalid.html  |  22 +
 .../flexbox_computedstyle_order-negative.html |  22 +
 .../flexbox_computedstyle_order.html          |  22 +
 ...ercentage-with-dynamic-container-size.html |  69 ++
 .../css-flexbox/hittest-anonymous-box.html    |  23 +
 .../css-flexbox/hittest-before-pseudo.html    |  21 +
 .../hittest-overlapping-margin.html           |  43 ++
 .../hittest-overlapping-order.html            |  45 ++
 .../hittest-overlapping-relative.html         |  45 ++
 .../image-as-flexitem-size-001.html           | 128 ++++
 .../image-as-flexitem-size-001v.html          | 131 ++++
 .../image-as-flexitem-size-002.html           | 128 ++++
 .../image-as-flexitem-size-002v.html          | 131 ++++
 .../image-as-flexitem-size-003.html           | 128 ++++
 .../image-as-flexitem-size-003v.html          | 131 ++++
 .../image-as-flexitem-size-004.html           | 128 ++++
 .../image-as-flexitem-size-004v.html          | 131 ++++
 .../image-as-flexitem-size-005.html           | 130 ++++
 .../image-as-flexitem-size-005v.html          | 132 ++++
 .../image-as-flexitem-size-006.html           | 130 ++++
 .../image-as-flexitem-size-006v.html          | 132 ++++
 .../image-as-flexitem-size-007.html           | 135 ++++
 .../image-as-flexitem-size-007v.html          | 137 ++++
 .../css/css-flexbox/inline-flex.html          |  33 +
 ...box-wrap-vertically-width-calculation.html | 179 +++++
 .../intrinsic-size/col-wrap-004.html          |  29 +
 .../intrinsic-size/col-wrap-005.html          |  38 +
 .../intrinsic-size/col-wrap-010.html          |  33 +
 .../intrinsic-size/col-wrap-018.html          |  45 ++
 .../intrinsic-size/col-wrap-019.html          |  42 ++
 .../css-flexbox/intrinsic-size/row-005.html   | 201 +++++
 .../css-flexbox/intrinsic-size/row-008.html   |  75 ++
 .../intrinsic-size/row-compat-001.html        | 132 ++++
 .../intrinsic-size/row-use-cases-001.html     | 315 ++++++++
 .../intrinsic-size/row-wrap-001.html          | 117 +++
 ...trinsic-width-orthogonal-writing-mode.html |  31 +
 .../css/css-flexbox/justify-content-006.html  |  37 +
 .../css/css-flexbox/justify-content-007.html  |  31 +
 .../justify-content_space-between-002.html    |  22 +
 .../layout-with-inline-svg-001.html           |  59 ++
 .../css/css-flexbox/max-width-violation.html  |  66 ++
 .../css/css-flexbox/multiline-min-max.html    | 151 ++++
 .../multiline-min-preferred-width.html        |  36 +
 .../css-flexbox/negative-overflow-002.html    |  74 ++
 .../css-flexbox/negative-overflow-003.html    |  73 ++
 .../css/css-flexbox/negative-overflow.html    |  98 +++
 .../wpt-import/css/css-flexbox/order-001.htm  |  38 +
 .../css/css-flexbox/order_value.html          |  34 +
 ...al-writing-modes-and-intrinsic-sizing.html |  36 +
 .../css/css-flexbox/overflow-auto-002.html    |  66 ++
 .../css/css-flexbox/overflow-auto-003.html    |  62 ++
 .../css/css-flexbox/overflow-auto-004.html    |  45 ++
 .../css/css-flexbox/overflow-auto-006.html    | 112 +++
 .../css/css-flexbox/overflow-auto-008.html    |  50 ++
 .../parsing/flex-basis-computed.html          |  37 +
 .../parsing/flex-basis-invalid.html           |  22 +
 .../css-flexbox/parsing/flex-basis-valid.html |  25 +
 .../css-flexbox/parsing/flex-computed.html    |  30 +
 .../parsing/flex-direction-computed.html      |  21 +
 .../parsing/flex-direction-invalid.html       |  19 +
 .../parsing/flex-direction-valid.html         |  21 +
 .../parsing/flex-flow-computed.html           |  19 +
 .../parsing/flex-flow-invalid.html            |  19 +
 .../parsing/flex-flow-shorthand.html          |  25 +
 .../css-flexbox/parsing/flex-flow-valid.html  |  24 +
 .../parsing/flex-grow-computed.html           |  21 +
 .../parsing/flex-grow-invalid.html            |  22 +
 .../css-flexbox/parsing/flex-grow-valid.html  |  21 +
 .../css/css-flexbox/parsing/flex-invalid.html |  21 +
 .../css-flexbox/parsing/flex-shorthand.html   |  75 ++
 .../parsing/flex-shrink-computed.html         |  21 +
 .../parsing/flex-shrink-invalid.html          |  22 +
 .../parsing/flex-shrink-valid.html            |  21 +
 .../css/css-flexbox/parsing/flex-valid.html   |  26 +
 .../parsing/flex-wrap-computed.html           |  20 +
 .../parsing/flex-wrap-invalid.html            |  19 +
 .../css-flexbox/parsing/flex-wrap-valid.html  |  20 +
 .../css-flexbox/parsing/order-computed.html   |  20 +
 .../css-flexbox/parsing/order-invalid.html    |  20 +
 .../css/css-flexbox/parsing/order-valid.html  |  20 +
 .../css-flexbox/parsing/webkit-aliases.html   |  24 +
 .../css-flexbox/percentage-heights-000.html   |  78 ++
 .../css-flexbox/percentage-heights-001.html   | 151 ++++
 .../css-flexbox/percentage-heights-003.html   | 125 +++
 .../css-flexbox/percentage-heights-011.html   |  35 +
 .../css-flexbox/percentage-heights-012.html   |  82 ++
 .../css-flexbox/percentage-heights-013.html   |  39 +
 .../css-flexbox/percentage-margins-001.html   |  28 +
 .../percentage-max-width-cross-axis.html      |  26 +
 .../percentage-size-quirks-002.html           |  63 ++
 .../css-flexbox/percentage-size-quirks.html   | 107 +++
 .../css/css-flexbox/percentage-size.html      | 108 +++
 .../position-relative-percentage-top-001.html |  43 ++
 ...-auto-block-size-with-percentage-item.html |  19 +
 .../css/css-flexbox/radiobutton-min-size.html |  40 +
 .../css/css-flexbox/relayout-align-items.html |  51 ++
 .../css/css-flexbox/relayout-image-load.html  |  36 +
 .../css/css-flexbox/relayout-input.html       |  15 +
 .../scrollbars-auto-min-content-sizing.html   |  19 +
 .../css-flexbox/shrinking-column-flexbox.html |  54 ++
 .../stretch-after-sibling-size-change.html    |  27 +
 .../stretched-child-shrink-on-relayout.html   |  77 ++
 .../css/css-flexbox/support/100x100-blue.png  | Bin 0 -> 92 bytes
 .../css/css-flexbox/support/100x100-green.png | Bin 0 -> 91 bytes
 .../css/css-flexbox/support/10x10-green.png   | Bin 0 -> 74 bytes
 .../css/css-flexbox/support/1x1-green.png     | Bin 0 -> 135 bytes
 .../css/css-flexbox/support/1x1-lime.png      | Bin 0 -> 135 bytes
 .../css/css-flexbox/support/1x1-maroon.png    | Bin 0 -> 109 bytes
 .../css/css-flexbox/support/1x1-navy.png      | Bin 0 -> 109 bytes
 .../css/css-flexbox/support/1x1-red.png       | Bin 0 -> 135 bytes
 .../css/css-flexbox/support/1x1-white.png     | Bin 0 -> 109 bytes
 .../css/css-flexbox/support/200x200-green.png | Bin 0 -> 275 bytes
 .../css/css-flexbox/support/20x50-green.png   | Bin 0 -> 84 bytes
 .../css/css-flexbox/support/300x150-green.png | Bin 0 -> 1187 bytes
 .../css/css-flexbox/support/40x20-green.png   | Bin 0 -> 171 bytes
 .../css/css-flexbox/support/60x60-gg-rr.png   | Bin 0 -> 224 bytes
 .../css/css-flexbox/support/60x60-green.png   | Bin 0 -> 218 bytes
 .../wpt-import/css/css-flexbox/support/README |  28 +
 .../css/css-flexbox/support/a-green.css       |   1 +
 .../css/css-flexbox/support/b-green.css       |   1 +
 .../css/css-flexbox/support/c-red.css         |   1 +
 .../css/css-flexbox/support/cat.png           | Bin 0 -> 1883 bytes
 .../css/css-flexbox/support/flexbox.css       | 143 ++++
 .../css/css-flexbox/support/import-green.css  |   1 +
 .../css/css-flexbox/support/import-red.css    |   1 +
 .../support/pattern-grg-rgr-grg.png           | Bin 0 -> 222 bytes
 .../support/pattern-grg-rrg-rgg.png           | Bin 0 -> 231 bytes
 .../support/pattern-rgr-grg-rgr.png           | Bin 0 -> 223 bytes
 .../css/css-flexbox/support/pattern-tr.png    | Bin 0 -> 137 bytes
 .../css/css-flexbox/support/ruler-h-50px.png  | Bin 0 -> 671 bytes
 .../css/css-flexbox/support/ruler-v-100px.png | Bin 0 -> 760 bytes
 .../css/css-flexbox/support/ruler-v-50px.png  | Bin 0 -> 757 bytes
 .../css/css-flexbox/support/scrollbars.js     |  45 ++
 .../css/css-flexbox/support/solidblue.png     | Bin 0 -> 1734 bytes
 .../css/css-flexbox/support/square-purple.png | Bin 0 -> 92 bytes
 .../css/css-flexbox/support/square-teal.png   | Bin 0 -> 92 bytes
 .../css/css-flexbox/support/square-white.png  | Bin 0 -> 78 bytes
 .../css/css-flexbox/support/swatch-blue.png   | Bin 0 -> 84 bytes
 .../css/css-flexbox/support/swatch-green.png  | Bin 0 -> 84 bytes
 .../css/css-flexbox/support/swatch-lime.png   | Bin 0 -> 84 bytes
 .../css/css-flexbox/support/swatch-orange.png | Bin 0 -> 84 bytes
 .../css/css-flexbox/support/swatch-red.png    | Bin 0 -> 84 bytes
 .../css/css-flexbox/support/swatch-teal.png   | Bin 0 -> 156 bytes
 .../css/css-flexbox/support/swatch-white.png  | Bin 0 -> 85 bytes
 .../css/css-flexbox/support/swatch-yellow.png | Bin 0 -> 84 bytes
 .../css/css-flexbox/support/test-bl.png       | Bin 0 -> 1368 bytes
 .../css/css-flexbox/support/test-br.png       | Bin 0 -> 1045 bytes
 .../support/test-inner-half-size.png          | Bin 0 -> 180 bytes
 .../css/css-flexbox/support/test-outer.png    | Bin 0 -> 2412 bytes
 .../css/css-flexbox/support/test-style.css    |  18 +
 .../css/css-flexbox/support/test-tl.png       | Bin 0 -> 1025 bytes
 .../css/css-flexbox/support/test-tr.png       | Bin 0 -> 1235 bytes
 .../svg-root-as-flex-item-006.html            |  24 +
 .../table-with-percent-intrinsic-width.html   |  67 ++
 .../text-as-flexitem-size-001.html            | 200 +++++
 .../css/support/inheritance-testcommon.js     |  96 +++
 .../css/support/shorthand-testcommon.js       | 106 +++
 .../wpt-import/resources/check-layout-th.js   | 253 +++++++
 688 files changed, 27834 insertions(+)
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/abspos-descendent-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-004.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-012.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-014.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-015.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-001a.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-001b.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-001a.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-001b.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wmvert-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-005.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-items.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-items.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-self-014.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-004.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-005.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-006.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-007.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-004.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/box-sizing-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/box-sizing-min-max-sizes-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/canvas-dynamic-change-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/change-column-flex-width.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/column-flex-child-with-overflow-scroll.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/column-reverse-gap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/columns-height-set-via-top-bottom.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/dynamic-grid-flex-abspos.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/fieldset-as-container-justify-center.tentative.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-017.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-005.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-013.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-basis-009.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-column-relayout-assert.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-direction-column-overlap-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-factor-less-than-one.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-flow-013.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-compressible-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-compressible-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-contains-strict.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-009.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-010.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-012.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-025.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-031.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-width-flex-items-014.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-shorthand-flex-basis-middle.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_first-letter.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-center-overflow.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_width-change-and-relayout-children.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_width-wrapping-column.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexitem-no-margin-collapsing.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexitem-stretch-image.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/gap-017.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/gap-018.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/height-percentage-with-dynamic-container-size.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-anonymous-box.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-before-pseudo.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-margin.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-order.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-relative.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-001v.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-002v.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-003v.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-004.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-004v.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-005.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-005v.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-006.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-006v.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-007.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-007v.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/inline-flex.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-004.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-005.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-010.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-018.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-019.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-005.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-008.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-compat-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-wrap-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content-006.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content-007.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content_space-between-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/layout-with-inline-svg-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/max-width-violation.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/multiline-min-max.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/multiline-min-preferred-width.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/order_value.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-004.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-006.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-008.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-valid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-valid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-shorthand.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-valid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-valid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shorthand.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-valid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-valid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-valid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-valid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/webkit-aliases.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-000.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-003.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-011.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-012.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-013.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-margins-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-max-width-cross-axis.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size-quirks-002.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size-quirks.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/position-relative-percentage-top-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/quirks-auto-block-size-with-percentage-item.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/radiobutton-min-size.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-align-items.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-image-load.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-input.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/scrollbars-auto-min-content-sizing.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/shrinking-column-flexbox.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/stretch-after-sibling-size-change.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/stretched-child-shrink-on-relayout.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/svg-root-as-flex-item-006.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/table-with-percent-intrinsic-width.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/text-as-flexitem-size-001.txt
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/META.yml
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/WEB_FEATURES.yml
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/abspos-descendent-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-004.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-012.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-014.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-015.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-horiz-001a.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-horiz-001b.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-horiz-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-vert-001a.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-vert-001b.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-vert-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wmvert-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-005.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-items.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-items.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-self-014.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-004.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-005.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-006.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-007.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-004.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/box-sizing-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/box-sizing-min-max-sizes-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/canvas-dynamic-change-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/change-column-flex-width.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/column-flex-child-with-overflow-scroll.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/column-reverse-gap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/columns-height-set-via-top-bottom.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/dynamic-grid-flex-abspos.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/fieldset-as-container-justify-center.tentative.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-017.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-005.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-013.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-basis-009.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-column-relayout-assert.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-direction-column-overlap-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-factor-less-than-one.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-flow-013.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-contains-strict.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-009.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-010.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-012.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-025.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-031.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-width-flex-items-014.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-shorthand-flex-basis-middle.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_first-letter.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-center-overflow.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_width-change-and-relayout-children.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_width-wrapping-column.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexitem-no-margin-collapsing.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexitem-stretch-image.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/gap-017.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/gap-018.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/height-percentage-with-dynamic-container-size.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-anonymous-box.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-before-pseudo.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-margin.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-order.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-relative.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-001v.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-002v.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-003v.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-004.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-004v.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-005.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-005v.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-006.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-006v.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-007.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-007v.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/inline-flex.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-004.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-005.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-010.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-018.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-019.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-005.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-008.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-compat-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-wrap-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content-006.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content-007.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content_space-between-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/layout-with-inline-svg-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/max-width-violation.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/multiline-min-max.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/multiline-min-preferred-width.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/order-001.htm
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/order_value.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-004.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-006.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-008.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-valid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-valid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-shorthand.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-valid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-valid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shorthand.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-valid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-valid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-valid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-valid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/webkit-aliases.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-000.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-003.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-011.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-012.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-013.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-margins-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-max-width-cross-axis.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size-quirks-002.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size-quirks.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/position-relative-percentage-top-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/radiobutton-min-size.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-align-items.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-image-load.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-input.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/scrollbars-auto-min-content-sizing.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/shrinking-column-flexbox.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/stretch-after-sibling-size-change.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/stretched-child-shrink-on-relayout.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/100x100-blue.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/100x100-green.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/10x10-green.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-green.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-lime.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-maroon.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-navy.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-red.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-white.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/200x200-green.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/20x50-green.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/300x150-green.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/40x20-green.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/60x60-gg-rr.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/60x60-green.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/README
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/a-green.css
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/b-green.css
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/c-red.css
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/cat.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/flexbox.css
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/import-green.css
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/import-red.css
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-grg-rgr-grg.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-grg-rrg-rgg.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-rgr-grg-rgr.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-tr.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/ruler-h-50px.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/ruler-v-100px.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/ruler-v-50px.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/scrollbars.js
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/solidblue.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/square-purple.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/square-teal.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/square-white.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-blue.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-green.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-lime.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-orange.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-red.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-teal.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-white.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-yellow.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-bl.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-br.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-inner-half-size.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-outer.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-style.css
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-tl.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-tr.png
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/svg-root-as-flex-item-006.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/table-with-percent-intrinsic-width.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/text-as-flexitem-size-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/support/inheritance-testcommon.js
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/support/shorthand-testcommon.js
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/resources/check-layout-th.js

diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/abspos-descendent-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/abspos-descendent-001.txt
new file mode 100644
index 00000000000..b56c9d0bdab
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/abspos-descendent-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.txt
new file mode 100644
index 00000000000..b2979b2ed9d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Pass
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Pass	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Pass	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Pass	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.txt
new file mode 100644
index 00000000000..91a8b63604e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+22 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Fail	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Fail	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Pass	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.txt
new file mode 100644
index 00000000000..0ff5cb9a4c8
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+14 Pass
+10 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Pass	.container > div 4	
+Fail	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Pass	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Pass	.container > div 16	
+Fail	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.txt
new file mode 100644
index 00000000000..91a8b63604e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+22 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Fail	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Fail	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Pass	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.txt
new file mode 100644
index 00000000000..0ff5cb9a4c8
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+14 Pass
+10 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Pass	.container > div 4	
+Fail	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Pass	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Pass	.container > div 16	
+Fail	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.txt
new file mode 100644
index 00000000000..91a8b63604e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+22 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Fail	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Fail	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Pass	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.txt
new file mode 100644
index 00000000000..0ff5cb9a4c8
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+14 Pass
+10 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Pass	.container > div 4	
+Fail	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Pass	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Pass	.container > div 16	
+Fail	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.txt
new file mode 100644
index 00000000000..91a8b63604e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+22 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Fail	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Fail	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Pass	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.txt
new file mode 100644
index 00000000000..0ff5cb9a4c8
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+14 Pass
+10 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Pass	.container > div 4	
+Fail	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Pass	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Pass	.container > div 16	
+Fail	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.txt
new file mode 100644
index 00000000000..91a8b63604e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+22 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Fail	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Fail	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Pass	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.txt
new file mode 100644
index 00000000000..91a8b63604e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+22 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Fail	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Fail	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Pass	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.txt
new file mode 100644
index 00000000000..68ee3775558
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+4 Pass
+20 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Pass	.container > div 5	
+Pass	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Pass	.container > div 17	
+Pass	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.txt
new file mode 100644
index 00000000000..7ef3f2bb7fd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+8 Pass
+16 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Pass	.container > div 5	
+Pass	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Pass	.container > div 17	
+Pass	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.txt
new file mode 100644
index 00000000000..2f71cd347a6
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.txt
@@ -0,0 +1,39 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 28 tests
+
+2 Pass
+26 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Pass	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Pass	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
+Fail	.container > div 25	
+Fail	.container > div 26	
+Fail	.container > div 27	
+Fail	.container > div 28	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.txt
new file mode 100644
index 00000000000..e78c64f73b5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.txt
@@ -0,0 +1,39 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 28 tests
+
+4 Pass
+24 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Pass	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Pass	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Pass	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Pass	.container > div 23	
+Fail	.container > div 24	
+Fail	.container > div 25	
+Fail	.container > div 26	
+Fail	.container > div 27	
+Fail	.container > div 28	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.txt
new file mode 100644
index 00000000000..94fa4ead8d1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Fail	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.txt
new file mode 100644
index 00000000000..572c5b388a8
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+2 Pass
+22 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Fail	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Pass	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Pass	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.txt
new file mode 100644
index 00000000000..b2979b2ed9d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Pass
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Pass	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Pass	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Pass	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.txt
new file mode 100644
index 00000000000..94fa4ead8d1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Fail	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.txt
new file mode 100644
index 00000000000..b2979b2ed9d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Pass
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Pass	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Pass	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Pass	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.txt
new file mode 100644
index 00000000000..94fa4ead8d1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Fail	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.txt
new file mode 100644
index 00000000000..45168d6221e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+22 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Pass	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Fail	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Pass	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.txt
new file mode 100644
index 00000000000..94fa4ead8d1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Fail	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.txt
new file mode 100644
index 00000000000..45168d6221e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+22 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Pass	.container > div 5	
+Pass	.container > div 6	
+Pass	.container > div 7	
+Pass	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Fail	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Pass	.container > div 17	
+Pass	.container > div 18	
+Pass	.container > div 19	
+Pass	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.txt
new file mode 100644
index 00000000000..94fa4ead8d1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Fail	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.txt
new file mode 100644
index 00000000000..ca5a5b19081
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+20 Pass
+4 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Pass	.container > div 5	
+Pass	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
+Pass	.container > div 13	
+Pass	.container > div 14	
+Pass	.container > div 15	
+Pass	.container > div 16	
+Pass	.container > div 17	
+Pass	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Pass	.container > div 21	
+Pass	.container > div 22	
+Pass	.container > div 23	
+Pass	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.txt
new file mode 100644
index 00000000000..94fa4ead8d1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Fail	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.txt
new file mode 100644
index 00000000000..94fa4ead8d1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Fail	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Fail	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.txt
new file mode 100644
index 00000000000..f895eeb87e0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+2 Pass
+22 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Fail	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Pass	.container > div 11	
+Fail	.container > div 12	
+Fail	.container > div 13	
+Fail	.container > div 14	
+Fail	.container > div 15	
+Fail	.container > div 16	
+Fail	.container > div 17	
+Fail	.container > div 18	
+Fail	.container > div 19	
+Fail	.container > div 20	
+Fail	.container > div 21	
+Fail	.container > div 22	
+Pass	.container > div 23	
+Fail	.container > div 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-001.txt
new file mode 100644
index 00000000000..e88775f3a72
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-001.txt
@@ -0,0 +1,131 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 120 tests
+
+42 Pass
+78 Fail
+Details
+Result	Test Name	MessagePass	.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	
+Fail	.flexbox 16	
+Fail	.flexbox 17	
+Fail	.flexbox 18	
+Fail	.flexbox 19	
+Fail	.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	
+Fail	.flexbox 36	
+Fail	.flexbox 37	
+Fail	.flexbox 38	
+Fail	.flexbox 39	
+Fail	.flexbox 40	
+Fail	.flexbox 41	
+Fail	.flexbox 42	
+Fail	.flexbox 43	
+Fail	.flexbox 44	
+Fail	.flexbox 45	
+Fail	.flexbox 46	
+Fail	.flexbox 47	
+Fail	.flexbox 48	
+Fail	.flexbox 49	
+Fail	.flexbox 50	
+Fail	.flexbox 51	
+Fail	.flexbox 52	
+Fail	.flexbox 53	
+Fail	.flexbox 54	
+Fail	.flexbox 55	
+Fail	.flexbox 56	
+Pass	.flexbox 57	
+Fail	.flexbox 58	
+Fail	.flexbox 59	
+Fail	.flexbox 60	
+Fail	.flexbox 61	
+Fail	.flexbox 62	
+Fail	.flexbox 63	
+Fail	.flexbox 64	
+Fail	.flexbox 65	
+Fail	.flexbox 66	
+Fail	.flexbox 67	
+Fail	.flexbox 68	
+Fail	.flexbox 69	
+Fail	.flexbox 70	
+Fail	.flexbox 71	
+Fail	.flexbox 72	
+Fail	.flexbox 73	
+Fail	.flexbox 74	
+Fail	.flexbox 75	
+Pass	.flexbox 76	
+Fail	.flexbox 77	
+Fail	.flexbox 78	
+Pass	.flexbox 79	
+Fail	.flexbox 80	
+Pass	.flexbox 81	
+Fail	.flexbox 82	
+Fail	.flexbox 83	
+Pass	.flexbox 84	
+Fail	.flexbox 85	
+Fail	.flexbox 86	
+Pass	.flexbox 87	
+Fail	.flexbox 88	
+Fail	.flexbox 89	
+Fail	.flexbox 90	
+Pass	.flexbox 91	
+Fail	.flexbox 92	
+Fail	.flexbox 93	
+Pass	.flexbox 94	
+Fail	.flexbox 95	
+Fail	.flexbox 96	
+Fail	.flexbox 97	
+Fail	.flexbox 98	
+Fail	.flexbox 99	
+Fail	.flexbox 100	
+Fail	.flexbox 101	
+Pass	.flexbox 102	
+Fail	.flexbox 103	
+Fail	.flexbox 104	
+Fail	.flexbox 105	
+Pass	.flexbox 106	
+Fail	.flexbox 107	
+Fail	.flexbox 108	
+Pass	.flexbox 109	
+Fail	.flexbox 110	
+Fail	.flexbox 111	
+Pass	.flexbox 112	
+Fail	.flexbox 113	
+Fail	.flexbox 114	
+Fail	.flexbox 115	
+Fail	.flexbox 116	
+Fail	.flexbox 117	
+Fail	.flexbox 118	
+Fail	.flexbox 119	
+Fail	.flexbox 120	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-002.txt
new file mode 100644
index 00000000000..8c9e02e6fc2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-002.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+16 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	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	
+Fail	.flexbox 4	
+Fail	.flexbox 5	
+Pass	.flexbox 6	
+Pass	.flexbox 7	
+Pass	.flexbox 8	
+Pass	.flexbox 9	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-003.txt
new file mode 100644
index 00000000000..2c780ab5982
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-003.txt
@@ -0,0 +1,27 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 16 tests
+
+10 Pass
+6 Fail
+Details
+Result	Test Name	MessagePass	.rect 1	
+Pass	.rect 2	
+Pass	.rect 3	
+Pass	.rect 4	
+Pass	.rect 5	
+Fail	.rect 6	
+Fail	.rect 7	
+Fail	.rect 8	
+Pass	.rect 9	
+Pass	.rect 10	
+Pass	.rect 11	
+Pass	.rect 12	
+Pass	.rect 13	
+Fail	.rect 14	
+Fail	.rect 15	
+Fail	.rect 16	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-004.txt
new file mode 100644
index 00000000000..cdc69e3a21e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-004.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	#flex 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-012.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-012.txt
new file mode 100644
index 00000000000..642876e5a3b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-012.txt
@@ -0,0 +1,107 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 96 tests
+
+48 Pass
+48 Fail
+Details
+Result	Test Name	MessagePass	.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	
+Fail	.flexbox 34	
+Fail	.flexbox 35	
+Fail	.flexbox 36	
+Fail	.flexbox 37	
+Fail	.flexbox 38	
+Fail	.flexbox 39	
+Fail	.flexbox 40	
+Fail	.flexbox 41	
+Fail	.flexbox 42	
+Fail	.flexbox 43	
+Fail	.flexbox 44	
+Fail	.flexbox 45	
+Fail	.flexbox 46	
+Fail	.flexbox 47	
+Fail	.flexbox 48	
+Fail	.flexbox 49	
+Fail	.flexbox 50	
+Fail	.flexbox 51	
+Fail	.flexbox 52	
+Fail	.flexbox 53	
+Fail	.flexbox 54	
+Fail	.flexbox 55	
+Fail	.flexbox 56	
+Fail	.flexbox 57	
+Fail	.flexbox 58	
+Fail	.flexbox 59	
+Fail	.flexbox 60	
+Fail	.flexbox 61	
+Fail	.flexbox 62	
+Fail	.flexbox 63	
+Fail	.flexbox 64	
+Pass	.flexbox 65	
+Fail	.flexbox 66	
+Fail	.flexbox 67	
+Pass	.flexbox 68	
+Fail	.flexbox 69	
+Pass	.flexbox 70	
+Pass	.flexbox 71	
+Fail	.flexbox 72	
+Pass	.flexbox 73	
+Fail	.flexbox 74	
+Fail	.flexbox 75	
+Pass	.flexbox 76	
+Fail	.flexbox 77	
+Pass	.flexbox 78	
+Pass	.flexbox 79	
+Fail	.flexbox 80	
+Pass	.flexbox 81	
+Fail	.flexbox 82	
+Fail	.flexbox 83	
+Pass	.flexbox 84	
+Fail	.flexbox 85	
+Pass	.flexbox 86	
+Pass	.flexbox 87	
+Fail	.flexbox 88	
+Pass	.flexbox 89	
+Fail	.flexbox 90	
+Fail	.flexbox 91	
+Pass	.flexbox 92	
+Fail	.flexbox 93	
+Pass	.flexbox 94	
+Pass	.flexbox 95	
+Fail	.flexbox 96	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-014.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-014.txt
new file mode 100644
index 00000000000..a6de1a3e1f9
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-014.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	The bottom of each pair of boxes should be the same	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-015.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-015.txt
new file mode 100644
index 00000000000..3b5582c531c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/abspos/position-absolute-015.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	#abspos 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-001a.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-001a.txt
new file mode 100644
index 00000000000..c693fd8a25b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-001a.txt
@@ -0,0 +1,83 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 72 tests
+
+70 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.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	
+Fail	.flexbox div 51	
+Fail	.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	
+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	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-001b.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-001b.txt
new file mode 100644
index 00000000000..c693fd8a25b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-001b.txt
@@ -0,0 +1,83 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 72 tests
+
+70 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.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	
+Fail	.flexbox div 51	
+Fail	.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	
+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	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-002.txt
new file mode 100644
index 00000000000..480dc05bcbf
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-horiz-002.txt
@@ -0,0 +1,83 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 72 tests
+
+54 Pass
+18 Fail
+Details
+Result	Test Name	MessagePass	.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	
+Fail	.flexbox div 9	
+Fail	.flexbox div 10	
+Fail	.flexbox div 11	
+Fail	.flexbox div 12	
+Fail	.flexbox div 13	
+Fail	.flexbox div 14	
+Fail	.flexbox div 15	
+Fail	.flexbox div 16	
+Fail	.flexbox div 17	
+Fail	.flexbox div 18	
+Fail	.flexbox div 19	
+Fail	.flexbox div 20	
+Fail	.flexbox div 21	
+Fail	.flexbox div 22	
+Fail	.flexbox div 23	
+Fail	.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	
+Fail	.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	
+Fail	.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	
+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	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-001a.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-001a.txt
new file mode 100644
index 00000000000..c693fd8a25b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-001a.txt
@@ -0,0 +1,83 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 72 tests
+
+70 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.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	
+Fail	.flexbox div 51	
+Fail	.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	
+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	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-001b.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-001b.txt
new file mode 100644
index 00000000000..6291ad2f15f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-001b.txt
@@ -0,0 +1,83 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 72 tests
+
+17 Pass
+55 Fail
+Details
+Result	Test Name	MessagePass	.flexbox div 1	
+Pass	.flexbox div 2	
+Fail	.flexbox div 3	
+Fail	.flexbox div 4	
+Pass	.flexbox div 5	
+Fail	.flexbox div 6	
+Fail	.flexbox div 7	
+Fail	.flexbox div 8	
+Pass	.flexbox div 9	
+Pass	.flexbox div 10	
+Fail	.flexbox div 11	
+Fail	.flexbox div 12	
+Pass	.flexbox div 13	
+Fail	.flexbox div 14	
+Fail	.flexbox div 15	
+Fail	.flexbox div 16	
+Pass	.flexbox div 17	
+Fail	.flexbox div 18	
+Fail	.flexbox div 19	
+Fail	.flexbox div 20	
+Fail	.flexbox div 21	
+Fail	.flexbox div 22	
+Fail	.flexbox div 23	
+Fail	.flexbox div 24	
+Pass	.flexbox div 25	
+Fail	.flexbox div 26	
+Fail	.flexbox div 27	
+Fail	.flexbox div 28	
+Fail	.flexbox div 29	
+Fail	.flexbox div 30	
+Fail	.flexbox div 31	
+Fail	.flexbox div 32	
+Pass	.flexbox div 33	
+Pass	.flexbox div 34	
+Fail	.flexbox div 35	
+Fail	.flexbox div 36	
+Pass	.flexbox div 37	
+Fail	.flexbox div 38	
+Fail	.flexbox div 39	
+Fail	.flexbox div 40	
+Pass	.flexbox div 41	
+Fail	.flexbox div 42	
+Fail	.flexbox div 43	
+Fail	.flexbox div 44	
+Fail	.flexbox div 45	
+Fail	.flexbox div 46	
+Fail	.flexbox div 47	
+Fail	.flexbox div 48	
+Pass	.flexbox div 49	
+Fail	.flexbox div 50	
+Fail	.flexbox div 51	
+Fail	.flexbox div 52	
+Fail	.flexbox div 53	
+Fail	.flexbox div 54	
+Fail	.flexbox div 55	
+Fail	.flexbox div 56	
+Pass	.flexbox div 57	
+Pass	.flexbox div 58	
+Fail	.flexbox div 59	
+Fail	.flexbox div 60	
+Pass	.flexbox div 61	
+Fail	.flexbox div 62	
+Fail	.flexbox div 63	
+Fail	.flexbox div 64	
+Pass	.flexbox div 65	
+Fail	.flexbox div 66	
+Fail	.flexbox div 67	
+Fail	.flexbox div 68	
+Fail	.flexbox div 69	
+Fail	.flexbox div 70	
+Fail	.flexbox div 71	
+Fail	.flexbox div 72	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-002.txt
new file mode 100644
index 00000000000..480dc05bcbf
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-vert-002.txt
@@ -0,0 +1,83 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 72 tests
+
+54 Pass
+18 Fail
+Details
+Result	Test Name	MessagePass	.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	
+Fail	.flexbox div 9	
+Fail	.flexbox div 10	
+Fail	.flexbox div 11	
+Fail	.flexbox div 12	
+Fail	.flexbox div 13	
+Fail	.flexbox div 14	
+Fail	.flexbox div 15	
+Fail	.flexbox div 16	
+Fail	.flexbox div 17	
+Fail	.flexbox div 18	
+Fail	.flexbox div 19	
+Fail	.flexbox div 20	
+Fail	.flexbox div 21	
+Fail	.flexbox div 22	
+Fail	.flexbox div 23	
+Fail	.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	
+Fail	.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	
+Fail	.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	
+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	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wmvert-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wmvert-001.txt
new file mode 100644
index 00000000000..64368704ab3
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wmvert-001.txt
@@ -0,0 +1,83 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 72 tests
+
+15 Pass
+57 Fail
+Details
+Result	Test Name	MessagePass	.flexbox div 1	
+Pass	.flexbox div 2	
+Fail	.flexbox div 3	
+Fail	.flexbox div 4	
+Pass	.flexbox div 5	
+Fail	.flexbox div 6	
+Fail	.flexbox div 7	
+Fail	.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	
+Fail	.flexbox div 17	
+Fail	.flexbox div 18	
+Fail	.flexbox div 19	
+Fail	.flexbox div 20	
+Fail	.flexbox div 21	
+Fail	.flexbox div 22	
+Fail	.flexbox div 23	
+Fail	.flexbox div 24	
+Fail	.flexbox div 25	
+Fail	.flexbox div 26	
+Fail	.flexbox div 27	
+Fail	.flexbox div 28	
+Fail	.flexbox div 29	
+Fail	.flexbox div 30	
+Fail	.flexbox div 31	
+Fail	.flexbox div 32	
+Pass	.flexbox div 33	
+Pass	.flexbox div 34	
+Fail	.flexbox div 35	
+Fail	.flexbox div 36	
+Pass	.flexbox div 37	
+Fail	.flexbox div 38	
+Fail	.flexbox div 39	
+Fail	.flexbox div 40	
+Fail	.flexbox div 41	
+Fail	.flexbox div 42	
+Fail	.flexbox div 43	
+Fail	.flexbox div 44	
+Fail	.flexbox div 45	
+Fail	.flexbox div 46	
+Fail	.flexbox div 47	
+Fail	.flexbox div 48	
+Fail	.flexbox div 49	
+Fail	.flexbox div 50	
+Fail	.flexbox div 51	
+Fail	.flexbox div 52	
+Fail	.flexbox div 53	
+Fail	.flexbox div 54	
+Fail	.flexbox div 55	
+Fail	.flexbox div 56	
+Pass	.flexbox div 57	
+Fail	.flexbox div 58	
+Fail	.flexbox div 59	
+Fail	.flexbox div 60	
+Fail	.flexbox div 61	
+Fail	.flexbox div 62	
+Fail	.flexbox div 63	
+Fail	.flexbox div 64	
+Fail	.flexbox div 65	
+Fail	.flexbox div 66	
+Fail	.flexbox div 67	
+Fail	.flexbox div 68	
+Fail	.flexbox div 69	
+Fail	.flexbox div 70	
+Fail	.flexbox div 71	
+Fail	.flexbox div 72	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-001.txt
new file mode 100644
index 00000000000..1dc30efa928
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-001.txt
@@ -0,0 +1,24 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 13 tests
+
+10 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.default, .verticalWriting 1	
+Pass	.default, .verticalWriting 2	
+Pass	.default, .verticalWriting 3	
+Pass	.default, .verticalWriting 4	
+Pass	.default, .verticalWriting 5	
+Pass	.default, .verticalWriting 6	
+Pass	.default, .verticalWriting 7	
+Pass	.default, .verticalWriting 8	
+Fail	.default, .verticalWriting 9	
+Fail	.default, .verticalWriting 10	
+Pass	.default, .verticalWriting 11	
+Fail	.default, .verticalWriting 12	
+Pass	.default, .verticalWriting 13	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-002.txt
new file mode 100644
index 00000000000..cf85b0b02ed
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-002.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Pass
+Details
+Result	Test Name	MessagePass	.flex-horizontal, .flex-vertical 1	
+Pass	.flex-horizontal, .flex-vertical 2	
+Pass	.flex-horizontal, .flex-vertical 3	
+Pass	.flex-horizontal, .flex-vertical 4	
+Pass	.flex-horizontal, .flex-vertical 5	
+Pass	.flex-horizontal, .flex-vertical 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-003.txt
new file mode 100644
index 00000000000..a35edb2050f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-003.txt
@@ -0,0 +1,55 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 44 tests
+
+24 Pass
+20 Fail
+Details
+Result	Test Name	MessagePass	.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	
+Fail	.flexbox 12	
+Fail	.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	
+Fail	.flexbox 23	
+Fail	.flexbox 24	
+Fail	.flexbox 25	
+Fail	.flexbox 26	
+Fail	.flexbox 27	
+Fail	.flexbox 28	
+Fail	.flexbox 29	
+Fail	.flexbox 30	
+Fail	.flexbox 31	
+Fail	.flexbox 32	
+Fail	.flexbox 33	
+Fail	.flexbox 34	
+Fail	.flexbox 35	
+Fail	.flexbox 36	
+Pass	.flexbox 37	
+Pass	.flexbox 38	
+Pass	.flexbox 39	
+Pass	.flexbox 40	
+Fail	.flexbox 41	
+Fail	.flexbox 42	
+Fail	.flexbox 43	
+Fail	.flexbox 44	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-005.txt
new file mode 100644
index 00000000000..a36aebc7b32
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-content-wrap-005.txt
@@ -0,0 +1,18 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+8 Pass
+Details
+Result	Test Name	MessagePass	.flexitem 1	
+Pass	.flexitem 2	
+Pass	.flexitem 3	
+Pass	.flexitem 4	
+Pass	.flexitem 5	
+Pass	.flexitem 6	
+Pass	.flexitem 7	
+Pass	.flexitem 8	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.txt
new file mode 100644
index 00000000000..fc32dba5b3f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.txt
new file mode 100644
index 00000000000..fc32dba5b3f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-items.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-items.txt
new file mode 100644
index 00000000000..fc32dba5b3f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-items.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.txt
new file mode 100644
index 00000000000..5835924c6ce
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#target > * 1	
+Fail	#target > * 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.txt
new file mode 100644
index 00000000000..9ff7b763048
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.txt
new file mode 100644
index 00000000000..9ff7b763048
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-items.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-items.txt
new file mode 100644
index 00000000000..9ff7b763048
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-items.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.txt
new file mode 100644
index 00000000000..25a844e090f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	#target > * 1	
+Fail	#target > * 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.txt
new file mode 100644
index 00000000000..fc32dba5b3f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.txt
new file mode 100644
index 00000000000..fc32dba5b3f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.txt
new file mode 100644
index 00000000000..fc32dba5b3f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.txt
new file mode 100644
index 00000000000..6f9c29f883a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.txt
new file mode 100644
index 00000000000..fc32dba5b3f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.txt
new file mode 100644
index 00000000000..fc32dba5b3f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.txt
new file mode 100644
index 00000000000..fc32dba5b3f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#target > div 1	
+Fail	#target > div 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.txt
new file mode 100644
index 00000000000..6f9c29f883a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-self-014.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-self-014.txt
new file mode 100644
index 00000000000..29df4fafbc8
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/align-self-014.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.content 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-001.txt
new file mode 100644
index 00000000000..6372c53888c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-001.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+1 Pass
+5 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
+Fail	#target > div 2	
+Fail	#target > div 3	
+Pass	#target > div 4	
+Fail	#target > div 5	
+Fail	#target > div 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-002.txt
new file mode 100644
index 00000000000..d1894de674b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-002.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
+Fail	#target > div 2	
+Fail	#target > div 3	
+Fail	#target > div 4	
+Fail	#target > div 5	
+Fail	#target > div 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-003.txt
new file mode 100644
index 00000000000..d1894de674b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-003.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
+Fail	#target > div 2	
+Fail	#target > div 3	
+Fail	#target > div 4	
+Fail	#target > div 5	
+Fail	#target > div 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-004.txt
new file mode 100644
index 00000000000..a0856feecdd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-004.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+1 Pass
+5 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
+Pass	#target > div 2	
+Fail	#target > div 3	
+Fail	#target > div 4	
+Fail	#target > div 5	
+Fail	#target > div 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-005.txt
new file mode 100644
index 00000000000..b77ad251417
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-005.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+1 Pass
+2 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
+Pass	#target > div 2	
+Fail	#target > div 3	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-006.txt
new file mode 100644
index 00000000000..79a601d9c39
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-006.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+3 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
+Fail	#target > div 2	
+Fail	#target > div 3	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-007.txt
new file mode 100644
index 00000000000..79a601d9c39
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-007.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+3 Fail
+Details
+Result	Test Name	MessageFail	#target > div 1	
+Fail	#target > div 2	
+Fail	#target > div 3	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.txt
new file mode 100644
index 00000000000..3327842c46f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+2 Pass
+2 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Pass	.target > * 2	
+Fail	.target > * 3	
+Pass	.target > * 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.txt
new file mode 100644
index 00000000000..8aee43d23ae
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.txt
new file mode 100644
index 00000000000..8aee43d23ae
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-001.txt
new file mode 100644
index 00000000000..950ee08857b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-001.txt
@@ -0,0 +1,59 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 48 tests
+
+24 Pass
+24 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Pass	.target > * 2	
+Fail	.target > * 3	
+Pass	.target > * 4	
+Fail	.target > * 5	
+Pass	.target > * 6	
+Fail	.target > * 7	
+Pass	.target > * 8	
+Fail	.target > * 9	
+Pass	.target > * 10	
+Fail	.target > * 11	
+Pass	.target > * 12	
+Fail	.target > * 13	
+Pass	.target > * 14	
+Fail	.target > * 15	
+Pass	.target > * 16	
+Fail	.target > * 17	
+Pass	.target > * 18	
+Fail	.target > * 19	
+Pass	.target > * 20	
+Fail	.target > * 21	
+Pass	.target > * 22	
+Fail	.target > * 23	
+Pass	.target > * 24	
+Fail	.target > * 25	
+Pass	.target > * 26	
+Fail	.target > * 27	
+Pass	.target > * 28	
+Fail	.target > * 29	
+Pass	.target > * 30	
+Fail	.target > * 31	
+Pass	.target > * 32	
+Fail	.target > * 33	
+Pass	.target > * 34	
+Fail	.target > * 35	
+Pass	.target > * 36	
+Fail	.target > * 37	
+Pass	.target > * 38	
+Fail	.target > * 39	
+Pass	.target > * 40	
+Fail	.target > * 41	
+Pass	.target > * 42	
+Fail	.target > * 43	
+Pass	.target > * 44	
+Fail	.target > * 45	
+Pass	.target > * 46	
+Fail	.target > * 47	
+Pass	.target > * 48	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-002.txt
new file mode 100644
index 00000000000..12c7fe62d69
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-002.txt
@@ -0,0 +1,58 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 48 tests
+
+48 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Fail	.target > * 5	
+Fail	.target > * 6	
+Fail	.target > * 7	
+Fail	.target > * 8	
+Fail	.target > * 9	
+Fail	.target > * 10	
+Fail	.target > * 11	
+Fail	.target > * 12	
+Fail	.target > * 13	
+Fail	.target > * 14	
+Fail	.target > * 15	
+Fail	.target > * 16	
+Fail	.target > * 17	
+Fail	.target > * 18	
+Fail	.target > * 19	
+Fail	.target > * 20	
+Fail	.target > * 21	
+Fail	.target > * 22	
+Fail	.target > * 23	
+Fail	.target > * 24	
+Fail	.target > * 25	
+Fail	.target > * 26	
+Fail	.target > * 27	
+Fail	.target > * 28	
+Fail	.target > * 29	
+Fail	.target > * 30	
+Fail	.target > * 31	
+Fail	.target > * 32	
+Fail	.target > * 33	
+Fail	.target > * 34	
+Fail	.target > * 35	
+Fail	.target > * 36	
+Fail	.target > * 37	
+Fail	.target > * 38	
+Fail	.target > * 39	
+Fail	.target > * 40	
+Fail	.target > * 41	
+Fail	.target > * 42	
+Fail	.target > * 43	
+Fail	.target > * 44	
+Fail	.target > * 45	
+Fail	.target > * 46	
+Fail	.target > * 47	
+Fail	.target > * 48	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-003.txt
new file mode 100644
index 00000000000..f011e126d89
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-003.txt
@@ -0,0 +1,27 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 16 tests
+
+8 Pass
+8 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Pass	.target > * 2	
+Fail	.target > * 3	
+Pass	.target > * 4	
+Fail	.target > * 5	
+Pass	.target > * 6	
+Fail	.target > * 7	
+Pass	.target > * 8	
+Fail	.target > * 9	
+Pass	.target > * 10	
+Fail	.target > * 11	
+Pass	.target > * 12	
+Fail	.target > * 13	
+Pass	.target > * 14	
+Fail	.target > * 15	
+Pass	.target > * 16	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-004.txt
new file mode 100644
index 00000000000..462e535f921
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-004.txt
@@ -0,0 +1,26 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 16 tests
+
+16 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Fail	.target > * 5	
+Fail	.target > * 6	
+Fail	.target > * 7	
+Fail	.target > * 8	
+Fail	.target > * 9	
+Fail	.target > * 10	
+Fail	.target > * 11	
+Fail	.target > * 12	
+Fail	.target > * 13	
+Fail	.target > * 14	
+Fail	.target > * 15	
+Fail	.target > * 16	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-001.txt
new file mode 100644
index 00000000000..b965ec3ac6e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-001.txt
@@ -0,0 +1,23 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+6 Pass
+6 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Pass	.target > * 2	
+Fail	.target > * 3	
+Pass	.target > * 4	
+Fail	.target > * 5	
+Pass	.target > * 6	
+Fail	.target > * 7	
+Pass	.target > * 8	
+Fail	.target > * 9	
+Pass	.target > * 10	
+Fail	.target > * 11	
+Pass	.target > * 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-002.txt
new file mode 100644
index 00000000000..1fea545772f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-002.txt
@@ -0,0 +1,22 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+12 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Fail	.target > * 5	
+Fail	.target > * 6	
+Fail	.target > * 7	
+Fail	.target > * 8	
+Fail	.target > * 9	
+Fail	.target > * 10	
+Fail	.target > * 11	
+Fail	.target > * 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-003.txt
new file mode 100644
index 00000000000..1fea545772f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-003.txt
@@ -0,0 +1,22 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+12 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Fail	.target > * 5	
+Fail	.target > * 6	
+Fail	.target > * 7	
+Fail	.target > * 8	
+Fail	.target > * 9	
+Fail	.target > * 10	
+Fail	.target > * 11	
+Fail	.target > * 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.txt
new file mode 100644
index 00000000000..0b73b58f205
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.txt
@@ -0,0 +1,35 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+12 Pass
+12 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Pass	.target > * 2	
+Fail	.target > * 3	
+Pass	.target > * 4	
+Fail	.target > * 5	
+Pass	.target > * 6	
+Fail	.target > * 7	
+Pass	.target > * 8	
+Fail	.target > * 9	
+Pass	.target > * 10	
+Fail	.target > * 11	
+Pass	.target > * 12	
+Fail	.target > * 13	
+Pass	.target > * 14	
+Fail	.target > * 15	
+Pass	.target > * 16	
+Fail	.target > * 17	
+Pass	.target > * 18	
+Fail	.target > * 19	
+Pass	.target > * 20	
+Fail	.target > * 21	
+Pass	.target > * 22	
+Fail	.target > * 23	
+Pass	.target > * 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.txt
new file mode 100644
index 00000000000..46d3720c283
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Fail	.target > * 5	
+Fail	.target > * 6	
+Fail	.target > * 7	
+Fail	.target > * 8	
+Fail	.target > * 9	
+Fail	.target > * 10	
+Fail	.target > * 11	
+Fail	.target > * 12	
+Fail	.target > * 13	
+Fail	.target > * 14	
+Fail	.target > * 15	
+Fail	.target > * 16	
+Fail	.target > * 17	
+Fail	.target > * 18	
+Fail	.target > * 19	
+Fail	.target > * 20	
+Fail	.target > * 21	
+Fail	.target > * 22	
+Fail	.target > * 23	
+Fail	.target > * 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.txt
new file mode 100644
index 00000000000..46d3720c283
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.txt
@@ -0,0 +1,34 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 24 tests
+
+24 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Fail	.target > * 5	
+Fail	.target > * 6	
+Fail	.target > * 7	
+Fail	.target > * 8	
+Fail	.target > * 9	
+Fail	.target > * 10	
+Fail	.target > * 11	
+Fail	.target > * 12	
+Fail	.target > * 13	
+Fail	.target > * 14	
+Fail	.target > * 15	
+Fail	.target > * 16	
+Fail	.target > * 17	
+Fail	.target > * 18	
+Fail	.target > * 19	
+Fail	.target > * 20	
+Fail	.target > * 21	
+Fail	.target > * 22	
+Fail	.target > * 23	
+Fail	.target > * 24	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-001.txt
new file mode 100644
index 00000000000..b965ec3ac6e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-001.txt
@@ -0,0 +1,23 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+6 Pass
+6 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Pass	.target > * 2	
+Fail	.target > * 3	
+Pass	.target > * 4	
+Fail	.target > * 5	
+Pass	.target > * 6	
+Fail	.target > * 7	
+Pass	.target > * 8	
+Fail	.target > * 9	
+Pass	.target > * 10	
+Fail	.target > * 11	
+Pass	.target > * 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-002.txt
new file mode 100644
index 00000000000..1fea545772f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-002.txt
@@ -0,0 +1,22 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+12 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Fail	.target > * 5	
+Fail	.target > * 6	
+Fail	.target > * 7	
+Fail	.target > * 8	
+Fail	.target > * 9	
+Fail	.target > * 10	
+Fail	.target > * 11	
+Fail	.target > * 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-003.txt
new file mode 100644
index 00000000000..1fea545772f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-003.txt
@@ -0,0 +1,22 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+12 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Fail	.target > * 5	
+Fail	.target > * 6	
+Fail	.target > * 7	
+Fail	.target > * 8	
+Fail	.target > * 9	
+Fail	.target > * 10	
+Fail	.target > * 11	
+Fail	.target > * 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-001.txt
new file mode 100644
index 00000000000..534bd402b0e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-001.txt
@@ -0,0 +1,23 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+6 Pass
+6 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Pass	.target > * 2	
+Fail	.target > * 3	
+Pass	.target > * 4	
+Pass	.target > * 5	
+Fail	.target > * 6	
+Pass	.target > * 7	
+Fail	.target > * 8	
+Fail	.target > * 9	
+Pass	.target > * 10	
+Fail	.target > * 11	
+Pass	.target > * 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-002.txt
new file mode 100644
index 00000000000..9b9bd1fa5f0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-002.txt
@@ -0,0 +1,23 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+3 Pass
+9 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Fail	.target > * 5	
+Fail	.target > * 6	
+Fail	.target > * 7	
+Fail	.target > * 8	
+Pass	.target > * 9	
+Pass	.target > * 10	
+Pass	.target > * 11	
+Fail	.target > * 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-003.txt
new file mode 100644
index 00000000000..9441bf3233f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-003.txt
@@ -0,0 +1,23 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+3 Pass
+9 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Pass	.target > * 5	
+Fail	.target > * 6	
+Pass	.target > * 7	
+Pass	.target > * 8	
+Fail	.target > * 9	
+Fail	.target > * 10	
+Fail	.target > * 11	
+Fail	.target > * 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-001.txt
new file mode 100644
index 00000000000..db2020f4fe8
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-001.txt
@@ -0,0 +1,19 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+2 Pass
+6 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
+Fail	.target > * 5	
+Pass	.target > * 6	
+Fail	.target > * 7	
+Pass	.target > * 8	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-002.txt
new file mode 100644
index 00000000000..8aee43d23ae
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-002.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-003.txt
new file mode 100644
index 00000000000..8aee43d23ae
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-003.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.target > * 1	
+Fail	.target > * 2	
+Fail	.target > * 3	
+Fail	.target > * 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/box-sizing-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/box-sizing-001.txt
new file mode 100644
index 00000000000..f63997d2989
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/box-sizing-001.txt
@@ -0,0 +1,20 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 10 tests
+
+10 Pass
+Details
+Result	Test Name	MessagePass	.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	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/box-sizing-min-max-sizes-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/box-sizing-min-max-sizes-001.txt
new file mode 100644
index 00000000000..dbaf01d1a74
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/box-sizing-min-max-sizes-001.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/canvas-dynamic-change-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/canvas-dynamic-change-001.txt
new file mode 100644
index 00000000000..2c802d91a99
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/canvas-dynamic-change-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/change-column-flex-width.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/change-column-flex-width.txt
new file mode 100644
index 00000000000..7584c3da0c2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/change-column-flex-width.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	#container 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/column-flex-child-with-overflow-scroll.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/column-flex-child-with-overflow-scroll.txt
new file mode 100644
index 00000000000..dbaf01d1a74
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/column-flex-child-with-overflow-scroll.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/column-reverse-gap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/column-reverse-gap.txt
new file mode 100644
index 00000000000..b56c9d0bdab
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/column-reverse-gap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/columns-height-set-via-top-bottom.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/columns-height-set-via-top-bottom.txt
new file mode 100644
index 00000000000..dbaf01d1a74
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/columns-height-set-via-top-bottom.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/dynamic-grid-flex-abspos.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/dynamic-grid-flex-abspos.txt
new file mode 100644
index 00000000000..4aec1062d4b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/dynamic-grid-flex-abspos.txt
@@ -0,0 +1,19 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+6 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.relpos 1	
+Pass	.relpos 2	
+Pass	.relpos 3	
+Fail	.relpos 4	
+Pass	.relpos 5	
+Pass	.relpos 6	
+Pass	.relpos 7	
+Fail	.relpos 8	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/fieldset-as-container-justify-center.tentative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/fieldset-as-container-justify-center.tentative.txt
new file mode 100644
index 00000000000..78a4ad39d4d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/fieldset-as-container-justify-center.tentative.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.item 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.txt
new file mode 100644
index 00000000000..8883d0181e1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.txt
@@ -0,0 +1,21 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 10 tests
+
+7 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Pass	.flexbox 3	
+Pass	.flexbox 4	
+Fail	.flexbox 5	
+Pass	.flexbox 6	
+Fail	.flexbox 7	
+Pass	.flexbox 8	
+Pass	.flexbox 9	
+Fail	.flexbox 10	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-017.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-017.txt
new file mode 100644
index 00000000000..77563b2e029
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-017.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	img 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-005.txt
new file mode 100644
index 00000000000..05bd049a77e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-005.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+3 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	img 1	
+Pass	img 2	
+Pass	img 3	
+Fail	img 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-013.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-013.txt
new file mode 100644
index 00000000000..40a703f5ee2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-013.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 5 tests
+
+5 Pass
+Details
+Result	Test Name	MessagePass	img 1	
+Pass	img 2	
+Pass	img 3	
+Pass	img 4	
+Pass	img 5	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-basis-009.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-basis-009.txt
new file mode 100644
index 00000000000..c035a912bdb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-basis-009.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	#flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-column-relayout-assert.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-column-relayout-assert.txt
new file mode 100644
index 00000000000..b56c9d0bdab
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-column-relayout-assert.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-direction-column-overlap-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-direction-column-overlap-001.txt
new file mode 100644
index 00000000000..7584c3da0c2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-direction-column-overlap-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	#container 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-factor-less-than-one.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-factor-less-than-one.txt
new file mode 100644
index 00000000000..a0b15c6c22b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-factor-less-than-one.txt
@@ -0,0 +1,33 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 22 tests
+
+14 Pass
+8 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Pass	.flexbox 3	
+Fail	.flexbox 4	
+Fail	.flexbox 5	
+Pass	.flexbox 6	
+Pass	.flexbox 7	
+Fail	.flexbox 8	
+Fail	.flexbox 9	
+Pass	.flexbox 10	
+Pass	.flexbox 11	
+Pass	.flexbox 12	
+Fail	.flexbox 13	
+Fail	.flexbox 14	
+Pass	.flexbox 15	
+Pass	.flexbox 16	
+Fail	.flexbox 17	
+Fail	.flexbox 18	
+Pass	.flexbox 19	
+Pass	.flexbox 20	
+Pass	.flexbox 21	
+Pass	.flexbox 22	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-flow-013.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-flow-013.txt
new file mode 100644
index 00000000000..996a9004568
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-flow-013.txt
@@ -0,0 +1,23 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+4 Pass
+8 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Fail	.flexbox 2	
+Pass	.flexbox 3	
+Fail	.flexbox 4	
+Pass	.flexbox 5	
+Pass	.flexbox 6	
+Fail	.flexbox 7	
+Fail	.flexbox 8	
+Fail	.flexbox 9	
+Fail	.flexbox 10	
+Fail	.flexbox 11	
+Fail	.flexbox 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-compressible-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-compressible-001.txt
new file mode 100644
index 00000000000..70be0513ed0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-compressible-001.txt
@@ -0,0 +1,26 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 15 tests
+
+4 Pass
+11 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Fail	.flexbox 3	
+Fail	.flexbox 4	
+Fail	.flexbox 5	
+Pass	.flexbox 6	
+Pass	.flexbox 7	
+Fail	.flexbox 8	
+Fail	.flexbox 9	
+Fail	.flexbox 10	
+Fail	.flexbox 11	
+Fail	.flexbox 12	
+Fail	.flexbox 13	
+Fail	.flexbox 14	
+Fail	.flexbox 15	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-compressible-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-compressible-002.txt
new file mode 100644
index 00000000000..70be0513ed0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-compressible-002.txt
@@ -0,0 +1,26 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 15 tests
+
+4 Pass
+11 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Fail	.flexbox 3	
+Fail	.flexbox 4	
+Fail	.flexbox 5	
+Pass	.flexbox 6	
+Pass	.flexbox 7	
+Fail	.flexbox 8	
+Fail	.flexbox 9	
+Fail	.flexbox 10	
+Fail	.flexbox 11	
+Fail	.flexbox 12	
+Fail	.flexbox 13	
+Fail	.flexbox 14	
+Fail	.flexbox 15	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-contains-strict.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-contains-strict.txt
new file mode 100644
index 00000000000..f350cc1bd25
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-contains-strict.txt
@@ -0,0 +1,19 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+4 Pass
+4 Fail
+Details
+Result	Test Name	MessageFail	.inline-flex 1	
+Fail	.inline-flex 2	
+Pass	.inline-flex 3	
+Pass	.inline-flex 4	
+Fail	.inline-flex 5	
+Fail	.inline-flex 6	
+Pass	.inline-flex 7	
+Pass	.inline-flex 8	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-009.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-009.txt
new file mode 100644
index 00000000000..4d7dc5df87a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-009.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.container 1	
+Pass	.container 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-010.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-010.txt
new file mode 100644
index 00000000000..4d7dc5df87a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-010.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.container 1	
+Pass	.container 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-012.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-012.txt
new file mode 100644
index 00000000000..2c802d91a99
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-012.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-025.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-025.txt
new file mode 100644
index 00000000000..8655288cb11
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-025.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+3 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	.outer-column-flexbox > div 1	
+Pass	.outer-column-flexbox > div 2	
+Pass	.outer-column-flexbox > div 3	
+Fail	.outer-column-flexbox > div 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-031.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-031.txt
new file mode 100644
index 00000000000..2e4498ca540
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-031.txt
@@ -0,0 +1,83 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 72 tests
+
+24 Pass
+48 Fail
+Details
+Result	Test Name	MessagePass	.flex 1	
+Pass	.flex 2	
+Fail	.flex 3	
+Fail	.flex 4	
+Fail	.flex 5	
+Fail	.flex 6	
+Pass	.flex 7	
+Pass	.flex 8	
+Fail	.flex 9	
+Fail	.flex 10	
+Fail	.flex 11	
+Fail	.flex 12	
+Pass	.flex 13	
+Pass	.flex 14	
+Fail	.flex 15	
+Fail	.flex 16	
+Fail	.flex 17	
+Fail	.flex 18	
+Pass	.flex 19	
+Pass	.flex 20	
+Fail	.flex 21	
+Fail	.flex 22	
+Fail	.flex 23	
+Fail	.flex 24	
+Pass	.flex 25	
+Pass	.flex 26	
+Fail	.flex 27	
+Fail	.flex 28	
+Fail	.flex 29	
+Fail	.flex 30	
+Pass	.flex 31	
+Pass	.flex 32	
+Fail	.flex 33	
+Fail	.flex 34	
+Fail	.flex 35	
+Fail	.flex 36	
+Pass	.flex 37	
+Pass	.flex 38	
+Fail	.flex 39	
+Fail	.flex 40	
+Fail	.flex 41	
+Fail	.flex 42	
+Pass	.flex 43	
+Pass	.flex 44	
+Fail	.flex 45	
+Fail	.flex 46	
+Fail	.flex 47	
+Fail	.flex 48	
+Pass	.flex 49	
+Pass	.flex 50	
+Fail	.flex 51	
+Fail	.flex 52	
+Fail	.flex 53	
+Fail	.flex 54	
+Pass	.flex 55	
+Pass	.flex 56	
+Fail	.flex 57	
+Fail	.flex 58	
+Fail	.flex 59	
+Fail	.flex 60	
+Pass	.flex 61	
+Pass	.flex 62	
+Fail	.flex 63	
+Fail	.flex 64	
+Fail	.flex 65	
+Fail	.flex 66	
+Pass	.flex 67	
+Pass	.flex 68	
+Fail	.flex 69	
+Fail	.flex 70	
+Fail	.flex 71	
+Fail	.flex 72	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-001.txt
new file mode 100644
index 00000000000..2aca1f16270
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-001.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Pass
+Details
+Result	Test Name	MessagePass	.flexbox, .inline-flexbox 1	
+Pass	.flexbox, .inline-flexbox 2	
+Pass	.flexbox, .inline-flexbox 3	
+Pass	.flexbox, .inline-flexbox 4	
+Pass	.flexbox, .inline-flexbox 5	
+Pass	.flexbox, .inline-flexbox 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-002.txt
new file mode 100644
index 00000000000..b56c9d0bdab
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-003.txt
new file mode 100644
index 00000000000..fcfd68a4d2c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-size-003.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	img 1	
+Pass	img 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-width-flex-items-014.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-width-flex-items-014.txt
new file mode 100644
index 00000000000..d4082d0815d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-minimum-width-flex-items-014.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Pass
+Details
+Result	Test Name	MessagePass	body > div 1	
+Pass	body > div 2	
+Pass	body > div 3	
+Pass	body > div 4	
+Pass	body > div 5	
+Pass	body > div 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.txt
new file mode 100644
index 00000000000..8c811ff7dd5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+7 Pass
+11 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Pass	.flexbox 3	
+Pass	.flexbox 4	
+Pass	.flexbox 5	
+Fail	.flexbox 6	
+Pass	.flexbox 7	
+Pass	.flexbox 8	
+Fail	.flexbox 9	
+Fail	.flexbox 10	
+Fail	.flexbox 11	
+Fail	.flexbox 12	
+Fail	.flexbox 13	
+Fail	.flexbox 14	
+Fail	.flexbox 15	
+Fail	.flexbox 16	
+Fail	.flexbox 17	
+Fail	.flexbox 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.txt
new file mode 100644
index 00000000000..9b984c6be18
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.OuterFlexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-shorthand-flex-basis-middle.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-shorthand-flex-basis-middle.txt
new file mode 100644
index 00000000000..dbaf01d1a74
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-shorthand-flex-basis-middle.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-002.txt
new file mode 100644
index 00000000000..33c770bfd99
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-002.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+2 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.flexitem 1	
+Pass	.flexitem 2	
+Fail	.flexitem 3	
+Fail	.flexitem 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-003.txt
new file mode 100644
index 00000000000..33c770bfd99
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-003.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+2 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.flexitem 1	
+Pass	.flexitem 2	
+Fail	.flexitem 3	
+Fail	.flexitem 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.txt
new file mode 100644
index 00000000000..fc915b6d55e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flex-container 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_first-letter.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_first-letter.txt
new file mode 100644
index 00000000000..fe77db4ef96
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_first-letter.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	flexbox | first-letter	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-center-overflow.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-center-overflow.txt
new file mode 100644
index 00000000000..5e69bc5ec21
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-center-overflow.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+3 Pass
+Details
+Result	Test Name	MessagePass	span 1	
+Pass	span 2	
+Pass	span 3	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-001.txt
new file mode 100644
index 00000000000..5c962be5cde
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-001.txt
@@ -0,0 +1,23 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+10 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.container > div 1	
+Pass	.container > div 2	
+Pass	.container > div 3	
+Pass	.container > div 4	
+Pass	.container > div 5	
+Pass	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Pass	.container > div 9	
+Pass	.container > div 10	
+Pass	.container > div 11	
+Pass	.container > div 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-002.txt
new file mode 100644
index 00000000000..f0ae3c95214
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-002.txt
@@ -0,0 +1,22 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+12 Fail
+Details
+Result	Test Name	MessageFail	.container > div 1	
+Fail	.container > div 2	
+Fail	.container > div 3	
+Fail	.container > div 4	
+Fail	.container > div 5	
+Fail	.container > div 6	
+Fail	.container > div 7	
+Fail	.container > div 8	
+Fail	.container > div 9	
+Fail	.container > div 10	
+Fail	.container > div 11	
+Fail	.container > div 12	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_width-change-and-relayout-children.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_width-change-and-relayout-children.txt
new file mode 100644
index 00000000000..7584c3da0c2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_width-change-and-relayout-children.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	#container 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_width-wrapping-column.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_width-wrapping-column.txt
new file mode 100644
index 00000000000..b56c9d0bdab
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexbox_width-wrapping-column.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexitem-no-margin-collapsing.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexitem-no-margin-collapsing.txt
new file mode 100644
index 00000000000..b56c9d0bdab
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexitem-no-margin-collapsing.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexitem-stretch-image.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexitem-stretch-image.txt
new file mode 100644
index 00000000000..b56c9d0bdab
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flexitem-stretch-image.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/gap-017.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/gap-017.txt
new file mode 100644
index 00000000000..7ac23d0af6b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/gap-017.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.button 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/gap-018.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/gap-018.txt
new file mode 100644
index 00000000000..7ac23d0af6b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/gap-018.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.button 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.txt
new file mode 100644
index 00000000000..9b699511709
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-content: center	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.txt
new file mode 100644
index 00000000000..0840f3998e1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-content: flex-end	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.txt
new file mode 100644
index 00000000000..24fa73f0f4e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-content: flex-start	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.txt
new file mode 100644
index 00000000000..3548a90e7fe
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-content: space-around	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.txt
new file mode 100644
index 00000000000..95a28374df7
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-content: space-between	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.txt
new file mode 100644
index 00000000000..a5f23de6ff3
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-items: baseline	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.txt
new file mode 100644
index 00000000000..3cecd38e679
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-items: center	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.txt
new file mode 100644
index 00000000000..e89a16ea80f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-items: flex-end	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.txt
new file mode 100644
index 00000000000..fe424e36a82
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-items: flex-start	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.txt
new file mode 100644
index 00000000000..3a8215a0816
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-items: invalid	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.txt
new file mode 100644
index 00000000000..21bae08f829
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-items: stretch	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.txt
new file mode 100644
index 00000000000..9852ff8be9d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-self: baseline	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.txt
new file mode 100644
index 00000000000..0516bfd4dea
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-self: center	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.txt
new file mode 100644
index 00000000000..190103098cb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-self: flex-end	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.txt
new file mode 100644
index 00000000000..20bd7cad510
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-self: flex-start	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.txt
new file mode 100644
index 00000000000..debbdc7d0ce
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-self: invalid	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.txt
new file mode 100644
index 00000000000..90de605bf53
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | align-self: stretch	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.txt
new file mode 100644
index 00000000000..a9dd7224377
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | display: inline-flex	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.txt
new file mode 100644
index 00000000000..4e055d229cf
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | display: flex	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.txt
new file mode 100644
index 00000000000..bb0cd6ad0f6
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-basis: 0	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.txt
new file mode 100644
index 00000000000..5b240483351
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-basis: 0%	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.txt
new file mode 100644
index 00000000000..bf36657fb6a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-basis: auto	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.txt
new file mode 100644
index 00000000000..210171a35f9
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-basis: percent	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.txt
new file mode 100644
index 00000000000..e7245a0ff43
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-direction: column-reverse	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.txt
new file mode 100644
index 00000000000..973df7a11a2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-direction: column	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.txt
new file mode 100644
index 00000000000..8b7ba98d3ce
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-direction: row	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.txt
new file mode 100644
index 00000000000..fd592dea63b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-direction: row-reverse	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.txt
new file mode 100644
index 00000000000..8b7ba98d3ce
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-direction: row	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.txt
new file mode 100644
index 00000000000..ead9c26eaf4
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: column nowrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.txt
new file mode 100644
index 00000000000..a7d70273b6e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: column-reverse nowrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.txt
new file mode 100644
index 00000000000..f0dd454845a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: column-reverse wrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.txt
new file mode 100644
index 00000000000..ef7c7747f3f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: column-reverse	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.txt
new file mode 100644
index 00000000000..ecf7eae689c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: column wrap-reverse	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.txt
new file mode 100644
index 00000000000..5559e67158c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: column wrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.txt
new file mode 100644
index 00000000000..360418d263c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: column	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.txt
new file mode 100644
index 00000000000..7a0b1166a02
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: nowrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.txt
new file mode 100644
index 00000000000..aefadde9a63
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: row nowrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.txt
new file mode 100644
index 00000000000..a6653a2cb96
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: row-reverse nowrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.txt
new file mode 100644
index 00000000000..9434cb900bb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: row-reverse wrap-reverse	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.txt
new file mode 100644
index 00000000000..87a1bd10401
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: row-reverse wrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.txt
new file mode 100644
index 00000000000..66ac5f94ab1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: row-reverse	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.txt
new file mode 100644
index 00000000000..53f8cbe8091
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: row wrap-reverse	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.txt
new file mode 100644
index 00000000000..07915b4dee3
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: row wrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.txt
new file mode 100644
index 00000000000..7edeb4a8cef
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: row	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.txt
new file mode 100644
index 00000000000..e3bf9a82470
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-flow: wrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.txt
new file mode 100644
index 00000000000..e4bf014c82e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-grow: 0	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.txt
new file mode 100644
index 00000000000..53cc5516180
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-grow: negative	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.txt
new file mode 100644
index 00000000000..2cb641ce0bf
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-grow: number	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.txt
new file mode 100644
index 00000000000..c548d4fbdbf
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex: 0 auto	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.txt
new file mode 100644
index 00000000000..4f954f8a4ad
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex: auto	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.txt
new file mode 100644
index 00000000000..08abab13f90
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex: initial	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.txt
new file mode 100644
index 00000000000..a2eb1f44910
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex: invalid	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.txt
new file mode 100644
index 00000000000..4f954f8a4ad
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex: auto	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.txt
new file mode 100644
index 00000000000..8c08b29d8f0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex: number	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.txt
new file mode 100644
index 00000000000..a2eb1f44910
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex: invalid	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.txt
new file mode 100644
index 00000000000..15a32ba49b9
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-shrink: 0	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.txt
new file mode 100644
index 00000000000..ede436c19e5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-shrink: negative	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.txt
new file mode 100644
index 00000000000..87cd284e001
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-shrink: number	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.txt
new file mode 100644
index 00000000000..558afe2d3c5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-wrap: wrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.txt
new file mode 100644
index 00000000000..47d7243b4da
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-wrap: nowrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.txt
new file mode 100644
index 00000000000..afe7da7f9d7
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-wrap: wrap-reverse	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.txt
new file mode 100644
index 00000000000..558afe2d3c5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | flex-wrap: wrap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.txt
new file mode 100644
index 00000000000..7bd7ba34185
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | justify-content: center	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.txt
new file mode 100644
index 00000000000..0dfca5d064a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | justify-content: flex-end	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.txt
new file mode 100644
index 00000000000..b5713c59c46
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | justify-content: flex-start	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.txt
new file mode 100644
index 00000000000..9489f5a7ca2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | justify-content: space-around	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.txt
new file mode 100644
index 00000000000..be1bd54f5d5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | justify-content: space-between	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.txt
new file mode 100644
index 00000000000..1f67c9f241c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+2 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	Computed min-width/min-height of specified auto for flex item.	
+Fail	Computed min-width/min-height of specified auto inside display:none which would otherwise have been a flex item.	
+Pass	Computed min-width/min-height of specified auto for flex item inside display:contents.	
+Fail	Computed min-width/min-height of specified auto with display:none which would otherwise have been a flex item.	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.txt
new file mode 100644
index 00000000000..15f1571a53f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | min-height: auto	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.txt
new file mode 100644
index 00000000000..7f5f1c1557a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | min-width: auto	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.txt
new file mode 100644
index 00000000000..480dd3fc792
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | order: -1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.txt
new file mode 100644
index 00000000000..c6d09aad38c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | order: integer	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.txt
new file mode 100644
index 00000000000..0c26a32f98f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | order: noninteger	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.txt
new file mode 100644
index 00000000000..480dd3fc792
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | order: -1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.txt
new file mode 100644
index 00000000000..1235ae53664
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	flexbox | computed style | order: 0	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/height-percentage-with-dynamic-container-size.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/height-percentage-with-dynamic-container-size.txt
new file mode 100644
index 00000000000..132702e46c4
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/height-percentage-with-dynamic-container-size.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+3 Pass
+Details
+Result	Test Name	MessagePass	.container 1	
+Pass	.container 2	
+Pass	.container 3	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-anonymous-box.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-anonymous-box.txt
new file mode 100644
index 00000000000..be28b65644c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-anonymous-box.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	Hit-testing within an anonymous flex-item should return the flexbox as the hittest result.	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-before-pseudo.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-before-pseudo.txt
new file mode 100644
index 00000000000..e80f8117b4b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-before-pseudo.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	Hit-testing text within a pseudo-element flex-item should return the flexbox as the hittest result.	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-margin.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-margin.txt
new file mode 100644
index 00000000000..a5abd1bbea1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-margin.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	Flexboxes should perform hit testing in reverse paint order for overlapping elements: negative margin case (crbug.com/844505)	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-order.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-order.txt
new file mode 100644
index 00000000000..45022afe5e4
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-order.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	Flexboxes should perform hit testing in reverse paint order for overlapping elements: flex order case (crbug.com/844505)	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-relative.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-relative.txt
new file mode 100644
index 00000000000..3a14342e1f4
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/hittest-overlapping-relative.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	Flexboxes should perform hit testing in reverse paint order for overlapping elements: relative case (crbug.com/844505)	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-001.txt
new file mode 100644
index 00000000000..393200001dd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-001.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+5 Pass
+13 Fail
+Details
+Result	Test Name	MessageFail	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Fail	.flexbox > img 5	
+Fail	.flexbox > img 6	
+Fail	.flexbox > img 7	
+Fail	.flexbox > img 8	
+Fail	.flexbox > img 9	
+Fail	.flexbox > img 10	
+Fail	.flexbox > img 11	
+Fail	.flexbox > img 12	
+Fail	.flexbox > img 13	
+Fail	.flexbox > img 14	
+Pass	.flexbox > img 15	
+Fail	.flexbox > img 16	
+Pass	.flexbox > img 17	
+Fail	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-001v.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-001v.txt
new file mode 100644
index 00000000000..393200001dd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-001v.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+5 Pass
+13 Fail
+Details
+Result	Test Name	MessageFail	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Fail	.flexbox > img 5	
+Fail	.flexbox > img 6	
+Fail	.flexbox > img 7	
+Fail	.flexbox > img 8	
+Fail	.flexbox > img 9	
+Fail	.flexbox > img 10	
+Fail	.flexbox > img 11	
+Fail	.flexbox > img 12	
+Fail	.flexbox > img 13	
+Fail	.flexbox > img 14	
+Pass	.flexbox > img 15	
+Fail	.flexbox > img 16	
+Pass	.flexbox > img 17	
+Fail	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-002.txt
new file mode 100644
index 00000000000..9089f1492ac
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-002.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+5 Pass
+13 Fail
+Details
+Result	Test Name	MessageFail	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Fail	.flexbox > img 5	
+Fail	.flexbox > img 6	
+Fail	.flexbox > img 7	
+Fail	.flexbox > img 8	
+Fail	.flexbox > img 9	
+Fail	.flexbox > img 10	
+Fail	.flexbox > img 11	
+Fail	.flexbox > img 12	
+Fail	.flexbox > img 13	
+Fail	.flexbox > img 14	
+Fail	.flexbox > img 15	
+Pass	.flexbox > img 16	
+Fail	.flexbox > img 17	
+Pass	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-002v.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-002v.txt
new file mode 100644
index 00000000000..9089f1492ac
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-002v.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+5 Pass
+13 Fail
+Details
+Result	Test Name	MessageFail	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Fail	.flexbox > img 5	
+Fail	.flexbox > img 6	
+Fail	.flexbox > img 7	
+Fail	.flexbox > img 8	
+Fail	.flexbox > img 9	
+Fail	.flexbox > img 10	
+Fail	.flexbox > img 11	
+Fail	.flexbox > img 12	
+Fail	.flexbox > img 13	
+Fail	.flexbox > img 14	
+Fail	.flexbox > img 15	
+Pass	.flexbox > img 16	
+Fail	.flexbox > img 17	
+Pass	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-003.txt
new file mode 100644
index 00000000000..dd41b1d8fd7
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-003.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+16 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Pass	.flexbox > img 5	
+Pass	.flexbox > img 6	
+Pass	.flexbox > img 7	
+Pass	.flexbox > img 8	
+Pass	.flexbox > img 9	
+Pass	.flexbox > img 10	
+Pass	.flexbox > img 11	
+Pass	.flexbox > img 12	
+Pass	.flexbox > img 13	
+Pass	.flexbox > img 14	
+Pass	.flexbox > img 15	
+Fail	.flexbox > img 16	
+Pass	.flexbox > img 17	
+Fail	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-003v.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-003v.txt
new file mode 100644
index 00000000000..dd41b1d8fd7
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-003v.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+16 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Pass	.flexbox > img 5	
+Pass	.flexbox > img 6	
+Pass	.flexbox > img 7	
+Pass	.flexbox > img 8	
+Pass	.flexbox > img 9	
+Pass	.flexbox > img 10	
+Pass	.flexbox > img 11	
+Pass	.flexbox > img 12	
+Pass	.flexbox > img 13	
+Pass	.flexbox > img 14	
+Pass	.flexbox > img 15	
+Fail	.flexbox > img 16	
+Pass	.flexbox > img 17	
+Fail	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-004.txt
new file mode 100644
index 00000000000..27b8cb236e7
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-004.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+16 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Pass	.flexbox > img 5	
+Pass	.flexbox > img 6	
+Pass	.flexbox > img 7	
+Pass	.flexbox > img 8	
+Pass	.flexbox > img 9	
+Pass	.flexbox > img 10	
+Pass	.flexbox > img 11	
+Pass	.flexbox > img 12	
+Pass	.flexbox > img 13	
+Pass	.flexbox > img 14	
+Fail	.flexbox > img 15	
+Pass	.flexbox > img 16	
+Fail	.flexbox > img 17	
+Pass	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-004v.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-004v.txt
new file mode 100644
index 00000000000..27b8cb236e7
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-004v.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+16 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Pass	.flexbox > img 5	
+Pass	.flexbox > img 6	
+Pass	.flexbox > img 7	
+Pass	.flexbox > img 8	
+Pass	.flexbox > img 9	
+Pass	.flexbox > img 10	
+Pass	.flexbox > img 11	
+Pass	.flexbox > img 12	
+Pass	.flexbox > img 13	
+Pass	.flexbox > img 14	
+Fail	.flexbox > img 15	
+Pass	.flexbox > img 16	
+Fail	.flexbox > img 17	
+Pass	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-005.txt
new file mode 100644
index 00000000000..2f79dedd789
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-005.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+13 Pass
+5 Fail
+Details
+Result	Test Name	MessagePass	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Pass	.flexbox > img 5	
+Pass	.flexbox > img 6	
+Pass	.flexbox > img 7	
+Pass	.flexbox > img 8	
+Pass	.flexbox > img 9	
+Fail	.flexbox > img 10	
+Fail	.flexbox > img 11	
+Pass	.flexbox > img 12	
+Fail	.flexbox > img 13	
+Fail	.flexbox > img 14	
+Pass	.flexbox > img 15	
+Fail	.flexbox > img 16	
+Pass	.flexbox > img 17	
+Pass	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-005v.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-005v.txt
new file mode 100644
index 00000000000..2f79dedd789
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-005v.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+13 Pass
+5 Fail
+Details
+Result	Test Name	MessagePass	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Pass	.flexbox > img 5	
+Pass	.flexbox > img 6	
+Pass	.flexbox > img 7	
+Pass	.flexbox > img 8	
+Pass	.flexbox > img 9	
+Fail	.flexbox > img 10	
+Fail	.flexbox > img 11	
+Pass	.flexbox > img 12	
+Fail	.flexbox > img 13	
+Fail	.flexbox > img 14	
+Pass	.flexbox > img 15	
+Fail	.flexbox > img 16	
+Pass	.flexbox > img 17	
+Pass	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-006.txt
new file mode 100644
index 00000000000..2e4e68a50e1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-006.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+13 Pass
+5 Fail
+Details
+Result	Test Name	MessagePass	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Pass	.flexbox > img 5	
+Pass	.flexbox > img 6	
+Pass	.flexbox > img 7	
+Pass	.flexbox > img 8	
+Fail	.flexbox > img 9	
+Pass	.flexbox > img 10	
+Pass	.flexbox > img 11	
+Fail	.flexbox > img 12	
+Fail	.flexbox > img 13	
+Fail	.flexbox > img 14	
+Pass	.flexbox > img 15	
+Pass	.flexbox > img 16	
+Fail	.flexbox > img 17	
+Pass	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-006v.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-006v.txt
new file mode 100644
index 00000000000..2e4e68a50e1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-006v.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+13 Pass
+5 Fail
+Details
+Result	Test Name	MessagePass	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Pass	.flexbox > img 5	
+Pass	.flexbox > img 6	
+Pass	.flexbox > img 7	
+Pass	.flexbox > img 8	
+Fail	.flexbox > img 9	
+Pass	.flexbox > img 10	
+Pass	.flexbox > img 11	
+Fail	.flexbox > img 12	
+Fail	.flexbox > img 13	
+Fail	.flexbox > img 14	
+Pass	.flexbox > img 15	
+Pass	.flexbox > img 16	
+Fail	.flexbox > img 17	
+Pass	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-007.txt
new file mode 100644
index 00000000000..393200001dd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-007.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+5 Pass
+13 Fail
+Details
+Result	Test Name	MessageFail	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Fail	.flexbox > img 5	
+Fail	.flexbox > img 6	
+Fail	.flexbox > img 7	
+Fail	.flexbox > img 8	
+Fail	.flexbox > img 9	
+Fail	.flexbox > img 10	
+Fail	.flexbox > img 11	
+Fail	.flexbox > img 12	
+Fail	.flexbox > img 13	
+Fail	.flexbox > img 14	
+Pass	.flexbox > img 15	
+Fail	.flexbox > img 16	
+Pass	.flexbox > img 17	
+Fail	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-007v.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-007v.txt
new file mode 100644
index 00000000000..393200001dd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/image-as-flexitem-size-007v.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+5 Pass
+13 Fail
+Details
+Result	Test Name	MessageFail	.flexbox > img 1	
+Pass	.flexbox > img 2	
+Pass	.flexbox > img 3	
+Pass	.flexbox > img 4	
+Fail	.flexbox > img 5	
+Fail	.flexbox > img 6	
+Fail	.flexbox > img 7	
+Fail	.flexbox > img 8	
+Fail	.flexbox > img 9	
+Fail	.flexbox > img 10	
+Fail	.flexbox > img 11	
+Fail	.flexbox > img 12	
+Fail	.flexbox > img 13	
+Fail	.flexbox > img 14	
+Pass	.flexbox > img 15	
+Fail	.flexbox > img 16	
+Pass	.flexbox > img 17	
+Fail	.flexbox > img 18	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/inline-flex.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/inline-flex.txt
new file mode 100644
index 00000000000..5f0ee8a826b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/inline-flex.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	#testcase 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.txt
new file mode 100644
index 00000000000..4fcebcee41c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.txt
@@ -0,0 +1,27 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 16 tests
+
+8 Pass
+8 Fail
+Details
+Result	Test Name	MessagePass	.inline-flexbox 1	
+Pass	.inline-flexbox 2	
+Fail	.inline-flexbox 3	
+Fail	.inline-flexbox 4	
+Pass	.inline-flexbox 5	
+Pass	.inline-flexbox 6	
+Fail	.inline-flexbox 7	
+Fail	.inline-flexbox 8	
+Pass	.inline-flexbox 9	
+Pass	.inline-flexbox 10	
+Fail	.inline-flexbox 11	
+Fail	.inline-flexbox 12	
+Pass	.inline-flexbox 13	
+Pass	.inline-flexbox 14	
+Fail	.inline-flexbox 15	
+Fail	.inline-flexbox 16	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-004.txt
new file mode 100644
index 00000000000..8862d55be65
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-004.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	body > div 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-005.txt
new file mode 100644
index 00000000000..512df64e2af
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-005.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	body > div 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-010.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-010.txt
new file mode 100644
index 00000000000..512df64e2af
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-010.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	body > div 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-018.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-018.txt
new file mode 100644
index 00000000000..8862d55be65
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-018.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	body > div 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-019.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-019.txt
new file mode 100644
index 00000000000..512df64e2af
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-019.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	body > div 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-005.txt
new file mode 100644
index 00000000000..28367abe153
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-005.txt
@@ -0,0 +1,20 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 9 tests
+
+4 Pass
+5 Fail
+Details
+Result	Test Name	MessageFail	.floating-flexbox 1	
+Fail	.floating-flexbox 2	
+Fail	.floating-flexbox 3	
+Fail	.floating-flexbox 4	
+Pass	.floating-flexbox 5	
+Pass	.floating-flexbox 6	
+Pass	.floating-flexbox 7	
+Pass	.floating-flexbox 8	
+Fail	.floating-flexbox 9	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-008.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-008.txt
new file mode 100644
index 00000000000..fe457668dee
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-008.txt
@@ -0,0 +1,21 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 11 tests
+
+11 Pass
+Details
+Result	Test Name	MessagePass	.min-width-flexbox 1	
+Pass	.min-width-flexbox 2	
+Pass	.min-width-flexbox 3	
+Pass	.min-width-flexbox 4	
+Pass	.min-width-flexbox 5	
+Pass	.min-width-flexbox 6	
+Pass	.min-width-flexbox 7	
+Pass	.min-width-flexbox 8	
+Pass	.min-width-flexbox 9	
+Pass	.min-width-flexbox 10	
+Pass	.min-width-flexbox 11	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-compat-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-compat-001.txt
new file mode 100644
index 00000000000..316dfb95701
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-compat-001.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+2 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	#wrapping-broke .flex 1	
+Pass	#bug1454306 2	
+Fail	#gmail-tables .flex 3	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.txt
new file mode 100644
index 00000000000..aad094bea62
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+4 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	left < right	
+Pass	no overflow	
+Pass	same widths	
+Pass	zero width	
+Fail	same heights	
+Fail	no overflow 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-wrap-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-wrap-001.txt
new file mode 100644
index 00000000000..4acf03d680d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-size/row-wrap-001.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 5 tests
+
+2 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.floating-flexbox 1	
+Fail	.floating-flexbox 2	
+Pass	.floating-flexbox 3	
+Fail	.floating-flexbox 4	
+Fail	.floating-flexbox 5	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.txt
new file mode 100644
index 00000000000..f7cbea972d2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+1 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.inline-flexbox 1	
+Fail	.inline-flexbox 2	
+Fail	.inline-flexbox 3	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content-006.txt
new file mode 100644
index 00000000000..eac97daa0ad
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content-006.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.middle > div 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content-007.txt
new file mode 100644
index 00000000000..b813a23fc9d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content-007.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.flexitem + .flexitem 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content_space-between-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content_space-between-002.txt
new file mode 100644
index 00000000000..b56c9d0bdab
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/justify-content_space-between-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/layout-with-inline-svg-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/layout-with-inline-svg-001.txt
new file mode 100644
index 00000000000..37b9368c7c9
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/layout-with-inline-svg-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	sizes	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/max-width-violation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/max-width-violation.txt
new file mode 100644
index 00000000000..f0ee9ed419b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/max-width-violation.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.columns 1	
+Pass	.columns 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/multiline-min-max.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/multiline-min-max.txt
new file mode 100644
index 00000000000..b30a1427bae
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/multiline-min-max.txt
@@ -0,0 +1,25 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 14 tests
+
+11 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Pass	.flexbox 3	
+Pass	.flexbox 4	
+Fail	.flexbox 5	
+Pass	.flexbox 6	
+Pass	.flexbox 7	
+Pass	.flexbox 8	
+Pass	.flexbox 9	
+Pass	.flexbox 10	
+Pass	.flexbox 11	
+Fail	.flexbox 12	
+Fail	.flexbox 13	
+Pass	.flexbox 14	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/multiline-min-preferred-width.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/multiline-min-preferred-width.txt
new file mode 100644
index 00000000000..dfefcb3990a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/multiline-min-preferred-width.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.container 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow-002.txt
new file mode 100644
index 00000000000..22d2a538f8f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow-002.txt
@@ -0,0 +1,82 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 72 tests
+
+72 Fail
+Details
+Result	Test Name	MessageFail	.container 1	
+Fail	.container 2	
+Fail	.container 3	
+Fail	.container 4	
+Fail	.container 5	
+Fail	.container 6	
+Fail	.container 7	
+Fail	.container 8	
+Fail	.container 9	
+Fail	.container 10	
+Fail	.container 11	
+Fail	.container 12	
+Fail	.container 13	
+Fail	.container 14	
+Fail	.container 15	
+Fail	.container 16	
+Fail	.container 17	
+Fail	.container 18	
+Fail	.container 19	
+Fail	.container 20	
+Fail	.container 21	
+Fail	.container 22	
+Fail	.container 23	
+Fail	.container 24	
+Fail	.container 25	
+Fail	.container 26	
+Fail	.container 27	
+Fail	.container 28	
+Fail	.container 29	
+Fail	.container 30	
+Fail	.container 31	
+Fail	.container 32	
+Fail	.container 33	
+Fail	.container 34	
+Fail	.container 35	
+Fail	.container 36	
+Fail	.container 37	
+Fail	.container 38	
+Fail	.container 39	
+Fail	.container 40	
+Fail	.container 41	
+Fail	.container 42	
+Fail	.container 43	
+Fail	.container 44	
+Fail	.container 45	
+Fail	.container 46	
+Fail	.container 47	
+Fail	.container 48	
+Fail	.container 49	
+Fail	.container 50	
+Fail	.container 51	
+Fail	.container 52	
+Fail	.container 53	
+Fail	.container 54	
+Fail	.container 55	
+Fail	.container 56	
+Fail	.container 57	
+Fail	.container 58	
+Fail	.container 59	
+Fail	.container 60	
+Fail	.container 61	
+Fail	.container 62	
+Fail	.container 63	
+Fail	.container 64	
+Fail	.container 65	
+Fail	.container 66	
+Fail	.container 67	
+Fail	.container 68	
+Fail	.container 69	
+Fail	.container 70	
+Fail	.container 71	
+Fail	.container 72	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow-003.txt
new file mode 100644
index 00000000000..bdff119bda0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow-003.txt
@@ -0,0 +1,58 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 48 tests
+
+48 Fail
+Details
+Result	Test Name	MessageFail	.container 1	
+Fail	.container 2	
+Fail	.container 3	
+Fail	.container 4	
+Fail	.container 5	
+Fail	.container 6	
+Fail	.container 7	
+Fail	.container 8	
+Fail	.container 9	
+Fail	.container 10	
+Fail	.container 11	
+Fail	.container 12	
+Fail	.container 13	
+Fail	.container 14	
+Fail	.container 15	
+Fail	.container 16	
+Fail	.container 17	
+Fail	.container 18	
+Fail	.container 19	
+Fail	.container 20	
+Fail	.container 21	
+Fail	.container 22	
+Fail	.container 23	
+Fail	.container 24	
+Fail	.container 25	
+Fail	.container 26	
+Fail	.container 27	
+Fail	.container 28	
+Fail	.container 29	
+Fail	.container 30	
+Fail	.container 31	
+Fail	.container 32	
+Fail	.container 33	
+Fail	.container 34	
+Fail	.container 35	
+Fail	.container 36	
+Fail	.container 37	
+Fail	.container 38	
+Fail	.container 39	
+Fail	.container 40	
+Fail	.container 41	
+Fail	.container 42	
+Fail	.container 43	
+Fail	.container 44	
+Fail	.container 45	
+Fail	.container 46	
+Fail	.container 47	
+Fail	.container 48	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow.txt
new file mode 100644
index 00000000000..8a0ccc37e20
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/negative-overflow.txt
@@ -0,0 +1,22 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 11 tests
+
+5 Pass
+6 Fail
+Details
+Result	Test Name	MessageFail	.flexbox 1	
+Fail	.flexbox 2	
+Fail	.flexbox 3	
+Pass	.flexbox 4	
+Pass	.flexbox 5	
+Fail	.flexbox 6	
+Fail	.flexbox 7	
+Fail	.flexbox 8	
+Pass	.flexbox 9	
+Pass	.flexbox 10	
+Pass	.flexbox 11	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/order_value.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/order_value.txt
new file mode 100644
index 00000000000..f5142fb5e2e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/order_value.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	CSS Flexible Box Test: order_check	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.txt
new file mode 100644
index 00000000000..dbaf01d1a74
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-002.txt
new file mode 100644
index 00000000000..cff88520da8
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	section 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-003.txt
new file mode 100644
index 00000000000..b56c9d0bdab
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-003.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-004.txt
new file mode 100644
index 00000000000..8486574b4f9
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-004.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	#list-wrapper 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-006.txt
new file mode 100644
index 00000000000..55150cd2d19
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-006.txt
@@ -0,0 +1,20 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 10 tests
+
+10 Pass
+Details
+Result	Test Name	MessagePass	.flexbox, .inline-flexbox 1	
+Pass	.flexbox, .inline-flexbox 2	
+Pass	.flexbox, .inline-flexbox 3	
+Pass	.flexbox, .inline-flexbox 4	
+Pass	.flexbox, .inline-flexbox 5	
+Pass	.flexbox, .inline-flexbox 6	
+Pass	.flexbox, .inline-flexbox 7	
+Pass	.flexbox, .inline-flexbox 8	
+Pass	.flexbox, .inline-flexbox 9	
+Pass	.flexbox, .inline-flexbox 10	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-008.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-008.txt
new file mode 100644
index 00000000000..dc14627b647
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/overflow-auto-008.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	hbox dimensions	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-computed.txt
new file mode 100644
index 00000000000..3650b9bcd26
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-computed.txt
@@ -0,0 +1,23 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+8 Pass
+4 Fail
+Details
+Result	Test Name	MessagePass	Property flex-basis value '1px'	
+Pass	Property flex-basis value '400%'	
+Pass	Property flex-basis value 'auto'	
+Pass	Property flex-basis value 'content'	
+Pass	Property flex-basis value 'fit-content'	
+Pass	Property flex-basis value 'min-content'	
+Pass	Property flex-basis value 'max-content'	
+Fail	Property flex-basis value 'calc(10px + 0.5em)'	
+Fail	Property flex-basis value 'calc(10px - 0.5em)'	
+Fail	Property flex-basis value 'calc(10%)'	
+Pass	Property flex-basis value 'calc(0% + 10px)'	
+Fail	Property flex-basis value 'calc(10% + 0px)'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-invalid.txt
new file mode 100644
index 00000000000..b413dde1204
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-invalid.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 5 tests
+
+5 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex-basis'] = "none" should not set the property value	
+Pass	e.style['flex-basis'] = "auto content" should not set the property value	
+Pass	e.style['flex-basis'] = "-1px" should not set the property value	
+Pass	e.style['flex-basis'] = "-2%" should not set the property value	
+Pass	e.style['flex-basis'] = "3px 4%" should not set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-valid.txt
new file mode 100644
index 00000000000..bb66d1296f4
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-basis-valid.txt
@@ -0,0 +1,18 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+8 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex-basis'] = "1px" should set the property value	
+Pass	e.style['flex-basis'] = "calc(2em + 3ex)" should set the property value	
+Pass	e.style['flex-basis'] = "400%" should set the property value	
+Pass	e.style['flex-basis'] = "auto" should set the property value	
+Pass	e.style['flex-basis'] = "fit-content" should set the property value	
+Pass	e.style['flex-basis'] = "min-content" should set the property value	
+Pass	e.style['flex-basis'] = "max-content" should set the property value	
+Pass	e.style['flex-basis'] = "content" should set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-computed.txt
new file mode 100644
index 00000000000..2b097d992b6
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-computed.txt
@@ -0,0 +1,19 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+6 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	Property flex value 'none'	
+Pass	Property flex value '1'	
+Pass	Property flex value '2 3'	
+Pass	Property flex value '4 5 6px'	
+Pass	Property flex value '7% 8'	
+Pass	Property flex value '8 auto'	
+Fail	Property flex value 'calc(10px + 0.5em)'	
+Fail	Property flex value 'calc(10px - 0.5em)'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-computed.txt
new file mode 100644
index 00000000000..04c3a28fd05
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-computed.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Pass
+Details
+Result	Test Name	MessagePass	Property flex-direction value 'row'	
+Pass	Property flex-direction value 'row-reverse'	
+Pass	Property flex-direction value 'column'	
+Pass	Property flex-direction value 'column-reverse'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-invalid.txt
new file mode 100644
index 00000000000..b0b9d4f0812
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-invalid.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex-direction'] = "auto" should not set the property value	
+Pass	e.style['flex-direction'] = "column row-reverse" should not set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-valid.txt
new file mode 100644
index 00000000000..99419f01931
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-direction-valid.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex-direction'] = "row" should set the property value	
+Pass	e.style['flex-direction'] = "row-reverse" should set the property value	
+Pass	e.style['flex-direction'] = "column" should set the property value	
+Pass	e.style['flex-direction'] = "column-reverse" should set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-computed.txt
new file mode 100644
index 00000000000..2b8761eae0e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-computed.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	Property flex-flow value 'column wrap-reverse'	
+Pass	Property flex-flow value 'row-reverse wrap'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-invalid.txt
new file mode 100644
index 00000000000..594cede4e07
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-invalid.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex-flow'] = "nowrap row nowrap" should not set the property value	
+Pass	e.style['flex-flow'] = "column wrap column" should not set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-shorthand.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-shorthand.txt
new file mode 100644
index 00000000000..342cbeddd8e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-shorthand.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex-flow'] = "nowrap column" should set flex-direction	
+Pass	e.style['flex-flow'] = "nowrap column" should set flex-wrap	
+Pass	e.style['flex-flow'] = "nowrap column" should not set unrelated longhands	
+Pass	e.style['flex-flow'] = "wrap row-reverse" should set flex-direction	
+Pass	e.style['flex-flow'] = "wrap row-reverse" should set flex-wrap	
+Pass	e.style['flex-flow'] = "wrap row-reverse" should not set unrelated longhands	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-valid.txt
new file mode 100644
index 00000000000..5ce1a450984
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-flow-valid.txt
@@ -0,0 +1,18 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 7 tests
+
+1 Pass
+6 Fail
+Details
+Result	Test Name	MessageFail	e.style['flex-flow'] = "column nowrap" should set the property value	
+Fail	e.style['flex-flow'] = "nowrap column" should set the property value	
+Pass	e.style['flex-flow'] = "wrap row-reverse" should set the property value	
+Fail	e.style['flex-flow'] = "nowrap" should set the property value	
+Fail	e.style['flex-flow'] = "row nowrap" should set the property value	
+Fail	e.style['flex-flow'] = "wrap" should set the property value	
+Fail	e.style['flex-flow'] = "row wrap" should set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-computed.txt
new file mode 100644
index 00000000000..10405be76bf
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-computed.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Pass
+Details
+Result	Test Name	MessagePass	Property flex-grow value '1'	
+Pass	Property flex-grow value '2.34e+06'	
+Pass	Property flex-grow value '6.78e+08'	
+Pass	Property flex-grow value '0'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-invalid.txt
new file mode 100644
index 00000000000..b76d166d1dd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-invalid.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+3 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	e.style['flex-grow'] = "2e3.4" should not set the property value	
+Pass	e.style['flex-grow'] = "-+5" should not set the property value	
+Pass	e.style['flex-grow'] = "6 7" should not set the property value	
+Fail	e.style['flex-grow'] = "1." should not set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-valid.txt
new file mode 100644
index 00000000000..5edd49837b2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-grow-valid.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex-grow'] = "1" should set the property value	
+Pass	e.style['flex-grow'] = "23.4e5" should set the property value	
+Pass	e.style['flex-grow'] = "+.678E9" should set the property value	
+Pass	e.style['flex-grow'] = ".0" should set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-invalid.txt
new file mode 100644
index 00000000000..7f599fe935c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-invalid.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex'] = "none 1" should not set the property value	
+Pass	e.style['flex'] = "2 3 4" should not set the property value	
+Pass	e.style['flex'] = "5px 7%" should not set the property value	
+Pass	e.style['flex'] = "9 none" should not set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shorthand.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shorthand.txt
new file mode 100644
index 00000000000..86a9398ac4d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shorthand.txt
@@ -0,0 +1,50 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 40 tests
+
+40 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex'] = "none" should set flex-basis	
+Pass	e.style['flex'] = "none" should set flex-grow	
+Pass	e.style['flex'] = "none" should set flex-shrink	
+Pass	e.style['flex'] = "none" should not set unrelated longhands	
+Pass	e.style['flex'] = "1" should set flex-basis	
+Pass	e.style['flex'] = "1" should set flex-grow	
+Pass	e.style['flex'] = "1" should set flex-shrink	
+Pass	e.style['flex'] = "1" should not set unrelated longhands	
+Pass	e.style['flex'] = "2 3" should set flex-basis	
+Pass	e.style['flex'] = "2 3" should set flex-grow	
+Pass	e.style['flex'] = "2 3" should set flex-shrink	
+Pass	e.style['flex'] = "2 3" should not set unrelated longhands	
+Pass	e.style['flex'] = "4 5 6px" should set flex-basis	
+Pass	e.style['flex'] = "4 5 6px" should set flex-grow	
+Pass	e.style['flex'] = "4 5 6px" should set flex-shrink	
+Pass	e.style['flex'] = "4 5 6px" should not set unrelated longhands	
+Pass	e.style['flex'] = "7% 8" should set flex-basis	
+Pass	e.style['flex'] = "7% 8" should set flex-grow	
+Pass	e.style['flex'] = "7% 8" should set flex-shrink	
+Pass	e.style['flex'] = "7% 8" should not set unrelated longhands	
+Pass	e.style['flex'] = "8 auto" should set flex-basis	
+Pass	e.style['flex'] = "8 auto" should set flex-grow	
+Pass	e.style['flex'] = "8 auto" should set flex-shrink	
+Pass	e.style['flex'] = "8 auto" should not set unrelated longhands	
+Pass	e.style['flex'] = "content" should set flex-basis	
+Pass	e.style['flex'] = "content" should set flex-grow	
+Pass	e.style['flex'] = "content" should set flex-shrink	
+Pass	e.style['flex'] = "content" should not set unrelated longhands	
+Pass	e.style['flex'] = "0 fit-content" should set flex-basis	
+Pass	e.style['flex'] = "0 fit-content" should set flex-grow	
+Pass	e.style['flex'] = "0 fit-content" should set flex-shrink	
+Pass	e.style['flex'] = "0 fit-content" should not set unrelated longhands	
+Pass	e.style['flex'] = "1 0 max-content" should set flex-basis	
+Pass	e.style['flex'] = "1 0 max-content" should set flex-grow	
+Pass	e.style['flex'] = "1 0 max-content" should set flex-shrink	
+Pass	e.style['flex'] = "1 0 max-content" should not set unrelated longhands	
+Pass	e.style['flex'] = "auto 1 2" should set flex-basis	
+Pass	e.style['flex'] = "auto 1 2" should set flex-grow	
+Pass	e.style['flex'] = "auto 1 2" should set flex-shrink	
+Pass	e.style['flex'] = "auto 1 2" should not set unrelated longhands	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-computed.txt
new file mode 100644
index 00000000000..b3bbc2d38b2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-computed.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Pass
+Details
+Result	Test Name	MessagePass	Property flex-shrink value '1'	
+Pass	Property flex-shrink value '2.34e+06'	
+Pass	Property flex-shrink value '6.78e+08'	
+Pass	Property flex-shrink value '0'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-invalid.txt
new file mode 100644
index 00000000000..b597cab3c61
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-invalid.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+3 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	e.style['flex-shrink'] = "2e3.4" should not set the property value	
+Pass	e.style['flex-shrink'] = "-+5" should not set the property value	
+Pass	e.style['flex-shrink'] = "6 7" should not set the property value	
+Fail	e.style['flex-shrink'] = "1." should not set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-valid.txt
new file mode 100644
index 00000000000..d0dc0ab2bbd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-shrink-valid.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex-shrink'] = "1" should set the property value	
+Pass	e.style['flex-shrink'] = "23.4e5" should set the property value	
+Pass	e.style['flex-shrink'] = "+.678E9" should set the property value	
+Pass	e.style['flex-shrink'] = ".0" should set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-valid.txt
new file mode 100644
index 00000000000..e9adc8dfa40
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-valid.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex'] = "none" should set the property value	
+Pass	e.style['flex'] = "1" should set the property value	
+Pass	e.style['flex'] = "2 3" should set the property value	
+Pass	e.style['flex'] = "4 5 6px" should set the property value	
+Pass	e.style['flex'] = "7% 8" should set the property value	
+Pass	e.style['flex'] = "8 auto" should set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-computed.txt
new file mode 100644
index 00000000000..45188189677
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-computed.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+3 Pass
+Details
+Result	Test Name	MessagePass	Property flex-wrap value 'nowrap'	
+Pass	Property flex-wrap value 'wrap'	
+Pass	Property flex-wrap value 'wrap-reverse'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-invalid.txt
new file mode 100644
index 00000000000..2e13d1b9d2d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-invalid.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex-wrap'] = "auto" should not set the property value	
+Pass	e.style['flex-wrap'] = "nowrap wrap" should not set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-valid.txt
new file mode 100644
index 00000000000..73da317bcb0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/flex-wrap-valid.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+3 Pass
+Details
+Result	Test Name	MessagePass	e.style['flex-wrap'] = "nowrap" should set the property value	
+Pass	e.style['flex-wrap'] = "wrap" should set the property value	
+Pass	e.style['flex-wrap'] = "wrap-reverse" should set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-computed.txt
new file mode 100644
index 00000000000..abf7ce1a771
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-computed.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+3 Pass
+Details
+Result	Test Name	MessagePass	Property order value '0'	
+Pass	Property order value '123'	
+Pass	Property order value '-45'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-invalid.txt
new file mode 100644
index 00000000000..a45d6408092
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-invalid.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+3 Pass
+Details
+Result	Test Name	MessagePass	e.style['order'] = "auto" should not set the property value	
+Pass	e.style['order'] = "123.45" should not set the property value	
+Pass	e.style['order'] = "123 45" should not set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-valid.txt
new file mode 100644
index 00000000000..6580b4eb882
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/order-valid.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+3 Pass
+Details
+Result	Test Name	MessagePass	e.style['order'] = "0" should set the property value	
+Pass	e.style['order'] = "123" should set the property value	
+Pass	e.style['order'] = "-45" should set the property value	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/webkit-aliases.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/webkit-aliases.txt
new file mode 100644
index 00000000000..f248cf645e5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/parsing/webkit-aliases.txt
@@ -0,0 +1,23 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 12 tests
+
+10 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	-webkit-align-content is a legacy name alias for align-content	
+Pass	-webkit-align-items is a legacy name alias for align-items	
+Pass	-webkit-align-self is a legacy name alias for align-self	
+Fail	-webkit-flex is a legacy name alias for flex	
+Pass	-webkit-flex-basis is a legacy name alias for flex-basis	
+Pass	-webkit-flex-direction is a legacy name alias for flex-direction	
+Fail	-webkit-flex-flow is a legacy name alias for flex-flow	
+Pass	-webkit-flex-grow is a legacy name alias for flex-grow	
+Pass	-webkit-flex-shrink is a legacy name alias for flex-shrink	
+Pass	-webkit-flex-wrap is a legacy name alias for flex-wrap	
+Pass	-webkit-justify-content is a legacy name alias for justify-content	
+Pass	-webkit-order is a legacy name alias for order	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-000.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-000.txt
new file mode 100644
index 00000000000..32e1e0f7586
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-000.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+3 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Pass	.flexbox 3	
+Fail	.flexbox 4	
+Fail	.flexbox 5	
+Fail	.flexbox 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-001.txt
new file mode 100644
index 00000000000..464a982d2c6
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-001.txt
@@ -0,0 +1,24 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 13 tests
+
+12 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	.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	
+Fail	.flexbox 12	
+Pass	.flexbox 13	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-003.txt
new file mode 100644
index 00000000000..54f3c66caac
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-003.txt
@@ -0,0 +1,18 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 7 tests
+
+5 Pass
+2 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Pass	.flexbox 3	
+Pass	.flexbox 4	
+Pass	.flexbox 5	
+Fail	.flexbox 6	
+Fail	.flexbox 7	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-011.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-011.txt
new file mode 100644
index 00000000000..907b8ef96d1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-011.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	#outer 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-012.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-012.txt
new file mode 100644
index 00000000000..1ced2d2363e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-012.txt
@@ -0,0 +1,21 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 10 tests
+
+6 Pass
+4 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Pass	.flexbox 3	
+Fail	.flexbox 4	
+Fail	.flexbox 5	
+Pass	.flexbox 6	
+Pass	.flexbox 7	
+Pass	.flexbox 8	
+Fail	.flexbox 9	
+Fail	.flexbox 10	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-013.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-013.txt
new file mode 100644
index 00000000000..17e1160ad69
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-heights-013.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Pass	.flexbox 3	
+Pass	.flexbox 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-margins-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-margins-001.txt
new file mode 100644
index 00000000000..ab1be98fac9
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-margins-001.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+3 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Pass	.flexbox 3	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-max-width-cross-axis.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-max-width-cross-axis.txt
new file mode 100644
index 00000000000..dbaf01d1a74
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-max-width-cross-axis.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size-quirks-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size-quirks-002.txt
new file mode 100644
index 00000000000..f3a32a6468f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size-quirks-002.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	.pct 1	
+Fail	.pct 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size-quirks.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size-quirks.txt
new file mode 100644
index 00000000000..23311727b6a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size-quirks.txt
@@ -0,0 +1,19 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+7 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Fail	.flexbox 3	
+Pass	.flexbox 4	
+Pass	.flexbox 5	
+Pass	.flexbox 6	
+Pass	.flexbox 7	
+Pass	.flexbox 8	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size.txt
new file mode 100644
index 00000000000..23311727b6a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/percentage-size.txt
@@ -0,0 +1,19 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+7 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Fail	.flexbox 3	
+Pass	.flexbox 4	
+Pass	.flexbox 5	
+Pass	.flexbox 6	
+Pass	.flexbox 7	
+Pass	.flexbox 8	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/position-relative-percentage-top-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/position-relative-percentage-top-001.txt
new file mode 100644
index 00000000000..b1a7f823373
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/position-relative-percentage-top-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.border 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/quirks-auto-block-size-with-percentage-item.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/quirks-auto-block-size-with-percentage-item.txt
new file mode 100644
index 00000000000..7584c3da0c2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/quirks-auto-block-size-with-percentage-item.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	#container 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/radiobutton-min-size.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/radiobutton-min-size.txt
new file mode 100644
index 00000000000..d0ba2c90033
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/radiobutton-min-size.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	two radio button widths are identical	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-align-items.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-align-items.txt
new file mode 100644
index 00000000000..dbaf01d1a74
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-align-items.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-image-load.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-image-load.txt
new file mode 100644
index 00000000000..8e8544a974c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-image-load.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	#test 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-input.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-input.txt
new file mode 100644
index 00000000000..98a43414579
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/relayout-input.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	relayout-input	
+Pass	#target 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/scrollbars-auto-min-content-sizing.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/scrollbars-auto-min-content-sizing.txt
new file mode 100644
index 00000000000..d4f98dc14bb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/scrollbars-auto-min-content-sizing.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	scrollbars-auto-min-content-sizing	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/shrinking-column-flexbox.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/shrinking-column-flexbox.txt
new file mode 100644
index 00000000000..00694698fff
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/shrinking-column-flexbox.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	body 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/stretch-after-sibling-size-change.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/stretch-after-sibling-size-change.txt
new file mode 100644
index 00000000000..b56c9d0bdab
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/stretch-after-sibling-size-change.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/stretched-child-shrink-on-relayout.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/stretched-child-shrink-on-relayout.txt
new file mode 100644
index 00000000000..d854000146d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/stretched-child-shrink-on-relayout.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Pass
+Details
+Result	Test Name	MessagePass	.flexbox 1	
+Pass	.flexbox 2	
+Pass	.flexbox 3	
+Pass	.flexbox 4	
+Pass	.flexbox 5	
+Pass	.flexbox 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/svg-root-as-flex-item-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/svg-root-as-flex-item-006.txt
new file mode 100644
index 00000000000..547f286d81e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/svg-root-as-flex-item-006.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	svg 1: undefined	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/table-with-percent-intrinsic-width.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/table-with-percent-intrinsic-width.txt
new file mode 100644
index 00000000000..46f2e2c9fd2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/table-with-percent-intrinsic-width.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	table 1	
+Fail	table 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/text-as-flexitem-size-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/text-as-flexitem-size-001.txt
new file mode 100644
index 00000000000..bff68af3a45
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/text-as-flexitem-size-001.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+13 Pass
+5 Fail
+Details
+Result	Test Name	MessageFail	.flexbox > div 1	
+Fail	.flexbox > div 2	
+Pass	.flexbox > div 3	
+Pass	.flexbox > div 4	
+Fail	.flexbox > div 5	
+Pass	.flexbox > div 6	
+Pass	.flexbox > div 7	
+Fail	.flexbox > div 8	
+Pass	.flexbox > div 9	
+Pass	.flexbox > div 10	
+Fail	.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	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/META.yml b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/META.yml
new file mode 100644
index 00000000000..503fc08f576
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/META.yml
@@ -0,0 +1,8 @@
+spec: https://drafts.csswg.org/css-flexbox/
+suggested_reviewers:
+  - kojiishi
+  - plinss
+  - cbiesinger
+  - fantasai
+  - rachelandrew
+  - tabatkins
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/WEB_FEATURES.yml b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/WEB_FEATURES.yml
new file mode 100644
index 00000000000..69d08754517
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/WEB_FEATURES.yml
@@ -0,0 +1,7 @@
+features:
+- name: flexbox
+  files: "**"
+# TODO: map *gap* to flexbox-gap. This is currently not possible without the
+# tests being associated with both flexbox and flexbox-gap. All but one of the
+# *gap* tests are passing in all browsers, so lumping them in with flexbox is
+# relatively harmless.
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/abspos-descendent-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/abspos-descendent-001.html
new file mode 100644
index 00000000000..ecf4969f693
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html
new file mode 100644
index 00000000000..5de2ba602af
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="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://github.com/w3c/csswg-drafts/issues/7596#issuecomment-1225952646">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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" is actually the only alignment that matters here.
+         The flex containers' various "align-content" values have no impact on
+         the positioning of absolutely-positioned flex children. */
+      align-self: center;
+    }
+  </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('.container > div')">
+  <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 data-offset-x="2" data-offset-y="3"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="3"></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 data-offset-x="2" data-offset-y="-1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="align-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="align-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="align-content: stretch"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html
new file mode 100644
index 00000000000..eca05150829
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-001.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="5"></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" data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html
new file mode 100644
index 00000000000..51a0074fb08
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-002.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></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" data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html
new file mode 100644
index 00000000000..ebf7e21be63
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-003.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></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" data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html
new file mode 100644
index 00000000000..fc745714ec7
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-004.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="1"></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" data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html
new file mode 100644
index 00000000000..006ddf75666
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-005.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="1"></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" data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html
new file mode 100644
index 00000000000..39f9c9b0996
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-006.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y=""></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></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" data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html
new file mode 100644
index 00000000000..e4ab7290ab2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-007.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="6" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></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" data-offset-x="0" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html
new file mode 100644
index 00000000000..ce5fd64fa1b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-008.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="6" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="5"></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" data-offset-x="0" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html
new file mode 100644
index 00000000000..a2db5a78215
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-001.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></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" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html
new file mode 100644
index 00000000000..70caa867fac
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-002.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos LTR children in a RTL row flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></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" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html
new file mode 100644
index 00000000000..23ff468ffee
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-003.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></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" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html
new file mode 100644
index 00000000000..a6c87ebced3
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-rtl-004.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos LTR children in a RTL column flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></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" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html
new file mode 100644
index 00000000000..247937b61e8
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <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="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: left" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: right" data-offset-x="10" data-offset-y="1"></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" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: left" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: right" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html
new file mode 100644
index 00000000000..49d6c1926be
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-002.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <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="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: left" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: right" data-offset-x="10" data-offset-y="1"></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" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: left" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: right" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html
new file mode 100644
index 00000000000..3c91136f702
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-003.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></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" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html
new file mode 100644
index 00000000000..a1e8fd8b097
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos vertical-lr + RTL children in a vertical-rl column flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="10" data-offset-y="5"></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" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: normal" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: stretch" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: last baseline" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center" data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container"><div style="align-self: start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-start" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container"><div style="align-self: self-end" data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start" data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container"><div style="align-self: flex-end" data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html
new file mode 100644
index 00000000000..7f9b5fad022
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-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-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></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 data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html
new file mode 100644
index 00000000000..a29ab49dc3b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.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 wrap-reverse flex container, with various "justify-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></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 data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html
new file mode 100644
index 00000000000..7721637da6b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.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-reverse flex container, with various "justify-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></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 data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.html
new file mode 100644
index 00000000000..4bf39bd3bae
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-004.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-reverse wrap-reverse flex container, with various "justify-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></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 data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.html
new file mode 100644
index 00000000000..2234e062d23
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-005.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 column flex container, with various "justify-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></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 data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.html
new file mode 100644
index 00000000000..71fd8d3a4f6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-006.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 column wrap-reverse flex container, with various "justify-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></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 data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html
new file mode 100644
index 00000000000..6389595c440
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.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 column-reverse flex container, with various "justify-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></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 data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html
new file mode 100644
index 00000000000..5829eeb31ca
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.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 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="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></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 data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html
new file mode 100644
index 00000000000..7bc4b86093d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "justify-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></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 data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html
new file mode 100644
index 00000000000..08556f3cfd3
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-002.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "justify-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></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 data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html
new file mode 100644
index 00000000000..d45dd004e75
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-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 "justify-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="5"></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 data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="-2" data-offset-y="-1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="-3"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html
new file mode 100644
index 00000000000..7db7127ba15
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "justify-content" values</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/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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>
+  <script src="../../../resources/testharness.js"></script>
+  <script src="../../../resources/testharnessreport.js"></script>
+  <script src="../../../resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.container > div')">
+  <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 data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></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 data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="0" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="-2" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-001.html
new file mode 100644
index 00000000000..31b00efe943
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-002.html
new file mode 100644
index 00000000000..4a5098deaac
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-003.html
new file mode 100644
index 00000000000..d34c1f91959
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-004.html
new file mode 100644
index 00000000000..b230ee6fe0e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-012.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-012.html
new file mode 100644
index 00000000000..a49281613b5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-012.html
@@ -0,0 +1,116 @@
+<!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="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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-014.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-014.html
new file mode 100644
index 00000000000..f0edea981cb
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-015.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/abspos/position-absolute-015.html
new file mode 100644
index 00000000000..597fa769033
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-horiz-001a.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-horiz-001a.html
new file mode 100644
index 00000000000..df884442bad
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-horiz-001b.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-horiz-001b.html
new file mode 100644
index 00000000000..49ffa1087c2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-horiz-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-horiz-002.html
new file mode 100644
index 00000000000..0ac9929fa5b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-vert-001a.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-vert-001a.html
new file mode 100644
index 00000000000..11d08239aec
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-vert-001b.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-vert-001b.html
new file mode 100644
index 00000000000..1715d5d6951
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-vert-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-vert-002.html
new file mode 100644
index 00000000000..c5d8f799711
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wmvert-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wmvert-001.html
new file mode 100644
index 00000000000..41f4f171b4a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-001.html
new file mode 100644
index 00000000000..3807a7dd009
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-001.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
+<title>css-flexbox: Tests align-content with single-line flex-wrap: wrap</title>
+<style>
+.default {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    height: 70px;
+    border: 1px solid red;
+    margin: 5px;
+}
+
+.default > div {
+  height: 20px;
+}
+
+.verticalWriting {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    width: 70px;
+    border: 1px solid red;
+    margin: 5px;
+    writing-mode: vertical-lr;
+}
+
+.verticalWriting > div {
+  width: 20px;
+}
+</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('.default, .verticalWriting'); ">
+<div id=log></div>
+<p>Test that we honor align-content even in single-line flex containers</p>
+<div class="default" style="align-content: flex-start">
+<div data-offset-y="0">This text should be at the top of its container</div>
+</div>
+<div class="default" style="align-content: flex-end">
+<div data-offset-y="50">This text should be at the bottom of its container</div>
+</div>
+<div class="default" style="align-content: center">
+<div data-offset-y="25">This text should be centered in its container</div>
+</div>
+<div class="default" style="align-content: space-between">
+<div data-offset-y="0">This text should be at the top of its container</div>
+</div>
+<div class="default" style="align-content: space-around">
+<div data-offset-y="25">This text should be centered in its container</div>
+</div>
+<div class="default" style="align-content: space-evenly">
+<div data-offset-y="25">This text should be centered in its container</div>
+</div>
+<div class="default" style="align-content: stretch">
+<div data-offset-y="0">This text should be at the top of its container</div>
+</div>
+<div class="verticalWriting" style="align-content: flex-start">
+<div data-offset-x="0">This text should be at the left of its container</div>
+</div>
+<div class="verticalWriting" style="align-content: flex-end">
+<div data-offset-x="50">This text should be at the right of its container</div>
+</div>
+<div class="verticalWriting" style="align-content: center">
+<div data-offset-x="25">This text should be centered in its container</div>
+</div>
+<div class="verticalWriting" style="align-content: space-between">
+<div data-offset-x="0">This text should be at the left of its container</div>
+</div>
+<div class="verticalWriting" style="align-content: space-around">
+<div data-offset-x="25">This text should be centered in its container</div>
+</div>
+<div class="verticalWriting" style="align-content: stretch">
+<div data-offset-x="0">This text should be at the left of its container</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-002.html
new file mode 100644
index 00000000000..1fbcd965c97
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-002.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
+<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
+<style>
+.flex-horizontal {
+    width:600px;
+    display:flex;
+    height:100px;
+    background:gray;
+    margin-bottom:100px;
+}
+.flex-vertical {
+    width:100px;
+    display:flex;
+    flex-direction: column;
+    height:600px;
+    background:gray;
+    margin-top:200px;
+    margin-bottom:100px;
+}
+.item-horizontal {
+    width:150px;
+    background:yellow;
+    margin:10px;
+    flex:none;
+}
+.item-vertical {
+    height:150px;
+    background:yellow;
+    margin:10px;
+    flex:none;
+}
+.content1-horizontal {
+    width:100px;
+    height:150px;
+    background:red;
+}
+.content2-horizontal {
+    width:100px;
+    height:100px;
+    background:red;
+}
+.content3-horizontal {
+    width:100px;
+    height:50px;
+    background:red;
+}
+.content1-vertical {
+    width:150px;
+    height:100px;
+    background:red;
+}
+.content2-vertical {
+    width:100px;
+    height:100px;
+    background:red;
+}
+.content3-vertical {
+    width:50px;
+    height:100px;
+    background:red;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.flex-horizontal, .flex-vertical');">
+<div id=log></div>
+<p>Test for crbug.com/362848: Flex box word-wrap is not adhering to spec</p>
+<div class="flex-horizontal">
+    <div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div>
+</div>
+
+<div class="flex-horizontal" style="flex-wrap:wrap;">
+    <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
+</div>
+
+<div class="flex-horizontal" style="flex-wrap:wrap;">
+    <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
+</div>
+
+<div class="flex-vertical">
+    <div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div>
+</div>
+
+<div class="flex-vertical" style="flex-wrap:wrap;">
+    <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
+</div>
+
+<div class="flex-vertical" style="flex-wrap:wrap;">
+    <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-003.html
new file mode 100644
index 00000000000..e836ea4832b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-003.html
@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
+<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
+<style>
+.flexbox {
+    display: flex;
+    background-color: #aaa;
+    position: relative;
+    flex-wrap: wrap;
+}
+
+.horizontal {
+    width: 200px;
+    height: 120px;
+}
+.horizontal > div {
+    min-height: 20px;
+}
+.horizontal > :nth-child(1) {
+    width: 100px;
+    min-height: 10px;
+}
+.horizontal > :nth-child(2) {
+    width: 100px;
+}
+.horizontal > :nth-child(3) {
+    width: 200px;
+}
+.horizontal > :nth-child(4) {
+    width: 50px;
+}
+
+.vertical-rl {
+    writing-mode: vertical-rl;
+    width: 120px;
+    height: 20px;
+}
+.vertical-rl > div {
+    min-width: 20px;
+}
+.vertical-rl > :nth-child(1) {
+    height: 10px;
+    min-width: 10px;
+}
+.vertical-rl > :nth-child(2) {
+    height: 10px;
+}
+.vertical-rl > :nth-child(3) {
+    height: 20px;
+}
+.vertical-rl > :nth-child(4) {
+    height: 5px;
+}
+
+.flexbox :nth-child(1) {
+    background-color: lightblue;
+}
+.flexbox :nth-child(2) {
+    background-color: lightgreen;
+}
+.flexbox :nth-child(3) {
+    background-color: pink;
+}
+.flexbox :nth-child(4) {
+    background-color: yellow;
+}
+</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>
+<p>Test to make sure that align-content works properly.</p>
+
+<div data-expected-height="120" class="flexbox horizontal">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
+  <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-start">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-end">
+  <div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: center">
+  <div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-evenly">
+  <div data-offset-x="0" data-offset-y="15" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="15" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="85" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around">
+  <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
+  <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
+</div>
+
+<!-- Negative overflow goes out the top. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: flex-end; height: 30px">
+  <div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
+</div>
+
+<!-- If we overflow, we should true center. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: center; height: 30px">
+  <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
+</div>
+
+<!-- If we overflow, we should be the same as flex-start. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
+</div>
+
+<!-- If we overflow, we should safe center. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
+</div>
+
+<!-- If we overflow, we should true center. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
+</div>
+
+<!-- Stretch should only grow, not shrink. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
+</div>
+
+<!-- 0 lines should not crash. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
+</div>
+
+<!-- 1 line should not crash. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div>
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
+  <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
+  <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
+</div>
+
+
+<div data-expected-width="120" class="flexbox vertical-rl">
+  <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
+  <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
+  <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-start">
+  <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-end">
+  <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: center">
+  <div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-between">
+  <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around">
+  <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-evenly">
+  <div data-offset-x="85" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="85" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="15" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch">
+  <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
+  <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
+  <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
+</div>
+
+<!-- Negative overflow goes out the right. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;">
+  <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- If we overflow, we should true center. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: center; width: 30px;">
+  <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- If we overflow, we should be the same as flex-start. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px;">
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- If we overflow, we should safe center. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;">
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- If we overflow, we should true center. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px;">
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- Stretch should only grow, not shrink. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;">
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- 0 lines should not crash. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
+</div>
+
+<!-- 1 line should not crash. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
+  <div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div>
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-005.html
new file mode 100644
index 00000000000..38cde1e2840
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-content-wrap-005.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values" />
+<meta name="assert" content="Flex items are positioned correctly in wrap-reverse align-content:start/end containers in either text direction.">
+
+<style>
+.flexbox {
+  display: flex;
+  width: 75px; /* make the row flexbox wrap */
+  height: 150px;
+  flex-wrap: wrap-reverse;
+  position: relative;
+  float: left;
+  margin-right: 20px;
+  border: 1px solid black;
+}
+
+.flexitem {
+  width: 50px;
+  height: 50px;
+}
+
+.flexbox :nth-child(1) {
+    background-color: blue;
+}
+.flexbox :nth-child(2) {
+    background-color: orange;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.flexitem')">
+
+<div class=flexbox style="align-content: start;">
+  <div class=flexitem data-offset-x=0 data-offset-y=50></div>
+  <div class=flexitem data-offset-x=0 data-offset-y=0></div>
+</div>
+
+<div class=flexbox style="align-content: end;">
+  <div class=flexitem data-offset-x=0 data-offset-y=100></div>
+  <div class=flexitem data-offset-x=0 data-offset-y=50></div>
+</div>
+
+<div class=flexbox style="align-content: start; direction: rtl;">
+  <div class=flexitem data-offset-x=25 data-offset-y=50></div>
+  <div class=flexitem data-offset-x=25 data-offset-y=0></div>
+</div>
+
+<div class=flexbox style="align-content: end; direction: rtl">
+  <div class=flexitem data-offset-x=25 data-offset-y=100></div>
+  <div class=flexitem data-offset-x=25 data-offset-y=50></div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.html
new file mode 100644
index 00000000000..9cc85b1290b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-flexbox-item.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: vertical-lr;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: vertical-lr;
+}
+.inner {
+    display: flex;
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div class="inner" data-offset-x="21">
+    <div>two<br>lines</div>
+  </div>
+  <div data-offset-x="56">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.html
new file mode 100644
index 00000000000..4e15d2ac76e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-grid-item.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: vertical-lr;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: vertical-lr;
+}
+.inner {
+    display: grid;
+    grid-template: auto / auto;
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div class="inner" data-offset-x="21">
+    <div>two<br>lines</div>
+  </div>
+  <div data-offset-x="56">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-items.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-items.html
new file mode 100644
index 00000000000..350e2e53c6d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-items.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: vertical-lr;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: vertical-lr;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div data-offset-x="21">two<br>lines</div>
+  <div data-offset-x="51">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.html
new file mode 100644
index 00000000000..c772ddac236
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-lr-table-item.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: vertical-lr;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: vertical-lr;
+}
+.inner {
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > *')">
+<div id="target">
+  <table class="inner" data-offset-x="21">
+    <tr>
+      <td style="vertical-align: baseline;">
+        <div>two<br>lines</div>
+      </td>
+    </tr>
+  </table>
+  <div data-offset-x="59">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.html
new file mode 100644
index 00000000000..0e4551801e9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  font-size: 16px;
+  line-height: 16px;
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: vertical-rl;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: vertical-rl;
+}
+.inner {
+    display: flex;
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div class="inner" data-offset-x="146">
+    <div>two<br>lines</div>
+  </div>
+  <div data-offset-x="191">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.html
new file mode 100644
index 00000000000..4904422bac1
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: vertical-rl;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: vertical-rl;
+}
+.inner {
+    display: grid;
+    grid-template: auto / auto;
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div class="inner" data-offset-x="146">
+    <div>two<br>lines</div>
+  </div>
+  <div data-offset-x="191">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-items.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-items.html
new file mode 100644
index 00000000000..cef5538c416
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-items.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: vertical-rl;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: vertical-rl;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div data-offset-x="161">two<br>lines</div>
+  <div data-offset-x="201">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.html
new file mode 100644
index 00000000000..bd6fcc82d81
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-column-vert-rl-table-item.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: vertical-rl;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: vertical-rl;
+}
+.inner {
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > *')">
+<div id="target">
+  <table class="inner" data-offset-x="140">
+    <tr>
+      <td style="vertical-align: baseline;">
+        <div>two<br>lines</div>
+      </td>
+    </tr>
+  </table>
+  <div data-offset-x="188">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.html
new file mode 100644
index 00000000000..5801eaf4c02
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-flexbox-item.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  writing-mode: vertical-lr;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: horizontal-tb;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: horizontal-tb;
+}
+.inner {
+    display: flex;
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div class="inner" data-offset-y="11">
+    <div>two<br>lines</div>
+  </div>
+  <div data-offset-y="21">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.html
new file mode 100644
index 00000000000..d2c88f979d3
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-grid-item.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  writing-mode: vertical-lr;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: horizontal-tb;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: horizontal-tb;
+}
+.inner {
+    display: grid;
+    grid-template: auto / auto;
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div class="inner" data-offset-y="11">
+    <div>two<br>lines</div>
+  </div>
+  <div data-offset-y="21">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.html
new file mode 100644
index 00000000000..11991939046
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-items.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  writing-mode: vertical-lr;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: horizontal-tb;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: horizontal-tb;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div data-offset-y="11">two<br>lines</div>
+  <div data-offset-y="11">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.html
new file mode 100644
index 00000000000..5f16a4f50b6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-lr-column-horz-table-item.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  writing-mode: vertical-lr;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: horizontal-tb;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: horizontal-tb;
+}
+.inner {
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <table class="inner" data-offset-y="130">
+    <tr>
+      <td style="vertical-align: baseline;">
+        <div>two<br>lines</div>
+      </td>
+    </tr>
+  </table>
+  <div data-offset-y="24">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.html
new file mode 100644
index 00000000000..3049b5d6e88
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-flexbox-item.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  writing-mode: vertical-rl;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: horizontal-tb;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: horizontal-tb;
+}
+.inner {
+    display: flex;
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div class="inner" data-offset-y="11">
+    <div>two<br>lines</div>
+  </div>
+  <div data-offset-y="21">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.html
new file mode 100644
index 00000000000..a82200220f2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-grid-item.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  writing-mode: vertical-rl;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: horizontal-tb;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: horizontal-tb;
+}
+.inner {
+    display: grid;
+    grid-template: auto / auto;
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div class="inner" data-offset-y="11">
+    <div>two<br>lines</div>
+  </div>
+  <div data-offset-y="21">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.html
new file mode 100644
index 00000000000..28dfe70e870
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-items.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  writing-mode: vertical-rl;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: horizontal-tb;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: horizontal-tb;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <div data-offset-y="11">two<br>lines</div>
+  <div data-offset-y="11">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.html
new file mode 100644
index 00000000000..e6c4d91c533
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-items-baseline-vert-rl-column-horz-table-item.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  writing-mode: vertical-rl;
+  align-items: baseline;
+  border: 3px solid black;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 10px;
+}
+#target > :nth-child(1) {
+  background: hotpink;
+  writing-mode: horizontal-tb;
+  padding-left: 30px;
+  margin-left: 10px;
+}
+#target > :nth-child(2) {
+  background: papayawhip;
+  writing-mode: horizontal-tb;
+}
+.inner {
+    border: 5px solid black;
+    padding: 5px;
+}
+</style>
+<body onload="checkLayout('#target > div')">
+<div id="target">
+  <table class="inner" data-offset-y="130">
+    <tr>
+      <td style="vertical-align: baseline;">
+        <div>two<br>lines</div>
+      </td>
+    </tr>
+  </table>
+  <div data-offset-y="24">hello</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-self-014.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-self-014.html
new file mode 100644
index 00000000000..57dce00748a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/align-self-014.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: align-self: center content with flex-direction: column.</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#align-self-property">
+<link rel="help" href="https://crbug.com/750553"/>
+<meta name="assert" content="This test ensures that no unnecessary horizontal offset is applied to inline content in a 'align-self: center' box, inside of a flexbox with 'flex-direction: column'."/>
+
+<style>
+html, body {
+  margin: 0;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  align-self: center;
+}
+
+.content > div {
+  width: 400px;
+  display: inline-block;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.content')">
+
+<div class="content" data-offset-x="0">
+  <div data-offset-x="0">X</div>
+  <div>X</div>
+  <div>X</div>
+  <div>X</div>
+  <div>X</div>
+</div>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-001.html
new file mode 100644
index 00000000000..da547567f72
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-001.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-right: 20px;
+  padding-right: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(4) {
+  background: orange;
+  margin-left: 20px;
+  padding-left: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(5) {
+  background: cyan;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(6) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-x="120">line1<br>line2</div>
+  <div data-offset-x="105">line1<br>line2</div>
+  <div data-offset-x="126">line1<br>line2</div>
+  <div data-offset-x="20">line1<br>line2</div>
+  <div data-offset-x="35">line1<br>line2</div>
+  <div data-offset-x="42">line1<br>line2</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-002.html
new file mode 100644
index 00000000000..71b6fd48c20
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-002.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<style>
+#target {
+  display: flex;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-right: 20px;
+  padding-right: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(4) {
+  background: orange;
+  margin-left: 20px;
+  padding-left: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(5) {
+  background: cyan;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(6) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-x="120">line1<br>line2</div>
+  <div data-offset-x="105">line1<br>line2</div>
+  <div data-offset-x="126">line1<br>line2</div>
+  <div data-offset-x="20">line1<br>line2</div>
+  <div data-offset-x="35">line1<br>line2</div>
+  <div data-offset-x="42">line1<br>line2</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-003.html
new file mode 100644
index 00000000000..d6278744ac7
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-003.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<style>
+#target {
+  display: flex;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-right: 20px;
+  padding-right: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(4) {
+  background: orange;
+  margin-left: 20px;
+  padding-left: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(5) {
+  background: cyan;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(6) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-x="120">line1<br>line2</div>
+  <div data-offset-x="105">line1<br>line2</div>
+  <div data-offset-x="126">line1<br>line2</div>
+  <div data-offset-x="20">line1<br>line2</div>
+  <div data-offset-x="35">line1<br>line2</div>
+  <div data-offset-x="42">line1<br>line2</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-004.html
new file mode 100644
index 00000000000..ec040179799
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-004.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<style>
+#target {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  flex-direction: column;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-right: 20px;
+  padding-right: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(4) {
+  background: orange;
+  margin-left: 20px;
+  padding-left: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(5) {
+  background: cyan;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(6) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-x="15">line1<br>line2</div>
+  <div data-offset-x="0">line1<br>line2</div>
+  <div data-offset-x="21">line1<br>line2</div>
+  <div data-offset-x="125">line1<br>line2</div>
+  <div data-offset-x="140">line1<br>line2</div>
+  <div data-offset-x="147">line1<br>line2</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-005.html
new file mode 100644
index 00000000000..e4d629b6f9b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-005.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<style>
+#target {
+  display: flex;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cornflowerblue 3px;
+  outline-offset: -3px;
+}
+#target > div {
+  flex: none;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  font-size: 20px;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 10px;
+  writing-mode: vertical-lr;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-y="20"><span></span><br><span></span></div>
+  <div data-offset-y="0"><span></span><br><span></span></div>
+  <div data-offset-y="50"><span></span><br><span></span></div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-006.html
new file mode 100644
index 00000000000..49fda33adbb
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-006.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  height: 100px;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-rl;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cornflowerblue 3px;
+  outline-offset: -3px;
+}
+#target > div {
+  flex: none;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  font-size: 20px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 10px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-y="20"><span></span><br><span></span></div>
+  <div data-offset-y="0"><span></span><br><span></span></div>
+  <div data-offset-y="55"><span></span><br><span></span></div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-007.html
new file mode 100644
index 00000000000..44029104737
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-007.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment">
+<style>
+#target {
+  display: flex;
+  flex-direction: column;
+  height: 100px;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-lr;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cornflowerblue 3px;
+  outline-offset: -3px;
+}
+#target > div {
+  flex: none;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  font-size: 20px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 10px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-y="20"><span></span><br><span></span></div>
+  <div data-offset-y="0"><span></span><br><span></span></div>
+  <div data-offset-y="55"><span></span><br><span></span></div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html
new file mode 100644
index 00000000000..5724196afc5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+fieldset {
+  padding: 10px;
+  border: solid 10px;
+  margin: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <fieldset data-offset-y="0">
+    <legend><span></span></legend>
+    <span></span><br><span></span>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="40"><span></span></div>
+  <fieldset data-offset-y="0">
+    <span></span><br><span></span>
+    <legend><span></span></legend>
+  </table>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html
new file mode 100644
index 00000000000..a84d4551bf9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-002.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-rl;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+fieldset {
+  padding: 10px;
+  border: solid 10px;
+  margin: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <fieldset data-offset-x="0">
+    <legend><span></span></legend>
+    <span></span><br><span></span>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="15"><span></span></div>
+  <fieldset data-offset-x="0">
+    <span></span><br><span></span>
+    <legend><span></span></legend>
+  </table>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html
new file mode 100644
index 00000000000..b2e59842627
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-fieldset-003.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-lr;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+fieldset {
+  padding: 10px;
+  border: solid 10px;
+  margin: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <fieldset data-offset-x="0">
+    <legend><span></span></legend>
+    <span></span><br><span></span>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <fieldset data-offset-x="0">
+    <span></span><br><span></span>
+    <legend><span></span></legend>
+  </table>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-001.html
new file mode 100644
index 00000000000..fb643e9500d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-001.html
@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="25"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="25"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="50"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap-reverse -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="40"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="60"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-002.html
new file mode 100644
index 00000000000..2be6beacaa0
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-002.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-inline: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="50"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="20"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="70"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="33"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="38"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="50"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="20"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap-reverse -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="75"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="63"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="60"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="43"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-003.html
new file mode 100644
index 00000000000..39eb2a5ed45
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-003.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+  gap: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-004.html
new file mode 100644
index 00000000000..d3d310e985a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-flex-004.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+  gap: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="110"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="110"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-001.html
new file mode 100644
index 00000000000..b98c49a117d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-001.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  display: grid;
+  gap: 10px;
+  grid-template: 50px 50px / 50px 50px 50px;
+  border: solid 5px;
+  padding: 10px;
+}
+
+.inner > div:first-child,
+.inner > div:last-child {
+  align-self: start;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="100"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="25"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="90"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-002.html
new file mode 100644
index 00000000000..bc52e59ea20
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-002.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  display: grid;
+  gap: 10px;
+  grid-template: 50px 50px / 50px 50px 50px;
+  border: solid 5px;
+  padding: 10px;
+}
+
+.inner > div:first-child,
+.inner > div:last-child {
+  align-self: start;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="110"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="48"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="90"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="33"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="115"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="53"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-003.html
new file mode 100644
index 00000000000..d86b79cfaa6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-grid-003.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-lr;
+}
+
+.inner {
+  display: grid;
+  gap: 10px;
+  grid-template: 50px 50px / 50px 50px 50px;
+  border: solid 5px;
+  padding: 10px;
+}
+
+.inner > div:first-child,
+.inner > div:last-child {
+  align-self: start;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="93"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="50"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="108"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="88"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.html
new file mode 100644
index 00000000000..12b5a4d6d63
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
+<style>
+.target {
+  display: flex;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+.line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  border: solid 10px;
+  font-size: 40px !important;
+  overflow: hidden;
+}
+.line-clamp div {
+  background: orange;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Five lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Two lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Three lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+
+<!-- Wrapping div -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Nested div after first line -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Block within inline. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.html
new file mode 100644
index 00000000000..2493809fc6e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
+<style>
+.target {
+  display: flex;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+  writing-mode: vertical-rl;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+.line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  border: solid 10px;
+  font-size: 40px !important;
+  overflow: hidden;
+}
+.line-clamp div {
+  background: orange;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Five lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Two lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Three lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+
+<!-- Wrapping div -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Nested div after first line -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Block within inline. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.html
new file mode 100644
index 00000000000..f7ade2d66c4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
+<style>
+.target {
+  display: flex;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+  writing-mode: vertical-lr;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+.line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  border: solid 10px;
+  font-size: 40px !important;
+  overflow: hidden;
+}
+.line-clamp div {
+  background: orange;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Five lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Two lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Three lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+
+<!-- Wrapping div -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Nested div after first line -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Block within inline. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html
new file mode 100644
index 00000000000..54405ca67fb
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-001.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
+<style>
+.target {
+  display: flex;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+}
+.target > div {
+  background: hotpink;
+  font-size: 20px;
+}
+.multicol {
+  columns: 3;
+  column-fill: auto;
+  padding: 10px;
+  border: solid 10px;
+}
+.multicol > div {
+  break-inside: avoid;
+  break-before: column;
+  break-after: column;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Three columns, largest in the middle. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="100"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- Start spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="140"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- End spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="140"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html
new file mode 100644
index 00000000000..ecc547a4567
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-002.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
+<style>
+.target {
+  display: flex;
+  inline-size: 200px;
+  position: relative;
+  line-height: 0;
+  margin: 40px;
+  padding: 10px;
+  writing-mode: vertical-rl;
+}
+.target > div {
+  background: hotpink;
+  font-size: 20px;
+}
+.multicol {
+  columns: 3;
+  column-fill: auto;
+  padding: 10px;
+  border: solid 10px;
+}
+.multicol > div {
+  break-inside: avoid;
+  break-before: column;
+  break-after: column;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Three columns, largest in the middle. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- Start spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="140"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- End spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="145"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html
new file mode 100644
index 00000000000..eeed84e3840
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-multicol-003.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
+<style>
+.target {
+  display: flex;
+  inline-size: 200px;
+  position: relative;
+  line-height: 0;
+  margin: 40px;
+  padding: 10px;
+  writing-mode: vertical-lr;
+}
+.target > div {
+  background: hotpink;
+  font-size: 20px;
+}
+.multicol {
+  columns: 3;
+  column-fill: auto;
+  padding: 10px;
+  border: solid 10px;
+}
+.multicol > div {
+  break-inside: avoid;
+  break-before: column;
+  break-after: column;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Three columns, largest in the middle. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="95"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- Start spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="135"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- End spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="140"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html
new file mode 100644
index 00000000000..88c222d028e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-001.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  overflow: hidden;
+  inline-size: 100px;
+  block-size: 80px;
+  margin: 10px;
+  border: solid 5px;
+  padding: 10px;
+  font-size: 30px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="30">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="50">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="110"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="90"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html
new file mode 100644
index 00000000000..9799b1810fa
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-002.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  overflow: hidden;
+  inline-size: 100px;
+  block-size: 80px;
+  margin: 10px;
+  border: solid 5px;
+  padding: 10px;
+  font-size: 30px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="70"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="60"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="100"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="120"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="40">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html
new file mode 100644
index 00000000000..b3992a23392
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-overflow-003.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-lr;
+}
+
+.inner {
+  overflow: hidden;
+  inline-size: 100px;
+  block-size: 80px;
+  margin: 10px;
+  border: solid 5px;
+  padding: 10px;
+  font-size: 30px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="40"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="50"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="40">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="120"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="100"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-001.html
new file mode 100644
index 00000000000..b4b0485b48b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-001.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
+<style>
+.target {
+  display: flex;
+  position: relative;
+}
+.target > div, .target td {
+  background: hotpink;
+  font-size: 20px;
+  line-height: 0;
+}
+.target table { border-spacing: 0; }
+.target td { padding: 5px; min-width: 5px; min-height: 5px; }
+.target caption {
+  margin: 10px;
+  background: lime;
+  block-size: 20px;
+}
+.target span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <table data-offset-y="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="95"><span></span></div>
+  <table data-offset-y="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <table data-offset-y="0">
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <table data-offset-y="0">
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+  </table>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-002.html
new file mode 100644
index 00000000000..69acaf347e7
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-002.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+.target > div, .target td {
+  background: hotpink;
+  font-size: 20px;
+  line-height: 0;
+}
+.target table { border-spacing: 0; }
+.target td { padding: 5px; min-width: 5px; min-height: 5px; }
+.target caption {
+  margin: 10px;
+  background: lime;
+  block-size: 20px;
+}
+.target span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="115"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-003.html
new file mode 100644
index 00000000000..2466d24ff5c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/alignment/flex-align-baseline-table-003.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
+<style>
+.target {
+  display: flex;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+.target > div, .target td {
+  background: hotpink;
+  font-size: 20px;
+  line-height: 0;
+}
+.target table { border-spacing: 0; }
+.target td { padding: 5px; min-width: 5px; min-height: 5px; }
+.target caption {
+  margin: 10px;
+  background: lime;
+  block-size: 20px;
+}
+.target span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="95"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/box-sizing-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/box-sizing-001.html
new file mode 100644
index 00000000000..4ad8349d1fe
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/box-sizing-001.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: box-sizing</title>
+<link href="support/flexbox.css" rel="stylesheet">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing">
+<meta name="assert" content="This test checks the interactions between the flex layout mode and the two possible values for the box-sizing property: border-box and content-box" />
+
+<style>
+.flexbox {
+    border: 2px solid orange;
+}
+.h3 {
+    height: 300px;
+}
+.w3 {
+    width: 300px;
+}
+.h4 {
+    height: 400px;
+}
+.w4 {
+    width: 400px;
+}
+.border-box, .flexbox > div {
+    box-sizing: border-box;
+    height: 100px;
+    width: 100px;
+    border: 2px solid lightblue;
+    border-top-width: 4px;
+    padding: 3px;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body>
+<div id=log></div>
+
+All blue boxes are 100x100px with box-sizing: border-box and 2px border (4px border-top), we expect offsetWidth/Height to be <b>100x100</b>
+
+<h3>flex-flow: default, orange box has width: 300px</h3>
+<div class="flexbox" style="width: 300px">
+    <div></div><div></div><div></div>
+</div>
+
+<h3>flex-flow: default, orange box has width: 400px</h3>
+<div class="flexbox" style="width: 400px">
+    <div></div><div></div><div></div>
+</div>
+
+<h3>flex-flow: default, orange box has width: auto</h3>
+<div class="flexbox">
+    <div></div><div></div><div></div>
+</div>
+
+<h3>flex-flow: default, orange box has width: auto, flex-box has box-sizing: border-box</h3>
+<div class="flexbox border-box">
+    <div data-expected-width=30></div>
+    <div data-expected-width=30></div>
+    <div data-expected-width=30></div>
+</div>
+
+<h3>flex-flow: column, red box has height: 300px</h3>
+<div class="flexbox column" style="height: 300px">
+    <div></div><div></div><div></div>
+</div>
+
+<h3>flex-flow: column, red box has height: 400px</h3>
+<div class="flexbox column" style="height: 400px">
+    <div></div><div></div><div></div>
+</div>
+
+<h3>flex-flow: column, red box has height: auto</h3>
+<div class="flexbox column">
+    <div></div><div></div><div></div>
+</div>
+
+<h3>flex-box has box-sizing: border-box and flex-wrap: wrap;</h3>
+<div class="flexbox column wrap" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative" data-expected-width=100 data-expected-height=200>
+    <div data-offset-x=3></div><div data-offset-x=103></div><div data-offset-x=203></div>
+</div>
+
+<h3>flex-box has box-sizing: default and flex-wrap: wrap;</h3>
+<div class="flexbox column wrap" style="border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative" data-expected-width=110 data-expected-height=210>
+    <div data-offset-x=3></div><div data-offset-x=3></div><div data-offset-x=103></div>
+</div>
+
+<h3>flex-flow: column, flex-box has box-sizing: border-box, flex items have flex: 1</h3>
+<div class="flexbox column" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 343px; width: 100px;" data-expected-width=100 data-expected-height=343>
+    <div style="flex: 1;" data-expected-height=111></div>
+    <div style="flex: 1;" data-expected-height=111></div>
+    <div style="flex: 1;" data-expected-height=111></div>
+</div>
+
+<script>
+    function addExpectedSizes(flexItem) {
+        if (!flexItem.hasAttribute('data-expected-height'))
+            flexItem.setAttribute('data-expected-height', 100);
+        if (!flexItem.hasAttribute('data-expected-width'))
+            flexItem.setAttribute('data-expected-width', 100);
+    }
+    [].forEach.call(document.querySelectorAll(".flexbox > div"), addExpectedSizes);
+    [].forEach.call(document.querySelectorAll(".border-box"), addExpectedSizes);
+    checkLayout('.flexbox');
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/box-sizing-min-max-sizes-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/box-sizing-min-max-sizes-001.html
new file mode 100644
index 00000000000..128892cf9e5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/box-sizing-min-max-sizes-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: minimum / maximum sizes with box-sizing: border-box</title>
+<link href="support/flexbox.css" rel="stylesheet">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#box-model">
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#min-max-widths">
+<meta name="assert" content="This test checks that a minimum and maximum sizes are correctly computed for flexbox children.">
+
+<style>
+.flexbox {
+    background-color: teal;
+}
+.flexbox > div {
+    box-sizing: border-box;
+}
+</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">
+    <div style="border: 5px solid orange; padding: 5px; max-width: 30px; width: 40px;" data-expected-width=30></div>
+    <div style="border: 5px solid orange; padding: 5px; min-width: 30px; width: 10px;" data-expected-width=30></div>
+</div>
+
+<div class="flexbox column">
+    <div style="border: 5px solid orange; padding: 5px; max-height: 30px; height: 40px;" data-expected-height=30></div>
+    <div style="border: 5px solid orange; padding: 5px; min-height: 30px; height: 10px;" data-expected-height=30></div>
+</div>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/canvas-dynamic-change-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/canvas-dynamic-change-001.html
new file mode 100644
index 00000000000..f8b4340379b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/canvas-dynamic-change-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Canvas size dynamic change in flexbox layout</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
+<meta name="assert" content="This test ensures proper layouting of canvas element as flex-items"/>
+<link href="support/flexbox.css" rel="stylesheet">
+<style>
+.red {
+  width: 600px;
+  height: 400px;
+  background: red;
+}
+canvas {
+  background: green;
+}
+</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>
+
+<div class="red">
+  <div class="flexbox column">
+    <!-- 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>
+
+<script>
+var canvas = document.getElementById('canvas');
+
+requestAnimationFrame(function() {
+  canvas.height = 400;
+  checkLayout('.flexbox');
+});
+
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/change-column-flex-width.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/change-column-flex-width.html
new file mode 100644
index 00000000000..ada0af721a2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/change-column-flex-width.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Flexbox: flex items inside flex-direction:column</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<meta name="assert" content="This test ensures that when main axis is logical y, layout flex items before getting intrinsic size."/>
+<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>
+function change() {
+  document.body.offsetTop;
+  var flex = document.getElementById("flex");
+  flex.style.width = "100px";
+  checkLayout("#container");
+}
+</script>
+<body onload="change()">
+<p>There should be a green square below. No red.</p>
+<!-- #container is just here to make sure the test fails more reliably visually if the bug is present. -->
+<div id="container" style="width:500px;">
+    <div id="flex" style="display:flex; flex-direction:column; width:70px;" data-expected-height="100">
+        <div style="background:red;" data-expected-height="100">
+            <div style="float:left; width:50px; height:100px; background:green;"></div>
+            <div style="float:left; width:50px; height:100px; background:green;"></div>
+        </div>
+    </div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/column-flex-child-with-overflow-scroll.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/column-flex-child-with-overflow-scroll.html
new file mode 100644
index 00000000000..e1ad2089f89
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/column-flex-child-with-overflow-scroll.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<title>Proper height of column flex children with overflow: scroll.</title>
+<link href="support/flexbox.css" rel="stylesheet">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+<meta name="assert" content="This test ensures children of flexbox with flex-direction: column|column-reverse does not shrink their height after applying the overflow: scroll style."/>
+<style>
+div {
+    box-sizing: border-box;
+}
+
+.scroll {
+    overflow: scroll;
+}
+
+.box {
+    width: 100px;
+    height: 75px;
+    padding: 5px;
+    border: 2px solid red;
+}
+</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 column">
+  <div class="box" data-expected-width="100" data-expected-height="75"></div>
+  <div class="box scroll" id="box2" data-expected-width="100" data-expected-height="75"></div>
+</div>
+
+<div class="flexbox column-reverse">
+  <div class="box" data-expected-width="100" data-expected-height="75"></div>
+  <div class="box scroll" id="box4" data-expected-width="100" data-expected-height="75"></div>
+</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/column-reverse-gap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/column-reverse-gap.html
new file mode 100644
index 00000000000..338e1f38a34
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/column-reverse-gap.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse">
+<link rel="help" href="https://drafts.csswg.org/css-align/#gap-shorthand">
+<style>
+  .flexbox {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 5px;
+    position: relative;
+    background-color: blue;
+  }
+  .flexbox > * {
+    height: 10px;
+    background-color: green;
+  }
+</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" data-expected-height="40">
+  <div data-offset-y="30"></div>
+  <div data-offset-y="15"></div>
+  <div data-offset-y="0"></div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/columns-height-set-via-top-bottom.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/columns-height-set-via-top-bottom.html
new file mode 100644
index 00000000000..9edcc7afbde
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/columns-height-set-via-top-bottom.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<title>Proper size of flex item in a column flexbox with height set via top/bottom.</title>
+<link href="support/flexbox.css" rel="stylesheet">
+<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-flexbox-1/#propdef-flex-flow">
+<meta name="assert" content="This test ensures that when a 'display: flex' element with 'flex-flow: column' is itself sized by fitting to another container via setting position absolute + top, bottom, right, left all to 0, its flex items do not have natural size."/>
+<style>
+.container {
+    position: relative;
+    height: 100px;
+    width: 100px;
+    border: 2px solid orange;
+}
+.flexbox {
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 10px;
+}
+.flexbox > :nth-child(1) {
+    background-color: lightblue;
+}
+.flexbox > :nth-child(2) {
+    background-color: lightgreen;
+}
+</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="container">
+    <div data-expected-height=100 class="flexbox column">
+        <div data-expected-height=30 data-expected-width=80 style="height: 30px"></div>
+        <div data-expected-height=50 data-expected-width=80 style="flex: 1;"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="flexbox column wrap">
+        <div data-expected-height=50 data-expected-width=40 style="height: 50px"></div>
+        <div data-expected-height=80 data-expected-width=40 style="flex: 1 50px;"></div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/dynamic-grid-flex-abspos.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/dynamic-grid-flex-abspos.html
new file mode 100644
index 00000000000..93c8ca53a2e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/fieldset-as-container-justify-center.tentative.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/fieldset-as-container-justify-center.tentative.html
new file mode 100644
index 00000000000..a02b80d8cf6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/fieldset-as-container-justify-center.tentative.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://crbug.com/1229458">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8690">
+<link rel="help" href="https://github.com/whatwg/html/issues/9123">
+<link rel="help"
+  href="https://html.spec.whatwg.org/multipage/rendering.html#anonymous-fieldset-content-box">
+<meta name="assert"
+  content="justify-content: center is ignored in a column flexbox fieldset when the anonymous fieldset content box has no height or min-height.">
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<style>
+  fieldset {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    width: 200px;
+    min-height: 200px;
+    padding: 0px;
+    border: 1px solid;
+    position: relative;
+  }
+
+  .item {
+    height: 100px;
+    width: 100px;
+    background: orange;
+  }
+
+</style>
+<p>Pass Condition: orange square is at top of black square.<br>
+  Safari 16.4 and Firefox 111 fail -- orange box is vertically centered as if
+  the anonymous fieldset content box and the fieldset were the same box.
+</p>
+
+<fieldset>
+  <div class="item" data-offset-y="0"></div>
+</fieldset>
+
+<script>
+  checkLayout('.item');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.html
new file mode 100644
index 00000000000..228b9e4662d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-011.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: images' aspect ratio in flex box with flex-direction: column for min-size: auto</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-intrinsic">
+<link rel="help" href="https://crbug.com/581535">
+<link rel="help" href="https://crbug.com/581361">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="Images maintain aspect ratio in flex box with column direction with min-size: auto.">
+
+<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" style="width: 10px;" data-expected-width="10">
+    <!-- should use content width, clamped by converted max-height, as minimum width. -->
+    <img src="support/100x100-green.png" style="max-height: 5px;"
+         data-expected-width="5" data-expected-height="5">
+</div>
+
+<div class="flexbox" style="width: 10px;" data-expected-width="10">
+    <!-- should use min(specified, content width) = 10px as minimum width,
+         which the image will shrink to due to default flex-shrink. -->
+    <img src="support/10x10-green.png" style="width: 100px;" data-expected-width="10">
+</div>
+
+<div class="flexbox" style="width: 10px;" data-expected-width="10">
+    <!-- should use content width, clamped by converted min-height, as minimum width. -->
+    <img src="support/100x100-green.png" style="max-height: 5px;"
+         data-expected-width="5" data-expected-height="5">
+</div>
+
+<div class="flexbox" style="width: 10px;" data-expected-width="10">
+    <!-- should use content width, clamped by converted min-height, as minimum width. -->
+    <img src="support/100x100-green.png" style="max-height: 5px; min-height: 10px;"
+         data-expected-width="10" data-expected-height="10">
+</div>
+
+<div class="flexbox" style="width: 10px;" data-expected-width="10">
+    <!-- transferred and content suggestions are both 100px here, so minimum
+      width is min(transferred, content width) = 100px. -->
+    <img src="support/10x10-green.png" style="height: 100px;" data-expected-width="100">
+</div>
+
+<div class="flexbox column" style="height: 10px;" data-expected-height="10">
+    <!-- should use content height, clamped by converted max-width, as minimum height. -->
+    <img src="support/100x100-green.png" style="max-width: 5px;"
+         data-expected-width="5" data-expected-height="5">
+</div>
+
+<div class="flexbox column" style="height: 10px; width: 50px;" data-expected-height="10">
+    <!-- should use min(specified=100, content height=50) = 50px as minimum height,
+         which the image will shrink to due to default flex-shrink. -->
+    <img src="support/10x10-green.png" style="height: 100px;" data-expected-height="50">
+</div>
+
+<div class="flexbox" style="height: 10px;" data-expected-height="10">
+    <!-- should use content height, clamped by converted min-height, as minimum height. -->
+    <img src="support/100x100-green.png" style="max-height: 5px;"
+         data-expected-height="5" data-expected-height="5">
+</div>
+
+<div class="flexbox" style="height: 10px;" data-expected-height="10">
+    <!-- should use content height, clamped by converted min-width, as minimum height. -->
+    <img src="support/100x100-green.png" style="max-width: 5px; min-width: 10px;"
+         data-expected-height="10" data-expected-width="10">
+</div>
+
+<div class="flexbox column" style="height: 10px;" data-expected-height="10">
+    <!-- should use min(transferred (100), content height (100)) = 100px as
+         minimum height, which will be final height of the image -->
+    <img src="support/10x10-green.png" style="width: 100px;" data-expected-height="100">
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-017.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-017.html
new file mode 100644
index 00000000000..2fe10c175f2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-017.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>Non aspect-ratio svg flex item</title>
+<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://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
+<meta name="assert" content="Specified height on an svg image with no aspect ratio or intrinsic height is not the automatic minimum size." />
+
+<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>
+Specified size suggestion = 200px
+Content size suggestion = 150px [1]
+Automatic minimum height = min(150px, 200px)
+
+[1] fallback size from last bullet point in https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes :
+
+For boxes without a preferred aspect ratio:
+ * If the available space is definite in the appropriate dimension, use the stretch fit into that size in that dimension.
+ * Otherwise, if the box has a <length> as its computed minimum size (min-width/min-height) in that dimension, use that size.
+ * Otherwise, use 300px for the width and/or 150px for the height as needed.
+
+</pre>
+Pass condition: there is a 150x150 green square.
+<div style="display: flex; flex-direction: column; height: 0px; width: 150px;">
+  <img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" />' style="height: 200px; background: green;" data-expected-height=150>
+</div>
+
+<script>
+checkLayout('img');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-005.html
new file mode 100644
index 00000000000..4addd61dc7c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-005.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<title>Aspect-ratio items with borders</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="Section B">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#content-size-suggestion">
+<meta name="assert" content="Multiplying cross size by aspect ratio should operate on content box only.">
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<style>
+img {
+  border-top: 50px solid blue;
+  border-left: 10px solid orange;
+}
+
+.flexbox {
+  display: flex;
+  margin-bottom: 20px;
+}
+</style>
+
+<!-- script after body was flakily triggering before images were loaded, so wait for onload -->
+<body onload="checkLayout('img')">
+
+<p>
+The green boxes should all be 100x100.
+</p>
+
+Section B of flex base size + transferred size suggestion:
+<div class=flexbox>
+  <img style="height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
+</div>
+
+Section B of flex base size + transferred size suggestion, with box-sizing: border-box:
+<!-- Chrome 83 fails the border-box version. -->
+<div class=flexbox>
+  <img style="height: 150px; box-sizing: border-box;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
+</div>
+
+content size suggestion
+<div class=flexbox>
+  <img style="max-height: 100px;" src="support/200x200-green.png" data-expected-client-width=100 data-expected-client-height=100 />
+</div>
+
+content size suggestion
+<div class=flexbox>
+  <img style="min-height: 100px;" src="support/60x60-green.png" data-expected-client-width=100 data-expected-client-height=100 />
+</div>
+
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-013.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-013.html
new file mode 100644
index 00000000000..8a604d2bb27
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-row-013.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#transferred-size-suggestion">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5663">
+<meta name="assert" content="Transferred size suggestion can get its cross size from stretching." />
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('img')">
+<p>
+Pass condition is 4 green 100x100 squares and 1 0x0 square.
+</p>
+
+<p>
+Firefox 84a1 passes. Chrome 87 fails them all by making the green rectangles be 200x100.
+</p>
+
+<p>Transferred size suggestion is the stretched 100px:</p>
+<div style="display: flex; width: 0; height: 100px;">
+  <img src="support/200x200-green.png" data-expected-height=100 data-expected-width=100>
+</div>
+
+<p>Have to subtract the margin from the stretched height to get the transferred size suggestion:</p>
+<div style="display: flex; width: 0; height: 120px;">
+  <img src="support/200x200-green.png" style="margin-bottom: 20px" data-expected-height=100 data-expected-width=100>
+</div>
+
+<p>Have to subtract a margin larger than the stretched height to get 0px transferred size suggestion:</p>
+<div style="display: flex; width: 0; height: 120px;">
+  <img src="support/200x200-green.png" style="margin-bottom: 160px" data-expected-height=0 data-expected-width=0>
+</div>
+
+<p>Have to subtract the margin from the stretched height (ignoring the presence of a border) to get the transferred size suggestion:</p>
+<div style="display: flex; width: 0; height: 120px;">
+  <img src="support/200x200-green.png" style="border-right: 10px solid black; margin-bottom: 20px" data-expected-height=100 data-expected-width=110>
+</div>
+
+<p>Stretched transferred size suggestion has to obey min-height:</p>
+<div style="display: flex; width: 0; height: 50px;">
+  <img src="support/200x200-green.png" style="min-height: 100px;" data-expected-height=100 data-expected-width=100>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-basis-009.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-basis-009.html
new file mode 100644
index 00000000000..d5a498596fa
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-basis-009.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<script src='../../resources/testharness.js'></script>
+<script src='../../resources/testharnessreport.js'></script>
+<script src='../../resources/check-layout-th.js'></script>
+<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-basis-auto">
+<meta name="assert" content="flex-basis:auto on orthogonal item in horizontal column flexbox is calculated correctly" />
+
+<style>
+x-word-h {
+  display: inline-block;
+  height: 10px;
+  width: 20px;
+  background: blue;
+}
+
+x-word-v {
+  display: inline-block;
+  height: 20px;
+  width: 10px;
+  background: blue;
+}
+
+* {
+  /* This is for easier manual calculations, not necessary to demonstrate behavior. */
+  line-height: 0;
+}
+</style>
+
+<div id=flexbox style="width:150px; background:green; height:400px; display:flex; flex-direction:column">
+  <div style="writing-mode: vertical-rl;background:orange; flex:1 1 auto" data-expected-height=225>
+    <x-word-v></x-word-v><x-word-v></x-word-v><x-word-v></x-word-v>
+  </div>
+  <div style="background:lightblue; flex: 1 1 auto">
+    <x-word-h></x-word-h><x-word-h></x-word-h><x-word-h></x-word-h>
+  </div>
+</div>
+
+<script>
+checkLayout('#flexbox');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-column-relayout-assert.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-column-relayout-assert.html
new file mode 100644
index 00000000000..db752dc2806
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-column-relayout-assert.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: Column height with padding</title>
+<link href="support/flexbox.css" rel="stylesheet">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#item-margins">
+<meta name="assert" content="This test checks that height of flex container works with padding">
+<style>
+.flexbox {
+    background-color: green;
+}
+</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>
+
+<p>You should see a green rectangle, 40px high.</p>
+
+<div class="flexbox column" data-expected-height="40">
+  <div id="child" data-expected-height="40"></div>
+</div>
+
+<script>
+document.getElementById('child').offsetHeight;
+document.getElementById('child').style.padding = "20px";
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-direction-column-overlap-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-direction-column-overlap-001.html
new file mode 100644
index 00000000000..7065a71452e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-direction-column-overlap-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: vertical overlap with flex-direction: column.</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://crbug.com/669714"/>
+<meta name="assert" content="This test ensures that no unnecessary vertical overlap happens between an inline flex item and a block element inside a nested flexbox with 'flex-direction: column'."/>
+
+<style>
+html {
+  line-height: 1;
+  font-size: 18px;
+}
+
+.flex {
+  flex: 1;
+  min-height: 0;
+}
+
+.layout-column, .layout-row {
+  display: flex;
+}
+
+.layout-column {
+  flex-direction: column;
+}
+
+#relpos {
+  position: relative;
+  top: 1px;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body>
+
+<p>XXX and YYY should be on separate lines and not overlap, i.e. the height of .flex should not be 0.</p>
+
+<div class="layout-column" id="container">
+    <div class="layout-row">
+      <div class="layout-column">
+        <div class="flex" data-expected-height="18">XXX<span id="relpos"></span></div>
+        <div>YYY</div>
+      </div>
+    </div>
+</div>
+
+<script>
+document.body.offsetHeight;
+document.getElementById("relpos").innerText = " ";
+checkLayout("#container");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-factor-less-than-one.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-factor-less-than-one.html
new file mode 100644
index 00000000000..d0a2ff9aec7
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-factor-less-than-one.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: flex factors less than one</title>
+<link href="support/flexbox.css" rel="stylesheet">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink">
+<meta name="assert" content="flex-grow and flex-shrink factors less than 1 work">
+<style>
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  height: 100px;
+  width: 100px;
+  border: 1px solid black;
+}
+
+.child-flex-grow-0-75 {
+  background-color: lime;
+  flex-grow: 0.75;
+}
+
+.child-flex-grow-0-5 {
+  background-color: green;
+  flex-grow: 0.5;
+}
+
+.child-flex-grow-0-25 {
+  background-color: red;
+  flex-grow: 0.25;
+}
+
+.child-flex-shrink-0-5 {
+  background-color: green;
+  flex-shrink: 0.5;
+  width: 200px;
+  height: 200px;
+}
+
+.child-flex-shrink-0-25 {
+  background-color: red;
+  flex-shrink: 0.25;
+  width: 200px;
+  height: 200px;
+}
+
+.basis-0 {
+  flex-basis: 0;
+}
+
+.basis {
+  flex-basis: 30px;
+}
+
+.basis-big {
+  flex-basis: 100px;
+}
+
+.vertical {
+  writing-mode: vertical-rl;
+}
+</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 container">
+  <div class="child-flex-grow-0-5" data-expected-width="50"></div>
+</div>
+
+<div class="flexbox container">
+  <div class="child-flex-grow-0-5" data-expected-width="50"></div>
+  <div class="child-flex-grow-0-25" data-expected-width="25"></div>
+</div>
+
+<div class="flexbox container column">
+  <div class="child-flex-grow-0-5" data-expected-height="50"></div>
+  <div class="child-flex-grow-0-25" data-expected-height="25"></div>
+</div>
+
+<div class="flexbox container column vertical">
+  <div class="child-flex-grow-0-5 " data-expected-width="50"></div>
+  <div class="child-flex-grow-0-25 " data-expected-width="25"></div>
+</div>
+
+<div class="flexbox container vertical">
+  <div class="child-flex-grow-0-5 " data-expected-height="50"></div>
+  <div class="child-flex-grow-0-25 " data-expected-height="25"></div>
+</div>
+
+<div class="flexbox container">
+  <div class="child-flex-grow-0-5 basis" data-expected-width="50"></div>
+  <div class="child-flex-grow-0-25 basis" data-expected-width="40"></div>
+ </div>
+
+<div class="flexbox container column">
+  <div class="child-flex-grow-0-5 basis" data-expected-height="50"></div>
+  <div class="child-flex-grow-0-25 basis" data-expected-height="40"></div>
+</div>
+
+<div class="flexbox container vertical">
+  <div class="child-flex-grow-0-5 basis" data-expected-height="50"></div>
+  <div class="child-flex-grow-0-25 basis" data-expected-height="40"></div>
+</div>
+
+<div class="flexbox container column vertical">
+  <div class="child-flex-grow-0-5 basis" data-expected-width="50"></div>
+  <div class="child-flex-grow-0-25 basis" data-expected-width="40"></div>
+</div>
+
+<!-- And now, the shrink cases -->
+<div class="flexbox container">
+  <div class="child-flex-shrink-0-5" data-expected-width="150"></div>
+</div>
+
+<div class="flexbox container">
+  <div class="child-flex-shrink-0-5" data-expected-width="50"></div>
+  <div class="child-flex-shrink-0-25" data-expected-width="125"></div>
+</div>
+
+<div class="flexbox container column">
+  <div class="child-flex-shrink-0-5" data-expected-height="50"></div>
+  <div class="child-flex-shrink-0-25" data-expected-height="125"></div>
+</div>
+
+<div class="flexbox container column vertical">
+  <div class="child-flex-shrink-0-5 " data-expected-width="50"></div>
+  <div class="child-flex-shrink-0-25 " data-expected-width="125"></div>
+</div>
+
+<div class="flexbox container vertical">
+  <div class="child-flex-shrink-0-5 " data-expected-height="50"></div>
+  <div class="child-flex-shrink-0-25 " data-expected-height="125"></div>
+</div>
+
+<div class="flexbox container">
+  <div class="child-flex-shrink-0-5 basis-big" data-expected-width="50"></div>
+  <div class="child-flex-shrink-0-25 basis-big" data-expected-width="75"></div>
+ </div>
+<div class="flexbox container column">
+  <div class="child-flex-shrink-0-5 basis-big" data-expected-height="50"></div>
+  <div class="child-flex-shrink-0-25 basis-big" data-expected-height="75"></div>
+</div>
+
+<div class="flexbox container vertical">
+  <div class="child-flex-shrink-0-5 basis-big" data-expected-height="50"></div>
+  <div class="child-flex-shrink-0-25 basis-big" data-expected-height="75"></div>
+</div>
+
+<div class="flexbox container column vertical">
+  <div class="child-flex-shrink-0-5 basis-big" data-expected-width="50"></div>
+  <div class="child-flex-shrink-0-25 basis-big" data-expected-width="75"></div>
+</div>
+
+<!-- Interaction of min-width: auto with fractional flex basis -->
+<div class="flexbox container" style="background-color: red;">
+  <div class="child-flex-grow-0-25 basis-0" style="background-color: green;" data-expected-width="10"></div>
+  <div class="child-flex-grow-0-75 basis-0" data-expected-width="90">
+    <div style="width: 90px;"></div>
+  </div>
+</div>
+
+<!-- centering should still center; same for other justify-content values -->
+<div class="flexbox container justify-content-center">
+  <div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="26"></div>
+</div>
+
+<div class="flexbox container justify-content-space-around">
+  <div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="26"></div>
+</div>
+
+<div class="flexbox container justify-content-flex-end">
+  <div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="51"></div>
+</div>
+
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-flow-013.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-flow-013.html
new file mode 100644
index 00000000000..fb12aff176f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-flow-013.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox Test: flex-flow - column column-reverse and row-reverse</title>
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow">
+<meta name="assert" content="Test ensures that setting 'flex-flow' property to either 'column',
+'column-reverse' or 'row-reverse' in combination with different 'direction' and 'writing-mode'
+values works properly.">
+<style>
+body {
+    margin: 0;
+}
+.flexbox {
+    width: 600px;
+    display: flex;
+    background-color: grey;
+}
+.flexbox > div {
+    height: 20px;
+    width: 20px;
+    border: 0;
+}
+
+.rtl {
+    direction: rtl;
+}
+
+.vertical-rl, .vertical-lr, .column, .column-reverse {
+    height: 600px;
+}
+
+.vertical-rl {
+    writing-mode: vertical-rl;
+}
+
+.vertical-lr {
+    writing-mode: vertical-lr;
+}
+
+.row-reverse {
+    flex-flow: row-reverse;
+}
+
+.column {
+    flex-flow: column;
+}
+
+.column-reverse {
+    flex-flow: column-reverse;
+}
+
+.flexbox > .first {
+    background-color: blue;
+}
+.flexbox > .second {
+    background-color: green;
+}
+.flexbox > .third {
+    background-color: red;
+}
+
+.flexbox > div > div {
+    background-color: orange;
+    height: 10px;
+}
+</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">
+  <div class="first" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin: 0 auto;"></div>
+  <div class="second" data-expected-width="350" data-offset-x="75" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="275"></div></div>
+  <div class="third" data-expected-width="75" data-offset-x="425" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
+</div>
+
+<div class="flexbox rtl">
+  <div class="first" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
+  <div class="second" data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="175"></div></div>
+  <div class="third" data-expected-width="75" data-offset-x="100" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
+</div>
+
+<div class="flexbox row-reverse">
+  <div class="first" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
+  <div class="second" data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="375"></div></div>
+  <div class="third" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
+</div>
+
+<div class="flexbox rtl row-reverse">
+  <div class="first" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin: 0 auto;"></div>
+  <div class="second" data-expected-width="350" data-offset-x="75" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="75"></div></div>
+  <div class="third" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
+</div>
+
+<div style="position: relative;">
+<div class="flexbox column">
+  <div class="first" data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin: auto 200px auto 150px;"></div>
+  <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
+  <div class="third" data-expected-height="150" data-offset-y="450" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
+</div>
+</div>
+
+<div style="position: relative;">
+<div class="flexbox column-reverse">
+  <div class="first" data-expected-height="150" data-offset-y="450" style="flex: 1 0 0; margin: auto 200px auto 150px;"></div>
+  <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
+  <div class="third" data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
+</div>
+</div>
+
+<div style="position: relative;">
+<div class="flexbox column rtl">
+  <div class="first" data-expected-height="150" data-offset-y="0" data-offset-x="480" style="flex: 1 0 0; margin: auto 100px auto 50px;"></div>
+  <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
+  <div class="third" data-expected-height="150" data-offset-y="450" data-offset-x="580" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
+</div>
+</div>
+
+<div style="position: relative;">
+<div class="flexbox column-reverse rtl">
+  <div class="first" data-expected-height="150" data-offset-y="450" data-offset-x="480" style="flex: 1 0 0; margin: auto 100px auto 50px;"></div>
+  <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
+  <div class="third" data-expected-height="150" data-offset-y="0" data-offset-x="580" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
+</div>
+</div>
+
+<div style="position: relative;">
+<div data-expected-height="600" class="flexbox vertical-lr column">
+  <div class="first" data-offset-x="0" data-expected-width="500" style="flex: 1 0 0; min-width: 300px"></div>
+  <div class="second" data-offset-x="500" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
+</div>
+</div>
+
+<div style="position: relative;">
+<div data-expected-height="600" class="flexbox vertical-lr column-reverse">
+  <div class="first" data-offset-x="100" data-expected-width="500" style="flex: 1 0 0; min-width: 300px"></div>
+  <div class="second" data-offset-x="0" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
+</div>
+</div>
+
+<div style="position: relative;">
+<div data-expected-height="600" class="flexbox vertical-rl column">
+  <div class="first" data-offset-x="100" data-expected-width="500" style="flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div>
+  <div class="second" data-offset-x="0" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
+</div>
+</div>
+
+<div style="position: relative;">
+<div data-expected-height="600" class="flexbox vertical-rl column-reverse">
+  <div class="first" data-offset-x="0" data-expected-width="500" style="flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div>
+  <div class="second" data-offset-x="500" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-001.html
new file mode 100644
index 00000000000..dc55f9b7d2b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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 &lt;input&gt; 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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-002.html
new file mode 100644
index 00000000000..c5095305ec6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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 &lt;input&gt; 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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-contains-strict.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-contains-strict.html
new file mode 100644
index 00000000000..4ca0fcf73c1
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-contains-strict.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: 'contain' property strict value</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
+<meta name="assert" content="This test ensures that the strict value of the 'contain'
+property in combination with mixing of 'display' inline-flex value, 'align-items' flex-start
+value, column direction works properly.">
+<style>
+.inline-flex {
+  display: inline-flex;
+  outline: solid;
+  background: red;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.inline-flex')">
+<p>Stretched:</p>
+<div class="inline-flex" style="display: inline-flex; flex-direction: column;" data-expected-width="0" data-expected-height="0">
+  <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Column</div>
+</div>
+
+<div class="inline-flex" data-expected-width="0" data-expected-height="0">
+  <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Row</div>
+</div>
+
+<div class="inline-flex" style="display: inline-flex; flex-direction: column;" data-expected-width="30" data-expected-height="30">
+  <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Column</div>
+</div>
+
+<div class="inline-flex" style="display: inline-flex;" data-expected-width="30" data-expected-height="30">
+  <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Row</div>
+</div>
+
+
+<p>Flex-start:</p>
+<div class="inline-flex" style="flex-direction: column; align-items: flex-start;" data-expected-width="0" data-expected-height="0">
+  <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Column</div>
+</div>
+
+<div class="inline-flex" style="align-items: flex-start;" data-expected-width="0" data-expected-height="0">
+  <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Row</div>
+</div>
+
+<div class="inline-flex" style="flex-direction: column; align-items: flex-start;" data-expected-width="30" data-expected-height="30">
+  <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Column</div>
+</div>
+
+<div class="inline-flex" style="align-items: flex-start;" data-expected-width="30" data-expected-height="30">
+  <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Row</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-009.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-009.html
new file mode 100644
index 00000000000..277324bc2be
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-009.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<title>Tests correct handling of min-height: auto with dynamic changes</title>
+<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="author" title="Google Inc." href="http://www.google.com/">
+<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>
+<style>
+.container {
+  height: 300px;
+  outline: 2px solid black;
+}
+
+.inner
+{
+  width: 400px;
+  flex: 1;
+  background-color: green;
+}
+#container2 .flexbox > * { flex-basis: 0; }
+#container2 .column > * { flex-basis: auto; }
+</style>
+<script>
+function change() {
+  var container = document.getElementById('container');
+  container.offsetHeight;
+  container.style.height = '80px';
+  container = document.getElementById('container2');
+  container.offsetHeight;
+  container.style.height = '80px';
+  checkLayout('.container');
+}
+</script>
+<body onload="change()">
+<p>Green rectangle should be entirely within the black rectangle</p>
+<div id="log"></div>
+<div id="container" class="container">
+  <div class="flexbox column" style="height: 100%;">
+    <div class="flexbox flex-one">
+        <div class="flexbox column">
+          <div class="flexbox column flex-one">
+            <div class="inner" data-expected-height="80">
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>
+
+<div id="container2" class="container">
+  <div class="flexbox column" style="height: 100%;">
+    <div class="flexbox flex-one">
+        <div class="flexbox column">
+          <div class="flexbox column flex-one">
+            <div class="inner" data-expected-height="80">
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-010.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-010.html
new file mode 100644
index 00000000000..fe8410e27e1
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-010.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<title>Tests correct handling of min-height: min-content with dynamic changes</title>
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths" title="4.5. Implied Minimum Size of Flex Items" />
+<link rel="author" title="Google Inc." href="http://www.google.com/">
+<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>
+<style>
+.container {
+  height: 300px;
+  outline: 2px solid black;
+}
+
+.inner
+{
+  width: 400px;
+  flex: 1;
+  background-color: green;
+}
+#container2 .flexbox > * { flex-basis: 0; }
+#container2 .column > * { flex-basis: auto; }
+.container .flexbox { min-height: min-content; }
+.container > .flexbox { min-height: 0; }
+</style>
+<script>
+function change() {
+  var container = document.getElementById('container');
+  container.offsetHeight;
+  container.style.height = '80px';
+  container = document.getElementById('container2');
+  container.offsetHeight;
+  container.style.height = '80px';
+  checkLayout('.container');
+}
+</script>
+<body onload="change()">
+<p>Green rectangle should be entirely within the black rectangle</p>
+<div id="log"></div>
+<div id="container" class="container">
+  <div class="flexbox column" style="height: 100%;">
+    <div class="flexbox flex-one">
+        <div class="flexbox column">
+          <div class="flexbox column flex-one">
+            <div class="inner" data-expected-height="80">
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>
+
+<div id="container2" class="container">
+  <div class="flexbox column" style="height: 100%;">
+    <div class="flexbox flex-one">
+        <div class="flexbox column">
+          <div class="flexbox column flex-one">
+            <div class="inner" data-expected-height="80">
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-012.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-012.html
new file mode 100644
index 00000000000..cbf15885d9b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-012.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: Combining 100% heights with min-height: auto should not lead to overflow</title>
+<link rel="author" title="Google LLC" href="https://www.google.com/" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=927066" />
+
+<style>
+.flexbox {
+    display: flex;
+}
+
+.column {
+    flex-flow: column;
+}
+
+.flexbox span {
+    height: 100%;
+    background: orange;
+    display: block;
+}
+</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 column" style="height: 100px; width: 100px; background: green">
+    <div style="height: 10px; flex: 0.1;" data-expected-height="10"></div>
+    <div style="height: 100%; display: flex; background: teal; flex: 0.9;" data-expected-height="90">
+        <div style="height: 100%"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-025.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-025.html
new file mode 100644
index 00000000000..4de8c5c1317
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-031.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-031.html
new file mode 100644
index 00000000000..a3f68e92edb
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-height-flex-items-031.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=240068">
+<meta name="assert" content="An intrinsic min-height can make a column flex container grow enough for its contents, even if it's also a flex item with 'flex-basis: 0px'.">
+
+<div id="log"></div>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<script>
+for (let outerFlexDirection of ["column", "column-reverse"]) {
+  for (let innerFlexDirection of ["column", "column-reverse"]) {
+    for (let placeContent of ["start", "center", "end"]) {
+      for (let minHeight of ["auto", "min-content", "max-content"]) {
+        for (let flex of ["0 0 44px", "1 1 44px"]) {
+          const outer = document.createElement("div");
+          outer.className = "flex";
+          outer.style.display = "inline-flex";
+          outer.style.flexDirection = outerFlexDirection;
+          outer.style.border = "1px solid #000";
+          outer.dataset.expectedClientHeight = "104";
+
+          const inner = document.createElement("div");
+          inner.style.flexBasis = "0px";
+          inner.style.display = "flex";
+          inner.style.flexDirection = innerFlexDirection;
+          inner.style.placeContent = placeContent;
+          inner.style.minHeight = minHeight;
+          inner.style.border = "2px solid #0ff";
+          inner.dataset.expectedClientHeight = "100";
+
+          const content1 = document.createElement("div");
+          content1.style.flex = flex;
+          content1.style.border = "3px solid #f0f";
+          content1.dataset.expectedHeight = "50";
+
+          const content2 = content1.cloneNode();
+
+          content1.textContent = "1";
+          content2.textContent = "2";
+          inner.appendChild(content1);
+          inner.appendChild(content2);
+          outer.appendChild(inner);
+          document.body.appendChild(outer);
+        }
+      }
+    }
+  }
+  document.body.appendChild(document.createElement("br"));
+}
+checkLayout(".flex");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-001.html
new file mode 100644
index 00000000000..016a4cf5c49
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-001.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: flexbox with min-size: auto</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">
+<link rel="bookmark" href="https://crbug.com/426898">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="Flexbox with min-size: auto is handled correctly.">
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<style>
+.flexbox {
+    width: 10px;
+    height: 10px;
+    background-color: grey;
+}
+
+.item {
+    background-color: red;
+    margin: 5px;
+}
+
+.child {
+    height: 100px;
+    width: 100px;
+    background-color: green;
+}
+
+.width-20 {
+    width: 20px;
+}
+
+.flex-basis-20 {
+    flex-basis: 20px;
+}
+
+</style>
+
+<body onload="checkLayout('.flexbox, .inline-flexbox');">
+<div id=log></div>
+
+<div class="flexbox" data-expected-width="10">
+    <div class="item" data-expected-width="100">
+        <div class="child" data-expected-width="100"></div>
+    </div>
+</div>
+
+<div class="flexbox column" data-expected-height="10">
+    <div class="item" data-expected-height="100">
+        <div class="child" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div class="inline-flexbox column" data-expected-height="110">
+    <div class="item flex-basis-20" data-expected-height="100">
+        <div class="child" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div class="flexbox" data-expected-width="10">
+    <div class="item width-20" data-expected-width="20">
+        <div class="child" data-expected-width="100"></div>
+    </div>
+</div>
+
+<div class="flexbox" data-expected-width="10">
+    <div class="item flex-basis-20" data-expected-width="100">
+        <div class="child" data-expected-width="100"></div>
+    </div>
+</div>
+
+<div class="inline-flexbox" data-expected-width="110">
+    <div class="item flex-basis-20" data-expected-width="100">
+        <div class="child" data-expected-width="100"></div>
+    </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-002.html
new file mode 100644
index 00000000000..5039dce628b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-002.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: min-size when the child has a percentage min-size</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item">
+<meta name="assert" content="This test ensures that min-size can not be negative when the child has a percentage min-size.">
+<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>
+<body onload="checkLayout('.flexbox')">
+<div id=log></div>
+
+<div class="flexbox column" style="max-height: 0; overflow: hidden; line-height: 13px;" data-expected-height="0">
+    <div style="min-height: 100%;" data-expected-height="0">This is a flex item.</div>
+    <div style="flex: none;" data-expected-height="13">Inflexible</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-size-003.html
new file mode 100644
index 00000000000..b2a0c8277e2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-width-flex-items-014.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-width-flex-items-014.html
new file mode 100644
index 00000000000..3bab07f01f3
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-minimum-width-flex-items-014.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: Proper min-width intrinsic size with display: flex</title>
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">
+<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths">
+<meta name="assert" content="This test checks that min-width intrinsic size still applies if a fixed width is set.">
+<style>
+.min-content {
+    width: 10px;
+    min-width: min-content;
+    outline: 2px solid;
+    display: flex;
+    flex-wrap: wrap;
+}
+.max-content {
+    width: 10px;
+    min-width: max-content;
+    outline: 2px solid;
+    display: flex;
+    flex-wrap: wrap;
+}
+.fit-content {
+    width: 10px;
+    min-width: fit-content;
+    outline: 2px solid;
+    display: flex;
+    flex-wrap: wrap;
+}
+.child {
+    width: 20px;
+    height: 20px;
+    background-color: pink;
+}
+div {
+    display: inline-block;
+    line-height: 0;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('body > div')">
+<div id=log></div>
+
+<div class="min-content" data-expected-width=20>
+    <div class="child"></div><div class="child"></div>
+</div>
+
+<div class="max-content" data-expected-width=40>
+    <div class="child"></div><div class="child"></div>
+</div>
+
+<div class="fit-content" data-expected-width=40>
+    <div class="child"></div><div class="child"></div>
+</div>
+
+<div style="width: 30px">
+    <div class="fit-content" data-expected-width=30>
+        <div class="child"></div><div class="child"></div>
+    </div>
+</div>
+
+<div style="width: 10px">
+    <div class="fit-content" data-expected-width=20>
+        <div class="child"></div><div class="child"></div>
+    </div>
+</div>
+
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html
new file mode 100644
index 00000000000..72dcf830f87
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: flex-basis with zero pixel</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-main-sizes">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="This test ensures that setting 'flex-basis' property to
+zero pixel or percentage in combination with one value of both 'flex-grow' and 'flex-shrink'
+and 'writing-mode' value works properly.">
+<style>
+.flexbox > div {
+    font: 14px/1 Ahem;
+    min-width: 0;
+    min-height: 0;
+}
+
+.flex-zero {
+    flex: 0;
+}
+
+.flex-zero-one-zero-percent {
+    flex: 0 1 0%;
+}
+
+.flex-zero-one-zero-px {
+    flex: 0 1 0px;
+}
+
+.flex-half {
+    flex: 0.5;
+}
+
+.flex-half-one-zero-percent {
+    flex: 0.5 1 0%;
+}
+
+.flex-half-one-zero-px {
+    flex: 0.5 1 0px;
+}
+
+.flex-one-one-zero-percent {
+    flex: 1 1 0%;
+}
+
+.flex-one-one-zero-px {
+    flex: 1 1 0px;
+}
+
+.vertical {
+    writing-mode: vertical-rl;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.flexbox'); })">
+<div id=log></div>
+<div class="flexbox column">
+  <div class="flex-zero" data-expected-height="14">Flex item with flex: 0</div>
+</div>
+
+<div class="flexbox column">
+  <div class="flex-zero-one-zero-percent" data-expected-height="14">Flex item with flex: 0 1 0%</div>
+</div>
+
+<div class="flexbox column">
+  <div class="flex-zero-one-zero-px" data-expected-height="0">Flex item with flex: 0 1 0px</div>
+</div>
+
+<div class="flexbox column">
+  <div class="flex-half" data-expected-height="14">Flex item with flex: 0.5</div>
+</div>
+
+<div class="flexbox column">
+  <div class="flex-half-one-zero-percent" data-expected-height="14">Flex item with flex: 0.5 1 0%</div>
+</div>
+
+<!-- Following comment follows current spec to the letter, but it is not web
+     compatible. The expectation is for what everyone is shipping. -->
+<!-- A flex-grow of 0 would size the container to the flex base size of the item (0px),
+     and a flex-grow of 1 would size it to the max-content contribution of the item (14px).
+     Therefore, a flew-grow of 0.5 sizes the container to the average, 7px.
+     And then the item grows to fill half of that, 3.5px.
+     Note that Gecko, Blink and WebKit use the flex-basis instead. -->
+<div class="flexbox column">
+  <div class="flex-half-one-zero-px" data-expected-height="0">Flex item with flex: 0.5 1 0px</div>
+</div>
+
+<div class="flexbox column">
+  <div class="flex-one" data-expected-height="14">Flex item with flex: 1</div>
+</div>
+
+<div class="flexbox column">
+  <div class="flex-one-one-zero-percent" data-expected-height="14">Flex item with flex: 1 1 0%</div>
+</div>
+
+<!-- Following comment follows current spec to the letter, but it is not web
+     compatible. The expectation is for what everyone is shipping. -->
+<!-- flex-grow is >= 1, so the flex container is sized to the max-content contribution of the item.
+     Note that Gecko, Blink and WebKit use the flex-basis instead. -->
+<div class="flexbox column">
+  <div class="flex-one-one-zero-px" data-expected-height="0">Flex item with flex: 1 1 0px</div>
+</div>
+
+<div class="flexbox column vertical">
+  <div class="flex-zero" data-expected-width="14">Flex item with flex: 0</div>
+</div>
+
+<div class="flexbox column vertical">
+  <div class="flex-zero-one-zero-percent" data-expected-width="14">Flex item with flex: 0 1 0%</div>
+</div>
+
+<div class="flexbox column vertical">
+  <div class="flex-zero-one-zero-px" data-expected-width="0">Flex item with flex: 0 1 0px</div>
+</div>
+
+<div class="flexbox column vertical">
+  <div class="flex-half" data-expected-width="14">Flex item with flex: 0.5</div>
+</div>
+
+<div class="flexbox column vertical">
+  <div class="flex-half-one-zero-percent" data-expected-width="14">Flex item with flex: 0.5 1 0%</div>
+</div>
+
+<!-- Following comment follows current spec to the letter, but it is not web
+     compatible. The expectation is for what everyone is shipping. -->
+<!-- A flex-grow of 0 would size the container to the flex base size of the item (0px),
+     and a flex-grow of 1 would size it to the max-content contribution of the item (14px).
+     Therefore, a flew-grow of 0.5 sizes the container to the average, 7px.
+     And then the item grows to fill half of that, 3.5px.
+     Note that Gecko, Blink and WebKit use the flex-basis instead. -->
+<div class="flexbox column vertical">
+  <div class="flex-half-one-zero-px" data-expected-width="0">Flex item with flex: 0.5 1 0px</div>
+</div>
+
+<div class="flexbox column vertical">
+  <div class="flex-one" data-expected-width="14">Flex item with flex: 1</div>
+</div>
+
+<div class="flexbox column vertical">
+  <div class="flex-one-one-zero-percent" data-expected-width="14">Flex item with flex: 1 1 0%</div>
+</div>
+
+<!-- Following comment follows current spec to the letter, but it is not web
+     compatible. The expectation is for what everyone is shipping. -->
+<!-- flex-grow is >= 1, so the flex container is sized to the max-content contribution of the item.
+     Note that Gecko, Blink and WebKit use the flex-basis instead. -->
+<div class="flexbox column vertical">
+  <div class="flex-one-one-zero-px" data-expected-width="0">Flex item with flex: 1 1 0px</div>
+</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html
new file mode 100644
index 00000000000..78716b162d5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: height resizing with flex-direction: column</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://crbug.com/527039">
+<meta name="assert" content="This test checks that resizing the height of a layout with two nested flexboxes using 'flex-direction: column' correctly recalculates the outer box's height." />
+
+<style>
+body,
+html {
+  height: 100%;
+}
+
+.OuterFlexbox {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.InnerFlexbox {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  outline: 1px blue solid;
+}
+
+.InnerFlexbox-body {
+  flex: 1 1 auto;
+  overflow-y: hidden;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body onload="update()">
+
+<div class="OuterFlexbox" data-expected-height="250">
+  <div class="InnerFlexbox" data-expected-height="250">
+       <div class="InnerFlexbox-body" data-expected-height="250">
+         <ul>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+           <li>Suspendisse eu nunc lectus. Curabitur.</li>
+         </ul>
+       </div>
+  </div>
+</div>
+
+<script>
+function update() {
+  document.body.offsetHeight;
+  document.body.style.height = '50px';
+  document.body.offsetHeight;
+  document.body.style.height = '250px';
+  document.body.offsetHeight;
+  checkLayout('.OuterFlexbox');
+}
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-shorthand-flex-basis-middle.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-shorthand-flex-basis-middle.html
new file mode 100644
index 00000000000..dcb077a856a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-shorthand-flex-basis-middle.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: flex shorthand with 'auto' or 'zero' percentage value</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="This test ensures that setting '%0' or 'auto' to the flex-basis
+in the middle of between 'flex-grow' and 'flex-shrink' properties whose value is '1' works properly.">
+<style>
+.flexbox {
+    width: 500px;
+    height: 100px;
+    background: green;
+}
+
+.flexbox > div {
+    width: 50px;
+    background: yellow;
+}
+</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">
+    <div data-expected-width="50" style="flex: 1 0% 1"></div>
+    <div data-expected-width="50" style="flex: 1 0% 1"></div>
+    <div data-expected-width="50" style="flex: 1 0% 1"></div>
+</div>
+
+<div class="flexbox">
+    <div data-expected-width="50" style="flex: 1 auto 1"></div>
+    <div data-expected-width="50" style="flex: 1 auto 1"></div>
+    <div data-expected-width="50" style="flex: 1 auto 1"></div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-002.html
new file mode 100644
index 00000000000..ccf4e3d5603
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-002.html
@@ -0,0 +1,43 @@
+<!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" />
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values" />
+<meta name="assert" content="Flexbox honors physical justify-content values when column flexboxes have main size in the physical left <-> right axis.">
+
+<style>
+.flexbox {
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+  background: orange;
+  border: 1px solid;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.flexitem {
+  width: 50px;
+  height: 50px;
+  background: blue;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.flexitem')">
+
+Both should be Blue to the left of Orange.
+<div class=flexbox style="justify-content: left; writing-mode: vertical-rl;">
+  <div class=flexitem data-offset-x=0></div>
+</div>
+<div class=flexbox style="justify-content: left; writing-mode: vertical-lr;">
+  <div class=flexitem data-offset-x=0></div>
+</div>
+
+Both should be Orange to the left of Blue.
+<div class=flexbox style="justify-content: right; writing-mode: vertical-rl;">
+  <div class=flexitem data-offset-x=50></div>
+</div>
+<div class=flexbox style="justify-content: right; writing-mode: vertical-lr;">
+  <div class=flexitem data-offset-x=50></div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-003.html
new file mode 100644
index 00000000000..7dd0e2b594c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-justify-content-wmvert-003.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property" />
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values" />
+<meta name="assert" content="Flexbox honors justify-content values when vertical row flexboxes have main axis parallel to line-left <-> line-right axis.">
+
+<style>
+.flexbox {
+  display: flex;
+  height: 100px;
+  background: orange;
+  border: 1px solid;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.flexitem {
+  width: 50px;
+  height: 50px;
+  background: blue;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.flexitem')">
+
+Both should be Blue on top of Orange.
+<div class=flexbox style="justify-content: left; writing-mode: vertical-rl;">
+  <div class=flexitem data-offset-y=0></div>
+</div>
+<div class=flexbox style="justify-content: left; writing-mode: vertical-lr;">
+  <div class=flexitem data-offset-y=0></div>
+</div>
+
+Both should be Orange on top of Blue.
+<div class=flexbox style="justify-content: right; writing-mode: vertical-rl;">
+  <div class=flexitem data-offset-y=50></div>
+</div>
+<div class=flexbox style="justify-content: right; writing-mode: vertical-lr;">
+  <div class=flexitem data-offset-y=50></div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html
new file mode 100644
index 00000000000..f653abfa243
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox-lines-must-be-stretched-by-default.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: align-content initial value.</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#align-content-property">
+<meta name="assert" content="This test ensures that a flexbox container's align-content value default to 'stretch'."/>
+<style>
+.flex-container {
+  display: flex;
+  height: 100px;
+  width: 200px;
+  background-color: pink;
+  flex-wrap: wrap;
+}
+.flex-item1 {
+  width: 100%;
+  background-color: blue;
+  border: 1px solid;
+  border-color: red;
+}
+.flex-item2 {
+  width: 100%;
+  background-color: blue;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.flex-container')">
+  <div id="flexContainer" class="flex-container">
+    <div id="flexItem1" class="flex-item1" data-expected-height=51></div>
+    <div id="flexItem2" class="flex-item2" data-expected-height=49></div>
+  </div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_first-letter.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_first-letter.html
new file mode 100644
index 00000000000..4418b11077f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_first-letter.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>flexbox | first-letter</title>
+<meta name="assert" content="This test is ensures that flexbox placement does not apply to ::first-letter psuedo-content">
+<link rel="author" title="Vince Falconi" href="vince.falconi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#placement">
+<style>
+  div { display: flex; }
+  div::first-letter { order: 2 }
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<div>Triceratops</div>
+
+<script>
+  test(function() {
+    let order = getComputedStyle(document.querySelector('div'), '::first-letter').order;
+    assert_not_equals(order, '2');
+  });
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-center-overflow.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-center-overflow.html
new file mode 100644
index 00000000000..7398bb46640
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-center-overflow.html
@@ -0,0 +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">
+<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.
+
+<style>
+.flexbox {
+  background: blue;
+  margin-left: 50px;
+  height: 150px;
+  width: 50px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+span {
+  background: orange;
+  margin: 10px;
+  flex: 1 0 40px;
+}
+</style>
+
+<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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-001.html
new file mode 100644
index 00000000000..ed309ca309c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-001.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: 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="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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 > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </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('.container > div')">
+  <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 data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="6" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="2" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-002.html
new file mode 100644
index 00000000000..ca777b7ac13
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_justifycontent-rtl-002.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: 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="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      position: relative;
+      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 > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </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('.container > div')">
+  <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 data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: space-around"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: space-evenly"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: stretch"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div data-offset-x="10" data-offset-y="3"></div></div>
+    <div class="container" style="justify-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
+    <div class="container" style="justify-content: left"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <div class="container" style="justify-content: right"><div data-offset-x="10" data-offset-y="1"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_width-change-and-relayout-children.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_width-change-and-relayout-children.html
new file mode 100644
index 00000000000..1cf771adb8d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_width-change-and-relayout-children.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Flexbox: Flex children width when the parent width is changed</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=108231">
+<meta name="assert" content="Flexbox should relayout flex children when width changes.">
+<link href="support/flexbox.css" rel="stylesheet">
+<style>
+.flexitem {
+    width: 100%;
+    height: 3em;
+    min-height: 3em;
+}
+.child {
+    background-color: salmon;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<script>
+function change() {
+  var container = document.getElementById('container');
+  container.offsetWidth;
+  container.style.width = "200px";
+  checkLayout("#container");
+}
+</script>
+</head>
+<body onload="change()">
+<div id=log></div>
+<div id="container" style="width: 100px" data-expected-width="200">
+  <div class="flexbox column" data-expected-width="200">
+    <div class="flexitem" data-expected-width="200">
+      <div class="child" data-expected-width="200">This div should be 200px wide.</div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_width-wrapping-column.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_width-wrapping-column.html
new file mode 100644
index 00000000000..cf8b53f2fcc
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexbox_width-wrapping-column.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: the width calculation of flexbox with flex-direction: column and flex-wrap: wrap</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">
+<link rel="bookmark" href="https://crbug.com/607262">
+<link rel="bookmark" href="https://crbug.com/607856">
+<meta name="assert" content="This test ensures that the width of a flexbox with 'flex-direction: column' and 'flex-wrap: wrap' is updated when the wrapping column dynamically changes.">
+<link href="support/flexbox.css" rel="stylesheet">
+<style>
+.flexbox {
+  width: 600px;
+  height: 160px;
+  outline: 2px solid black;
+}
+.item {
+  height: 20px;
+  background-color: green;
+  margin: 5px;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<script>
+function change() {
+  var flex = document.getElementById("test");
+  flex.offsetWidth;
+  flex.style.height = "60px";
+  checkLayout('.flexbox');
+}
+</script>
+<body onload="change()">
+<div id=log></div>
+
+<p>The green boxes should all be within the black box</p>
+
+<div class="flexbox column wrap" id="test">
+  <div class="item" data-expected-width="290"></div>
+  <div class="item" data-expected-width="290"></div>
+  <div class="item" data-expected-width="290"></div>
+  <div class="item" data-expected-width="290"></div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexitem-no-margin-collapsing.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexitem-no-margin-collapsing.html
new file mode 100644
index 00000000000..bcd8df60b00
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexitem-no-margin-collapsing.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Flexbox: flex items don't collapse margins</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#item-margins">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="This test ensures that flex items don't collapse margins
+with their children.">
+<style>
+.flexbox {
+    background-color: lightgrey;
+}
+.flexbox p {
+    height: 100px;
+    width: 100px;
+    margin: 10px;
+    background-color: blue;
+}
+</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 id=log></div>
+
+<div class="flexbox" style="position: relative">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="120">
+    <p data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="100"></p>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexitem-stretch-image.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexitem-stretch-image.html
new file mode 100644
index 00000000000..eab7f1733da
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flexitem-stretch-image.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: image stretch</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="This test ensures that flexbox stretches a given image
+to fit the size of flexitem according to flex values.">
+<style>
+.flexbox {
+    width: 600px;
+    display: flex;
+    background-color: #aaa;
+    position: relative;
+    min-height: 10px;
+}
+.flexbox > * {
+    margin: 0;
+    border: 0;
+    padding: 0;
+    min-width: 0;
+}
+</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">
+  <img data-expected-display="block" data-expected-width="345" data-expected-height="345" style="flex: 1 0 auto;" src="support/100x100-blue.png">
+  <img data-expected-display="block" data-expected-width="255" data-expected-height="345" style="flex: 1 0 auto;" src="support/10x10-green.png">
+</div>
+
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/gap-017.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/gap-017.html
new file mode 100644
index 00000000000..beb9df582d9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/gap-017.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<title>Flex gaps</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#main-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
+<meta name="assert" content="Button elements with display: flex honor gaps." />
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<style>
+.button {
+  display: flex;
+  flex-direction: column;
+  border: 0;
+  padding: 0;
+  background: green;
+  width: 100px;
+  row-gap: 20px;
+}
+
+.item {
+  height: 40px;
+}
+
+#reference-overlapped-red {
+  position: absolute;
+  background-color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+</style>
+
+<div id=reference-overlapped-red></div>
+
+<button class=button data-expected-height=100>
+  <div class=item></div>
+  <div class=item></div>
+</button>
+
+<script>
+checkLayout('.button');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/gap-018.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/gap-018.html
new file mode 100644
index 00000000000..43c112ad178
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/gap-018.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>Flex gaps</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#main-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
+<meta name="assert" content="Button elements with display: flex but no items don't subtract column gap from intrinsic max size." />
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<style>
+.button {
+  display: flex;
+  border: 0;
+  padding: 0;
+
+  padding-left: 100px;
+  column-gap: 100px;
+  width: max-width;
+  height: 100px;
+  background: green;
+}
+
+#reference-overlapped-red {
+  position: absolute;
+  background-color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+</style>
+
+<div id=reference-overlapped-red></div>
+
+<button class=button data-expected-width=100></button>
+
+<script>
+checkLayout('.button');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html
new file mode 100644
index 00000000000..466b191c404
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-content: center</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-content: center;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-content"),
+	          "center");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html
new file mode 100644
index 00000000000..261ccf1c96b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-content: flex-end</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-content: flex-end;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-content"),
+	          "flex-end");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html
new file mode 100644
index 00000000000..031717b0fd3
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-content: flex-start</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-content: flex-start;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-content"),
+	          "flex-start");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html
new file mode 100644
index 00000000000..a80b58adb6c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-content: space-around</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-content: space-around;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-content"),
+	          "space-around");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html
new file mode 100644
index 00000000000..da1abeed8ab
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-content: space-between</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-content: space-between;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-content"),
+	          "space-between");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html
new file mode 100644
index 00000000000..f07ec099146
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-baseline.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-items: baseline</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-items: baseline;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-items"),
+	          "baseline");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html
new file mode 100644
index 00000000000..64ba7032963
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-center.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-items: center</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-items: center;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-items"),
+	          "center");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html
new file mode 100644
index 00000000000..b61f2895880
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-items: flex-end</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-items: flex-end;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-items"),
+	          "flex-end");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html
new file mode 100644
index 00000000000..0a7eda97dcb
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-items: flex-start</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-items: flex-start;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-items"),
+	          "flex-start");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html
new file mode 100644
index 00000000000..619da7c4044
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-items: invalid</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-items: filler;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-items"),
+	          "normal");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html
new file mode 100644
index 00000000000..1637fe43d2e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-items-stretch.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-items: stretch</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-items: stretch;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-items"),
+	          "stretch");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html
new file mode 100644
index 00000000000..ee57d2f3114
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-baseline.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-self: baseline</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-self: baseline;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-self"),
+	          "baseline");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html
new file mode 100644
index 00000000000..79a99642cae
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-center.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-self: center</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-self: center;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-self"),
+	          "center");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html
new file mode 100644
index 00000000000..081d6613a5b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-self: flex-end</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-self: flex-end;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-self"),
+	          "flex-end");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html
new file mode 100644
index 00000000000..558926a59db
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-self: flex-start</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-self: flex-start;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-self"),
+	          "flex-start");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html
new file mode 100644
index 00000000000..71a088f7503
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-self: invalid</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-self: filler;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-self"),
+	          "auto");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html
new file mode 100644
index 00000000000..deca1390da1
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-self-stretch.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | align-self: stretch</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	align-self: stretch;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("align-self"),
+	          "stretch");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html
new file mode 100644
index 00000000000..1b216a49c38
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display-inline.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | display: inline-flex</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	display: inline-flex;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("display"),
+	          "inline-flex");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html
new file mode 100644
index 00000000000..ae878ffe502
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_display.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | display: flex</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	display: flex;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("display"),
+	          "flex");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html
new file mode 100644
index 00000000000..3d0a007eb0d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-basis: 0</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-basis: 0;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "0px");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html
new file mode 100644
index 00000000000..e402be427e4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-basis: 0%</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-basis: 0%;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "0%");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html
new file mode 100644
index 00000000000..8673f0f0187
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-basis: auto</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-basis: auto;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "auto");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html
new file mode 100644
index 00000000000..1f45420d9f0
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-basis: percent</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+html {
+	display: flex;
+	width: 100px;
+}
+body {
+	color: red;
+	margin: 0;
+	flex-basis: 100%;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "100%");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html
new file mode 100644
index 00000000000..6303415b73d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-direction: column-reverse</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-direction: column-reverse;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "column-reverse");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html
new file mode 100644
index 00000000000..d55db28c306
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-column.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-direction: column</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-direction: column;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "column");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html
new file mode 100644
index 00000000000..5560adbbc08
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-direction: row</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-direction: filler;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html
new file mode 100644
index 00000000000..8724fd3cc8a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-direction: row-reverse</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-direction: row-reverse;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row-reverse");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html
new file mode 100644
index 00000000000..ff93ee8c023
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-direction-row.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-direction: row</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-direction: row;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html
new file mode 100644
index 00000000000..c89d3440c6e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: column nowrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: column nowrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "column");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html
new file mode 100644
index 00000000000..bb47b47ee41
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: column-reverse nowrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: column-reverse nowrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "column-reverse");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html
new file mode 100644
index 00000000000..46f43ca126c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: column-reverse wrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: column-reverse wrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "column-reverse");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "wrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html
new file mode 100644
index 00000000000..4af780e32c6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: column-reverse</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: column-reverse;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "column-reverse");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html
new file mode 100644
index 00000000000..f22e7306aaa
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: column wrap-reverse</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: column wrap-reverse;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "column");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "wrap-reverse");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html
new file mode 100644
index 00000000000..b69c1721a37
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: column wrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: column wrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "column");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "wrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html
new file mode 100644
index 00000000000..a7c011c3045
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-column.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: column</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: column;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "column");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html
new file mode 100644
index 00000000000..cd85494b9df
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: nowrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: nowrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html
new file mode 100644
index 00000000000..524ed0a8d56
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: row nowrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: row nowrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html
new file mode 100644
index 00000000000..04df1b46db5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: row-reverse nowrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: row-reverse nowrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row-reverse");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html
new file mode 100644
index 00000000000..9a7dc8fa1f4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: row-reverse wrap-reverse</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: row-reverse wrap-reverse;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row-reverse");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "wrap-reverse");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html
new file mode 100644
index 00000000000..bb9bd009e1c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: row-reverse wrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: row-reverse wrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row-reverse");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "wrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html
new file mode 100644
index 00000000000..9474b3e235b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: row-reverse</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: row-reverse;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row-reverse");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html
new file mode 100644
index 00000000000..ae778c4a72d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: row wrap-reverse</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: row wrap-reverse;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "wrap-reverse");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html
new file mode 100644
index 00000000000..48613d4f8ad
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: row wrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: row wrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "wrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html
new file mode 100644
index 00000000000..ec6e71fa59e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-row.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: row</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: row;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html
new file mode 100644
index 00000000000..e4e54caa647
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-flow: wrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-flow: wrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-direction"),
+	          "row");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "wrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html
new file mode 100644
index 00000000000..0b5fdc4ab7e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-0.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-grow: 0</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-grow: 0;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"),
+	          "0");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html
new file mode 100644
index 00000000000..1142abe578f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-grow: negative</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-grow: -1;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"),
+	          "0");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html
new file mode 100644
index 00000000000..c0316af9244
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-grow-number.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-grow: number</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-grow: 666;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"),
+	          "666");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html
new file mode 100644
index 00000000000..9e57b104138
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex: 0 auto</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex: initial;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"),
+	          "0");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"),
+	          "1");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "auto");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html
new file mode 100644
index 00000000000..c3728276cca
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex: auto</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex: auto;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"),
+	          "1");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"),
+	          "1");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "auto");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html
new file mode 100644
index 00000000000..4ef7eeac4bf
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex: initial</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex: initial;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"),
+	          "0");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"),
+	          "1");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "auto");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html
new file mode 100644
index 00000000000..d43a02c355b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex: invalid</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex: 0 1 1;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"),
+	          "0");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"),
+	          "1");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "auto");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html
new file mode 100644
index 00000000000..fcd7ce32139
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex: auto</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex: none;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"),
+	          "0");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"),
+	          "0");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "auto");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html
new file mode 100644
index 00000000000..8a2f2075b66
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex: number</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex: 666;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"),
+	          "666");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"),
+	          "1");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "0%");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html
new file mode 100644
index 00000000000..7cee6fefff3
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shorthand.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex: invalid</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex: 666 666 666px;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-grow"),
+	          "666");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"),
+	          "666");
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-basis"),
+	          "666px");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html
new file mode 100644
index 00000000000..e61a64b3ba5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-shrink: 0</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-shrink: 0;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"),
+	          "0");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html
new file mode 100644
index 00000000000..279c43605d6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-shrink: negative</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-shrink: -1;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"),
+	          "1");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html
new file mode 100644
index 00000000000..a3df850ae5d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-shrink: number</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-shrink: 666;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-shrink"),
+	          "666");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html
new file mode 100644
index 00000000000..1f06c144fa3
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-wrap: wrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-wrap: filler;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html
new file mode 100644
index 00000000000..5095d28887d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-wrap: nowrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-wrap: nowrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "nowrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html
new file mode 100644
index 00000000000..2cc411f1af5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-wrap: wrap-reverse</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-wrap: wrap-reverse;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "wrap-reverse");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html
new file mode 100644
index 00000000000..3b92ee3789e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | flex-wrap: wrap</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	flex-wrap: wrap;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("flex-wrap"),
+	          "wrap");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html
new file mode 100644
index 00000000000..9031892db2e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-center.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | justify-content: center</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	justify-content: center;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("justify-content"),
+	          "center");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html
new file mode 100644
index 00000000000..0536482bece
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | justify-content: flex-end</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	justify-content: flex-end;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("justify-content"),
+	          "flex-end");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html
new file mode 100644
index 00000000000..14e58639e65
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | justify-content: flex-start</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	justify-content: flex-start;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("justify-content"),
+	          "flex-start");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html
new file mode 100644
index 00000000000..62ff49df1b9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | justify-content: space-around</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	justify-content: space-around;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("justify-content"),
+	          "space-around");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html
new file mode 100644
index 00000000000..1e312ca513c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | justify-content: space-between</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	justify-content: space-between;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("justify-content"),
+	          "space-between");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html
new file mode 100644
index 00000000000..cc53c182748
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-auto-size.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>CSS Flexible Box Test: computed style for auto minimum size</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" />
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  .flex { display: flex }
+  .none { display: none }
+  .min-wh {
+    min-width: auto;
+    min-height: auto;
+  }
+  .contents { display: contents }
+</style>
+<div class="flex">
+  <div class="min-wh"></div>
+</div>
+<div class="none">
+  <div class="flex">
+    <div class="min-wh"></div>
+  </div>
+</div>
+<div class="flex">
+  <div class="contents">
+    <div class="min-wh"></div>
+  </div>
+</div>
+<div class="flex">
+  <div class="min-wh none"></div>
+</div>
+<script>
+  const tests = [
+    { description: "Computed min-width/min-height of specified auto for flex item.", computed: "auto" },
+    { description: "Computed min-width/min-height of specified auto inside display:none which would otherwise have been a flex item.", computed: "0px" },
+    { description: "Computed min-width/min-height of specified auto for flex item inside display:contents.", computed: "auto" },
+    { description: "Computed min-width/min-height of specified auto with display:none which would otherwise have been a flex item.", computed: "0px" }
+  ];
+
+  const testElements = document.querySelectorAll(".min-wh");
+  let testNo = 0;
+  for (let testElement of testElements) {
+    test(() => {
+      assert_equals(getComputedStyle(testElement).minWidth, tests[testNo].computed);
+      assert_equals(getComputedStyle(testElement).minHeight, tests[testNo].computed);
+    }, tests[testNo].description);
+    testNo++;
+  }
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html
new file mode 100644
index 00000000000..15c90c184d7
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-height-auto.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | min-height: auto</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+html {
+	display: flex;
+	flex-direction: column;
+}
+body {
+	color: red;
+	min-height: auto;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("min-height"),
+	          "auto");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html
new file mode 100644
index 00000000000..c9ca51eb90a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_min-width-auto.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | min-width: auto</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+html {
+	display: flex;
+}
+body {
+	color: red;
+	min-width: auto;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("min-width"),
+	          "auto");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html
new file mode 100644
index 00000000000..74b83e6fe41
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-inherit.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | order: -1</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+html {
+	order: 666;
+}
+body {
+	color: red;
+	order: inherit;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("order"),
+	          "666");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html
new file mode 100644
index 00000000000..a1ed1323a63
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-integer.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | order: integer</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	order: 5;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("order"),
+	          "5");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html
new file mode 100644
index 00000000000..f768ed78c89
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | order: noninteger</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	order: 1.5;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("order"),
+	          "0");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html
new file mode 100644
index 00000000000..5a869cb5437
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order-negative.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | order: -1</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	order: -1;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("order"),
+	          "-1");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html
new file mode 100644
index 00000000000..eb36a968203
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_order.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>flexbox | computed style | order: 0</title>
+<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<meta name="flags" content="dom">
+<style>
+body {
+	color: red;
+	order: 0;
+}
+</style>
+<div id="log"></div>
+<script>
+test(function() {
+    var body = document.body;
+
+    assert_equals(getComputedStyle(body).getPropertyValue("order"),
+	          "0");
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/height-percentage-with-dynamic-container-size.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/height-percentage-with-dynamic-container-size.html
new file mode 100644
index 00000000000..cab1fa7f926
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-anonymous-box.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-anonymous-box.html
new file mode 100644
index 00000000000..324f332414a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-anonymous-box.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1097654" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+#target {
+  font: 20px/1 Ahem;
+  display: flex;
+  flex-direction: column;
+  border: 2px solid black;
+  width: 100px;
+  height: 100px;
+}
+</style>
+<div id=target>X</div>
+<script>
+test(function(t) {
+  const target = document.getElementById('target');
+  assert_equals(target, document.elementFromPoint(30, 10));
+}, 'Hit-testing within an anonymous flex-item should return the flexbox as the hittest result.');
+</script>
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-before-pseudo.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-before-pseudo.html
new file mode 100644
index 00000000000..615cc1a8515
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-before-pseudo.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1081789" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+#target::before {
+  font: 50px/1 Ahem;
+  display: inline-flex;
+  content: "X";
+  border: 2px solid black;
+  color: green;
+}
+</style>
+<div id=target></div>
+<script>
+test(function(t) {
+  const target = document.getElementById('target');
+  assert_equals(target, document.elementFromPoint(30, 30));
+}, 'Hit-testing text within a pseudo-element flex-item should return the flexbox as the hittest result.');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-margin.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-margin.html
new file mode 100644
index 00000000000..02f9a2c3d43
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-margin.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" />
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" />
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+#container {
+  width: 600px;
+  display: flex;
+}
+
+#left {
+  width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  background: rgba(200, 200, 200, 0.8);
+}
+
+#right {
+  width: 300px;
+  background-color: rgba(0, 128, 0, 0.8);
+  margin-left: -100px;
+}
+</style>
+<div id="container">
+  <a id="left" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a>
+  <div id="right"></div>
+</div>
+<div id="log"></div>
+<script>
+  test(function(t)
+    {
+      const container = document.querySelector('#container');
+      // Target the intersection of the two child elements.
+      // The occluded link should not be clickable.
+      const x = container.offsetLeft + 250;
+      const y = container.offsetTop + 5;
+
+      var element = document.elementFromPoint(x, y);
+      assert_equals(element.nodeName, 'DIV');
+      assert_equals(element.id, 'right');
+    }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: negative margin case (crbug.com/844505)");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-order.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-order.html
new file mode 100644
index 00000000000..061613804ef
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-order.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" />
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" />
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+#container {
+  width: 600px;
+  display: flex;
+}
+
+#left {
+  width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  background: rgba(200, 200, 200, 0.8);
+  order: 0;
+}
+
+#right {
+  width: 300px;
+  background-color: rgba(0, 128, 0, 0.8);
+  margin-left: -100px;
+  order: 1;
+}
+</style>
+<div id="container">
+  <div id="right"></div>
+  <a id="left" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a>
+</div>
+<div id="log"></div>
+<script>
+  test(function(t)
+    {
+      const container = document.querySelector('#container');
+      // Target the intersection of the two child elements.
+      // The occluded link should not be clickable.
+      const x = container.offsetLeft + 250;
+      const y = container.offsetTop + 5;
+
+      var element = document.elementFromPoint(x, y);
+      assert_equals(element.nodeName, 'DIV');
+      assert_equals(element.id, 'right');
+    }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: flex order case (crbug.com/844505)");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-relative.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-relative.html
new file mode 100644
index 00000000000..c42fc2b4bce
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-overlapping-relative.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" />
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" />
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+#container {
+  width: 600px;
+  display: flex;
+}
+
+#left {
+  position: relative;
+  width: 300px;
+  margin-right: -100px;
+  background-color: rgba(0, 128, 0, 0.8);
+}
+
+#right {
+  width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  background: rgba(200, 200, 200, 0.8);
+}
+
+</style>
+<div id="container">
+  <div id="left"></div>
+  <a id="right" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a>
+</div>
+<div id="log"></div>
+<script>
+  test(function(t)
+    {
+      const container = document.querySelector('#container');
+      // Target the intersection of the two child elements.
+      // The occluded link should not be clickable.
+      const x = container.offsetLeft + 250;
+      const y = container.offsetTop + 5;
+
+      var element = document.elementFromPoint(x, y);
+      assert_equals(element.nodeName, 'DIV');
+      assert_equals(element.id, 'left');
+    }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: relative case (crbug.com/844505)");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-001.html
new file mode 100644
index 00000000000..ee8eb06e767
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-001.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio.
+    </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://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="16" data-expected-height="16">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-001v.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-001v.html
new file mode 100644
index 00000000000..d29333b22c2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-001v.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+    <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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="16" data-expected-height="16">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-002.html
new file mode 100644
index 00000000000..241f183e97f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-002.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio.
+    </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://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="16" data-expected-height="16">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-002v.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-002v.html
new file mode 100644
index 00000000000..958ec68259c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-002v.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+    <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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="16" data-expected-height="16">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="34" data-expected-height="34">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-003.html
new file mode 100644
index 00000000000..dc1cf24847f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-003.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on stretched flex item w/ intrinsic ratio.
+    </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://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: stretch;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="10">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="40">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-003v.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-003v.html
new file mode 100644
index 00000000000..b7e799d6285
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-003v.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: stretch;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-rl;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+    <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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="10">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="40">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-004.html
new file mode 100644
index 00000000000..b0bcdfd7733
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-004.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on stretched flex item w/ intrinsic ratio.
+    </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://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: stretch;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="40" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="10" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-004v.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-004v.html
new file mode 100644
index 00000000000..5ab545db1d2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-004v.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on stretched flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: stretch;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-rl;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+    <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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="40" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="10" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-005.html
new file mode 100644
index 00000000000..db3d23c53a7
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-005.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flexible flex item w/ intrinsic ratio.
+    </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://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        flex: 1;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 1 1 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="10" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-005v.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-005v.html
new file mode 100644
index 00000000000..9256cd9955b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-005v.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flexible flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        flex: 1;
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+    <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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 1 1 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="10" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="40" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-006.html
new file mode 100644
index 00000000000..73d9478ff05
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-006.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flexible flex item w/ intrinsic ratio.
+    </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://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        flex: 1;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 1 1 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="10">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="40">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-006v.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-006v.html
new file mode 100644
index 00000000000..39875e3fd27
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-006v.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flexible flex item w/ intrinsic ratio
+      (with a vertical writing-mode on the flex items).
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        flex: 1;
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+    <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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 1 1 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px" data-expected-width="10" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px" data-expected-width="6" data-expected-height="6">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px" data-expected-width="6" data-expected-height="10">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="40">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="40" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="40">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="40">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-007.html
new file mode 100644
index 00000000000..be6dde0cba8
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-007.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio,
+      some padding, and box-sizing:border-box.
+    </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://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      img {
+        padding: 1px 2px 3px 4px;
+        box-sizing: border-box;
+        background: pink;
+      }
+
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="22" data-expected-height="20">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="28">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="32" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="28">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="32">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="36" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="36" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="34" data-expected-height="32">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 16px" data-expected-width="16" data-expected-height="14">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 16px" data-expected-width="18" data-expected-height="16">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 20px;
+                                              max-height: 14px" data-expected-width="16" data-expected-height="14">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 14px;
+                                              max-height: 20px" data-expected-width="14" data-expected-height="12">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-007v.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-007v.html
new file mode 100644
index 00000000000..fd26b882bb1
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/image-as-flexitem-size-007v.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio,
+      some padding, box-sizing:border-box, and a vertical writing-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://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      img {
+        padding: 1px 2px 3px 4px;
+        box-sizing: border-box;
+        background: pink;
+      }
+
+      br { clear: both; }
+
+      .flexbox > * {
+        writing-mode: vertical-lr;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+    <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 > img')">
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" data-expected-width="22" data-expected-height="20">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px" data-expected-width="30" data-expected-height="28">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px" data-expected-width="32" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="28">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="32">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="36" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px" data-expected-width="36" data-expected-height="34">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px" data-expected-width="34" data-expected-height="32">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 16px" data-expected-width="16" data-expected-height="14">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 16px" data-expected-width="18" data-expected-height="16">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 20px;
+                                              max-height: 14px" data-expected-width="16" data-expected-height="14">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 14px;
+                                              max-height: 20px" data-expected-width="14" data-expected-height="12">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px" data-expected-width="30" data-expected-height="10">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px" data-expected-width="10" data-expected-height="30">
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/inline-flex.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/inline-flex.html
new file mode 100644
index 00000000000..336d5d1dc18
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/inline-flex.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: Ensure proper formatting with display: inline-flex</title>
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-property">
+<meta name="assert" content="This test checks that inline-flex generates a flex container box that is inline-level when placed in flow layout.">
+<style>
+#testcase > div {
+    height: 50px;
+    width: 50px;
+    background-color: green;
+    outline: 2px solid darkgreen;
+}
+#testcase > div > div {
+    flex: 1;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('#testcase')">
+<div id=log></div>
+<p>This test passes if the three green boxes are on the same horizontal line.</p>
+
+<div id="testcase" style="position: relative">
+<div data-offset-y="0" data-offset-x="0" data-expected-width="50" data-expected-height="50" style="display: inline-block">
+</div><div data-offset-y="0" data-offset-x="50" data-expected-width="50" data-expected-height="50" style="display: inline-flex;">
+    <div data-expected-width="25"></div>
+    <div data-expected-width="25"></div>
+</div><div data-offset-y="0" data-offset-x="100" data-expected-width="50" data-expected-height="50" style="display: inline-block"></div>
+</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html
new file mode 100644
index 00000000000..b231364a1cf
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/inline-flexbox-wrap-vertically-width-calculation.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: Inline flexbox width calculation with flex-direction: column and flex-wrap</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#Computing_widths_and_margins">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="This test checks that width is correctly computed for flexbox with flex-direction: column and flex-wrap.">
+<style>
+.inline-flexbox {
+    background-color: #aaa;
+    position: relative;
+}
+
+.writing-mode-vertical {
+  writing-mode: vertical-rl;
+}
+.inline-flexbox > * {
+    flex: none;
+}
+.inline-flexbox :nth-child(1) {
+    background-color: lightblue;
+}
+.inline-flexbox :nth-child(2) {
+    background-color: lightgreen;
+}
+.inline-flexbox :nth-child(3) {
+    background-color: pink;
+}
+.inline-flexbox :nth-child(4) {
+    background-color: yellow;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.inline-flexbox');">
+<div id=log></div>
+<div class="inline-flexbox column align-content-flex-start wrap" data-expected-width="110" data-expected-height="60">
+  <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
+  <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
+  <div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="30"></div>
+  <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
+</div>
+
+<div class="inline-flexbox column align-content-flex-start wrap"
+  style="height: 35px" data-expected-width="130" data-expected-height="35">
+  <div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
+  <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
+  <div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="0"></div>
+  <div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="10"></div>
+</div>
+
+<div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70">
+  <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="0"></div>
+  <div style="width: 100px; height: 70px" data-offset-x="130" data-offset-y="0"></div>
+  <div style="width: 30px; height: 50px" data-offset-x="100" data-offset-y="0"></div>
+  <div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="0"></div>
+</div>
+
+<div
+  class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical"
+  style="width: 200px" data-expected-width="200" data-expected-height="100">
+  <div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="0"></div>
+  <div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div>
+  <div style="width: 30px; height: 50px" data-offset-x="20" data-offset-y="0"></div>
+  <div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="70"></div>
+</div>
+
+<div class="inline-flexbox column align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60">
+  <div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="0"></div>
+  <div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="20"></div>
+  <div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="30"></div>
+  <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
+</div>
+
+<div class="inline-flexbox column align-content-flex-start wrap-reverse"
+  style="height: 35px" data-expected-width="130" data-expected-height="35">
+  <div style="width: 10px; height: 20px" data-offset-x="120" data-offset-y="0">
+  </div>
+  <div style="width: 50px; height: 10px" data-offset-x="80" data-offset-y="20">
+  </div>
+  <div style="width: 80px; height: 10px" data-offset-x="0" data-offset-y="0">
+  </div>
+  <div style="width: 40px; height: 20px" data-offset-x="40" data-offset-y="10">
+  </div>
+</div>
+
+<div class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70">
+  <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="50"></div>
+  <div style="width: 100px; height: 50px" data-offset-x="130" data-offset-y="20"></div>
+  <div style="width: 30px; height: 30px" data-offset-x="100" data-offset-y="40"></div>
+  <div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="0"></div>
+</div>
+
+<div
+  class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical"
+  style="width: 200px" data-expected-width="200" data-expected-height="100">
+  <div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="80">
+  </div>
+  <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="50">
+  </div>
+  <div style="width: 30px; height: 70px" data-offset-x="20" data-offset-y="30">
+  </div>
+  <div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="0">
+  </div>
+</div>
+
+<div class="inline-flexbox column-reverse align-content-flex-start wrap" data-expected-width="110" data-expected-height="60">
+  <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
+  <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="30"></div>
+  <div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
+  <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
+</div>
+
+<div class="inline-flexbox column-reverse align-content-flex-start wrap"
+  style="height: 35px" data-expected-width="130" data-expected-height="35">
+  <div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="15"></div>
+  <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="5"></div>
+  <div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="25"></div>
+  <div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="5"></div>
+</div>
+
+<div class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70">
+  <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
+  <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="0"></div>
+  <div style="width: 30px; height: 70px" data-offset-x="150" data-offset-y="0"></div>
+  <div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="0"></div>
+</div>
+
+<div
+  class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical"
+  style="width: 200px" data-expected-width="200" data-expected-height="100">
+  <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
+  <div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div>
+  <div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="0"></div>
+  <div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="70"></div>
+</div>
+
+<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60">
+  <div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="40"></div>
+  <div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="30"></div>
+  <div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="20"></div>
+  <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
+</div>
+
+<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse"
+  style="height: 35px" data-expected-width="130" data-expected-height="35">
+  <div style="width: 10px; height: 20px" data-offset-x="120" data-offset-y="15">
+  </div>
+  <div style="width: 50px; height: 10px" data-offset-x="80" data-offset-y="5">
+  </div>
+  <div style="width: 80px; height: 10px" data-offset-x="0" data-offset-y="25">
+  </div>
+  <div style="width: 40px; height: 20px" data-offset-x="40" data-offset-y="5">
+  </div>
+</div>
+
+<div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70">
+  <div style="width: 50px; height: 70px" data-offset-x="0" data-offset-y="0"></div>
+  <div style="width: 100px; height: 20px" data-offset-x="50" data-offset-y="50"></div>
+  <div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="20"></div>
+  <div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="40"></div>
+</div>
+
+<div
+  class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical"
+  style="width: 200px" data-expected-width="200" data-expected-height="120">
+  <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="100">
+  </div>
+  <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="70">
+  </div>
+  <div style="width: 30px; height: 30px" data-offset-x="150" data-offset-y="90">
+  </div>
+  <div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="0">
+  </div>
+</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-004.html
new file mode 100644
index 00000000000..19530e95420
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-004.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<meta name="assert"
+  content="Item with width:100% doesn't contribute to max-content size but does get 100px width after final layout. The item also overflows the container." />
+
+<style>
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    flex: 0 0 100px;
+    outline: 1px solid;
+  }
+</style>
+
+<div
+  style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green; position: relative;"
+  data-expected-width="100">
+  <div class="item" style="width: 100px;"></div>
+  <div class="item" style="width: 100%;" data-expected-width="100"
+    data-offset-x="100"></div>
+</div>
+
+<script>
+  checkLayout('body > div');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-005.html
new file mode 100644
index 00000000000..1c02a0e6528
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-005.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<meta name="assert"
+  content="The item still has sufficient available size at the time fit-content is resolved. (A bug in the code could cause the right-most item to have a width of 75px.)">
+
+<style>
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    flex: 0 0 100px;
+    outline: 1px solid;
+  }
+
+  .grandchild {
+    width: 75px;
+    float: left;
+  }
+</style>
+
+<div
+  style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green; position: relative;"
+  data-expected-width="250">
+  <div class="item" style="width: 100px;"></div>
+  <div class="item" style="width: fit-content;" data-expected-width="150"
+    data-offset-x="100">
+    <!-- This item has min-content=75 and max-content=150. -->
+    <div class="grandchild"></div>
+    <div class="grandchild"></div>
+  </div>
+</div>
+
+<script>
+  checkLayout('body > div');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-010.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-010.html
new file mode 100644
index 00000000000..4bff7d74fa5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-010.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+
+<meta name="assert"
+  content="Item with unresolvable width:100% contributes to max-content size via its content contributions." />
+
+<style>
+  .grandchild {
+    float: left;
+    width: 50px;
+  }
+
+</style>
+
+<div
+  style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green;"
+  data-expected-width="100">
+  <div style="width: 100%; height: 50px; min-height: 0px;"
+    data-expected-width="100">
+    <div class="grandchild"></div>
+    <div class="grandchild"></div>
+  </div>
+</div>
+
+
+<script>
+  checkLayout('body > div');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-018.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-018.html
new file mode 100644
index 00000000000..d6cdf3750ea
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-018.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"
+  title="Case E">
+<meta name="assert"
+  content="aspect-ratio item gets correct flex base during intrinsic sizing, where a too-large flex base will cause the container to be too large." />
+
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+
+<style>
+  .grandchild {
+    float: left;
+    width: 30px;
+    height: 200px;
+  }
+
+</style>
+
+<p>Main point of this test is that the container width is 100px, not 140px.</p>
+
+<div
+  style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; outline: 1px solid; position: relative;"
+  data-expected-width="100">
+  <div
+    style="width: 100px; flex: 0 0 30px; min-height: 0px; background: lightblue;">
+  </div>
+  <!-- flex base size during layout for intrinsic sizing should be 60 because that's fit-content width * aspect-ratio, in case E. If flex base size is too big, then the second item will end up on the second line, causing the container to be 140px wide.
+  flex base size during real layout will be 50px because then the 50% will be resolvable and this will fall into case B. -->
+  <div
+    style="width: 50%; aspect-ratio: 1/1; min-height: 0px; flex: 0 0 auto; background: orange;"
+    data-expected-height="50">
+    <div class="grandchild"></div>
+    <div class="grandchild"></div>
+  </div>
+  <div style="width: 40px; flex: 0 0 10px; min-height: 0px; background: grey;"
+    data-offset-x="0">
+  </div>
+</div>
+
+<script>
+  checkLayout('body > div');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-019.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-019.html
new file mode 100644
index 00000000000..b062f2fe954
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/col-wrap-019.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"
+  title="Case E">
+<meta name="assert"
+  content="aspect-ratio item gets correct flex base during intrinsic sizing, where a too-small flex base will cause the container to be too small." />
+
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+
+<style>
+  .grandchild {
+    float: left;
+    width: 10px;
+    height: 200px;
+  }
+
+</style>
+
+<p>Main point of this test is that the container width is 100px, not 80px.</p>
+
+<div
+  style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; outline: 1px solid; position: relative;"
+  data-expected-width="100">
+  <!-- flex base size during layout for intrinsic sizing should be 100 because that's fit-content width (20px) * aspect-ratio, in case E. If flex base size is too small, then the second item will end up on the first line, causing the container to be only 80px wide.
+  flex base size during real layout will be 50px because then the 10% will be resolvable and this will fall into case B. -->
+  <div
+    style="width: 10%; aspect-ratio: 1/5; min-height: 0px; flex: 0 0 auto; background: orange;"
+    data-expected-height="50" data-offset-x="0">
+    <div class="grandchild"></div>
+    <div class="grandchild" data-offset-y="200"></div>
+  </div>
+  <div style="width: 80px; flex: 0 0 1px; min-height: 0px; background: grey;"
+    data-offset-x="0">
+  </div>
+</div>
+
+<script>
+  checkLayout('body > div');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-005.html
new file mode 100644
index 00000000000..8282d242aef
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-005.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<meta name="assert"
+  content="min-content width is calculated correctly in a variety of scenarios with multiple flex items" />
+
+<style>
+  .zero-width {
+    width: 0px;
+    height: 100px;
+    margin-bottom: 20px;
+  }
+
+  .floating-flexbox {
+    display: flex;
+    outline: 5px solid blue;
+    height: 100px;
+    float: left;
+  }
+
+  .floating-flexbox>div:nth-child(1) {
+    background: yellow;
+  }
+
+  .floating-flexbox>div:nth-child(2) {
+    background: orange;
+  }
+
+  .floating-flexbox>div:nth-child(3) {
+    background: lightblue;
+  }
+
+  .floating-flexbox>div>div {
+    width: 100px;
+  }
+</style>
+
+<body onload="checkLayout('.floating-flexbox')">
+  <div id="log"></div>
+
+  <div class="zero-width">
+    <div class="floating-flexbox" data-expected-width="200">
+      <!-- min contribution: 100 -->
+      <!-- desired fraction: -0.5 -->
+      <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution -->
+      <div style="flex: 1 1 200px; width:50px; min-width:0px;">
+        <div></div>
+      </div>
+      <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution -->
+      <div style="flex: 1 1 400px; width:50px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="zero-width">
+    <div class="floating-flexbox" data-expected-width="200">
+      <!-- min contribution: 100 -->
+      <!-- min contribution - flex basis: -100 -->
+      <!-- desired fraction: -0.5 -->
+      <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution -->
+      <div style="flex: 1 1 200px; width:50px;">
+        <div></div>
+      </div>
+      <!-- min contribution: 100 -->
+      <!-- min contribution - flex basis: -300 -->
+      <!-- desired fraction: -300/(2*400) = -0.375 -->
+      <!-- chosen fraction <=0 and desired fraction <=0 and item can shrink, so it contributes its min-content contribution -->
+      <div style="flex: 1 2 400px; width:50px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- This is same as above except for min-width auto is no longer in
+      effect. EdgeHTML renders it differently than the above. -->
+  <div class="zero-width">
+    <div class="floating-flexbox" data-expected-width="200">
+      <div style="flex: 1 1 200px; width:50px; min-width: 0px;">
+        <div></div>
+      </div>
+      <div style="flex: 1 2 400px; width:50px; min-width: 0px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="zero-width">
+    <!-- first item contributes 200px. second item contributes 100px -->
+    <div class="floating-flexbox" data-expected-width="300">
+      <!-- min contribution: 100 -->
+      <!-- desired fraction: -inf -->
+      <!-- chosen fraction <= 0 and item can't shrink, so contribute flex basis -->
+      <div style="flex: 1 0 200px; width:50px;">
+        <div></div>
+      </div>
+      <!-- min contribution: 100 -->
+      <!-- desired fraction: -0.75 -->
+      <!-- chosen fraction <= 0 and item CAN shrink, so contribute min contribution -->
+      <div style="flex: 1 1 400px; width:50px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="zero-width">
+    <div class="floating-flexbox" data-expected-width="200">
+      <!-- min contribution: 200 -->
+      <!-- min contribution - flex basis: 150 -->
+      <!-- desired fraction: 0 (because flex grow factor is 0) -->
+      <!-- chosen fraction <= 0 so contribute flex basis 50px -->
+      <!-- except flex basis is outside of used min/max, so contribute clamped flex basis = 100px -->
+      <div style="flex: 0 0 50px; width: 200px;">
+        <div></div>
+      </div>
+      <!-- identical to above -->
+      <div style="flex: 0 0 50px; width: 200px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="zero-width">
+    <!-- 200 + 400 = 600 -->
+    <div class="floating-flexbox" data-expected-width="600">
+      <!-- min contribution: 200 -->
+      <!-- desired fraction: 150px -->
+      <!-- 50 + 1*150 = 200 -->
+      <div style="flex: 1 0 50px; width: 200px;">
+        <div></div>
+      </div>
+      <!-- min contribution: 200 -->
+      <!-- desired fraction: 100px -->
+      <!-- 100 + 2*150 = 400 -->
+      <div style="flex: 2 0 100px; width: 200px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="zero-width">
+    <!-- chosen fraction: 50px -->
+    <div class="floating-flexbox" data-expected-width="400">
+      <!-- min contribution: 100 -->
+      <!-- desired fraction: -0.5 -->
+      <!-- final contribution = flex base size + product = 200px + 50px*0 = 200px -->
+      <div style="flex: 0 1 200px; width: 50px;">
+        <div></div>
+      </div>
+      <!-- min contribution: 200 -->
+      <!-- desired fraction: (200px - 100px) / 2 = 50px -->
+      <!-- final contribution = flex base size + product = 100px + 50px*2 = 200px -->
+      <div style="flex: 2 0 100px; width: 200px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+<div class="zero-width">
+  <!-- chosen fraction: 0 -->
+  <div class="floating-flexbox" data-expected-width="600">
+    <!-- min contribution: 250 -->
+    <!-- wants to grow, but can't -->
+    <!-- desired fraction: 0 -->
+    <!-- final contribution: 100 -->
+    <div style="flex: 0 1 100px; width: 250px;"></div>
+    <!-- min contribution: 100 -->
+    <!-- wants to shrink, but can't -->
+    <!-- desired fraction: -inf -->
+    <!-- final contribution: 200 -->
+    <div style="flex: 1 0 200px; width: 100px;"></div>
+    <!-- min contribution:  -->
+    <!-- doesn't have to change --->
+    <!-- desired fraction: 0 -->
+    <!-- final contribution: 300 -->
+    <div style="flex: 1 1 300px; width: 300px;"></div>
+  </div>
+</div>
+
+<div class="zero-width">
+  <!-- chosen fraction: 0 -->
+  <div class="floating-flexbox" data-expected-width="700">
+    <!-- min contribution: 100 -->
+    <!-- wants to shrink, but can't -->
+    <!-- desired fraction: -inf -->
+    <!-- final contribution: 200 -->
+    <!-- In legacy and V2, this item gets 0 width. -->
+    <div style="flex: 0 10 300px; width: 200px;"></div>
+    <!-- min contribution:  -->
+    <!-- doesn't have to change --->
+    <!-- desired fraction: 0 -->
+    <!-- final contribution: 300 -->
+    <!-- In legacy and V2, this item gets all the width. -->
+    <div style="flex: 0 1 1000px; width: 500px;">
+    </div>
+  </div>
+</div>
+
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-008.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-008.html
new file mode 100644
index 00000000000..e97ddcd21bc
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-008.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<meta name="assert"
+  content="min-content width is calculated correctly in a variety of scenarios with two flex items. These cases were used as examples when deriving the intrinsic size algorithm. " />
+
+<style>
+  .min-width-flexbox {
+    display: flex;
+    outline: 5px solid blue;
+    height: 100px;
+    width: min-content;
+    margin-bottom: 20px;
+  }
+
+  .min-width-flexbox>div:nth-child(1) {
+    background: yellow;
+  }
+
+  .min-width-flexbox>div:nth-child(2) {
+    background: orange;
+  }
+
+  .min-width-flexbox>div>div {
+    width: 100px;
+  }
+
+</style>
+
+<body onload="checkLayout('.min-width-flexbox')">
+  <div id=log></div>
+</body>
+
+<script>
+  // These are from the table in https://github.com/w3c/csswg-drafts/issues/7189#issuecomment-1172771501
+  var test_cases = [
+    [0, 0, 200, 100, 300],
+    [0, .1, 200, 101, 310],
+    [.1, .1, 203, 103, 330],
+    [.4, .4, 248, 148, 420],
+    [.5, .5, 275, 175, 450],
+    [.75, .75, 368.75, 268.75, 637.5],
+    [1, 1, 500, 400, 900],
+    [0, 2, 200, 200, 400],
+    [.1, 2, 205, 200, 405],
+    [.2, 2, 212, 220, 432],
+    [2, 2, 500, 400, 900],
+  ];
+  test_cases.forEach(test_case => {
+    var flexbox = document.createElement('div');
+    flexbox.className = "min-width-flexbox";
+    flexbox.setAttribute("data-expected-width", test_case[4]);
+
+    var child1 = document.createElement('div');
+    child1.style.flex = "0 1 200px";
+    child1.style.width = "500px";
+    child1.style.flexGrow = test_case[0];
+    child1.setAttribute("data-expected-width", test_case[2]);
+    child1.appendChild(document.createElement('div'));
+
+    var child2 = document.createElement('div');
+    child2.style.flex = "0 0 100px";
+    child2.style.width = "200px";
+    child2.style.flexGrow = test_case[1];
+    child2.setAttribute("data-expected-width", test_case[3]);
+    child2.appendChild(document.createElement('div'));
+
+    flexbox.appendChild(child1);
+    flexbox.appendChild(child2);
+    document.body.appendChild(flexbox);
+  });
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-compat-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-compat-001.html
new file mode 100644
index 00000000000..245292d094b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-compat-001.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="help" href="https://crbug.com/1445937">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<meta name="assert"
+  content="Changing flex intrinsic sizing algorithm doesn't break any of these cases." />
+
+<style>
+  section.bugreport {
+    outline: 1px solid grey;
+    margin-bottom: 25px;
+    padding: 3px;
+  }
+
+  #wrapping-broke .flex {
+    display: flex;
+    width: min-content;
+    outline: 2px solid;
+    margin-bottom: 10px;
+  }
+
+  #wrapping-broke span.orange100 {
+    float: left;
+    height: 25px;
+    width: 100px;
+    background: orange;
+  }
+
+  #bug1454306 .fourUpList {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 1fr;
+    width: 800px;
+    background: yellow;
+  }
+
+  #bug1454306 .thumbnail-list--item {
+    display: flex;
+    width: 100%;
+    outline: 1px solid;
+  }
+
+  #bug1454306 .thumbnail-list--item-photo {
+    height: 50px;
+    width: 50px;
+  }
+
+  #bug1454306 .thumbnail-list--item-header {
+    flex: 1 0 calc(70% - 10.5px)
+  }
+</style>
+
+<section id="wrapping-broke" class="bugreport">
+  <p>https://crbug.com/1445937 We need to see a 100x100 orange square, not a
+    400x25 orange rectangle.</p>
+  <div class="flex" data-expected-width="100">
+    <!-- one item with very negative desired flex fraction -->
+    <div>
+      <span class="orange100"></span>
+      <span class="orange100"></span>
+      <span class="orange100"></span>
+      <span class="orange100"></span>
+    </div>
+    <!-- second item with desired flex fraction 0 -->
+    <div></div>
+  </div>
+</section>
+
+<section id="bug1454306" class="bugreport">
+  <p>https://crbug.com/1454306 The boxes each must be 1/4 the size of the yellow
+    containing block. No overflow.</p>
+
+  <!-- This compat case needs the item in the example below to contribute its
+      min-content to container's min-content. In one of our earlier
+      implementations, the item contributed its flex-basis (aka max-content).
+
+    <item style="flex: 1 0 calc(70% - 10.5px)">
+      max-content larger than flex basis
+    </item>
+  -->
+
+  <div class=fourUpList>
+
+    <div class=thumbnail-list--item data-expected-width="200">
+      <div class=thumbnail-list--item-header>Some News Headline</div>
+      <div class=thumbnail-list--item-photo></div>
+    </div>
+
+    <div class=thumbnail-list--item data-expected-width="200">
+      <div class=thumbnail-list--item-header>Some Other News Headline 2</div>
+      <div class=thumbnail-list--item-photo></div>
+    </div>
+
+    <div class=thumbnail-list--item data-expected-width="200">
+      <div class=thumbnail-list--item-header>Even another Headline 3</div>
+      <div class=thumbnail-list--item-photo></div>
+    </div>
+
+    <div class=thumbnail-list--item data-expected-width="200">
+      <div class=thumbnail-list--item-header>
+        Peets Coffee announces plans to move Oakland
+      </div>
+      <div class=thumbnail-list--item-photo></div>
+    </div>
+
+  </div>
+</section>
+
+<section id="gmail-tables" class="bugreport">
+  <p>https://bugs.chromium.org/p/chromium/issues/detail?id=1457103 We need a
+    100x100 green square here.</p>
+  <!-- This case requires that the %-width fixed table has a large flex basis, which means the table's intrinsic max width has to be large.-->
+  <div style="width: 100px;">
+    <div style="display: table;">
+      <div style="display: table-cell">
+        <div class=flex style="display: flex; height: 100px; background: green;"
+          data-expected-width="100">
+          <table style="width: 100%; table-layout: fixed;"></table>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  checkLayout('#wrapping-broke .flex');
+  checkLayout('#bug1454306');
+  checkLayout('#gmail-tables .flex');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.html
new file mode 100644
index 00000000000..1392587944a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.html
@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="assert"
+  content="Requested use cases from our issue tracker that were duplicated or included in the bug report for the new algorithm. These are intentionally not very reduced from their original form with liberal pass conditions." />
+
+<style>
+  section.bugreport {
+    outline: 1px solid grey;
+    margin-bottom: 25px;
+    padding: 3px;
+  }
+
+  #bug423112 .container {
+    border: 1px solid lightgrey;
+    margin: 20px;
+    padding: 8px;
+    display: flex;
+    flex-flow: column;
+  }
+
+  #bug423112 .h-box {
+    display: flex;
+    flex-flow: row;
+    flex: none;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+
+  #bug423112 .auto {
+    flex: 0 0 auto;
+  }
+
+  #bug423112 .none {
+    flex: none;
+  }
+
+  #bug423112 .gap1-fails {
+    flex: 0 0 5px;
+  }
+
+  #bug423112 .gap2-fails {
+    flex: 0 0 30px;
+  }
+
+  #bug423112 .word {
+    display: inline-block;
+    height: 10px;
+    width: 35px;
+    background: orange;
+  }
+
+  #bug464210 .FlexOuterContainer {
+    border: 3px solid black;
+    display: flex;
+    margin: 1em;
+  }
+
+  #bug464210 .FlexInnerContainer {
+    border: 3px solid red;
+    display: flex;
+    flex: 0 0 auto;
+  }
+
+  #bug464210 .FlexItem {
+    background: rgba(0, 0, 0, .2);
+    flex: 0 0 100px;
+  }
+
+  #bug533627c3 .outer {
+    display: flex;
+    padding: 10px;
+  }
+
+  #bug533627c3 .middle,
+  #bug533627c3 .middle2 {
+    display: flex;
+    flex-shrink: 0;
+    background: red;
+    padding: 10px;
+  }
+
+  #bug533627c3 .inner {
+    flex-basis: 258px;
+    flex-shrink: 0;
+    display: flex;
+    flex-grow: 0;
+    background: green;
+  }
+
+  #bug533627c3 .inner2 {
+    width: 258px;
+    flex-shrink: 0;
+    display: flex;
+    flex-grow: 0;
+    background: green;
+  }
+
+  #bug441768 div {
+    display: flex;
+  }
+
+  #bug1144312 .grid-y {
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+
+  #bug1144312 .grid-x {
+    flex-direction: row
+  }
+
+  #bug1144312 .grid-x>* {
+    flex-basis: 0
+  }
+
+  #bug1144312 [class*=grid] {
+    display: flex;
+    gap: 1px
+  }
+
+  #bug1144312 .grid-y {
+    background: lightblue
+  }
+
+  #bug1144312 .grid-y:not(:first-child) {
+    margin-top: 1.5rem
+  }
+
+  #bug1144312 [class*=grid]>* {
+    flex-grow: 1;
+    border: 3px solid blue;
+    padding: 1px;
+  }
+
+  #bug1144312 .nowrap div {
+    border-color: purple
+  }
+
+  #bug1144312 .nowrap {
+    background: Thistle;
+    flex-wrap: nowrap;
+  }
+
+  #bug1144312 div {
+    font: 12px/1 Ahem;
+  }
+
+</style>
+
+<section id="bug423112" class="bugreport">
+  <p>https://bugs.chromium.org/p/chromium/issues/detail?id=423112</p>
+  <div class="container">
+    <div class="h-box">
+      <div class="h-box">
+        <input type="checkbox" class="none">
+        <div class="gap2-fails"></div>
+        <span class="none" id="left-item">
+          first checkbox example
+        </span>
+      </div>
+      <div class="h-box">
+        <input type="checkbox" class="none" id="right-item">
+        <div class="gap2-fails"></div>
+        <span class="auto">
+          second checkbox example
+        </span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="bug464210" class="bugreport">
+  <p>https://bugs.chromium.org/p/chromium/issues/detail?id=464210</p>
+  <div class="FlexOuterContainer">
+    <div class="FlexInnerContainer">
+      <div class="FlexItem">MMMMM</div>
+      <div id="right-item" class="FlexItem">MMMMM</div>
+    </div>
+  </div>
+</section>
+
+<section id="bug533627c3" class="bugreport">
+  <p>https://bugs.chromium.org/p/chromium/issues/detail?id=533627#c3</p>
+  <div class="outer">
+    <div class="middle">
+      <div class="inner">
+        hello
+      </div>
+    </div>
+  </div>
+  <div class="outer">
+    <div class="middle2">
+      <div class="inner2">
+        hello
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="bug441768" class="bugreport">
+  <p>https://bugs.chromium.org/p/chromium/issues/detail?id=441768 author wants
+    below blue block to have 0 width</p>
+  <div>
+    <!-- shipping: .middle has flex-basis=200px (from its max-content), and
+      used min-width=200px (from min-content) -->
+    <!-- author wants .middle flex-basis = 0, so author wants .middle
+      max-content = 0 -->
+    <!-- that means author also needs min-content = 0 -->
+    <!-- so width:200 item needs to contribute flex-basis to both min and max
+    -->
+    <div style="height: 100px; background: blue; align-self: flex-start;"
+      class="middle">
+      <div style="width: 200px; flex: 0;"></div>
+    </div>
+  </div>
+</section>
+
+<section id="bug1144312" class="bugreport">
+  <p>https://bugs.chromium.org/p/chromium/issues/detail?id=1144312</p>
+  <!-- This case needs max-content to use flex fractions. -->
+  <div class="grid-y" id="top">
+    <!-- broke: grid-x intrinsic sizes are ("95", "154") -->
+    <!-- works: grid-x intrinsic sizes are ("165", "283") -->
+    <!-- broke: grid-x main inner size = 146-->
+    <!-- works: grid-x main inner size = 275-->
+    <!-- to determine its vertical flex basis, grid-x lays out with width set to max content*. Then, both of its items have flex basis 0 and same grow factor, so they get flexed to each have approximately half of first item's max-width. This makes "phantom whitespace" wrap, which makes it too tall.
+    * this doesn't happen in the nowrap case, which stretches grid-x's width. -->
+    <div class="grid-x">
+      <!-- while laying out grid-x to get its flex-basis:
+        when laying out the two items for cross sizes:
+        broke: 1st gets 78px fixed inline size, returns height 48px
+        works: 1st gets 137px fixed inline size, returns height 28px
+        broke: 2nd gets 67px fixed inline size, returns height 8px
+        works: 2nd gets 137px fixed inline size, returns height 8px
+      -->
+      <div>phantom whitespace</div>
+      <div></div>
+    </div>
+  </div>
+
+  <div class="grid-y" id="middle">
+    <div>
+      <div class="grid-x">
+        <div>also phantom whitespace</div>
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="grid-y nowrap" id="bottom">
+    <div class="grid-x">
+      <div>no more phantom whitespace</div>
+      <div></div>
+    </div>
+  </div>
+</section>
+
+<section id="bug1154243" class="bugreport">
+  <p>https://bugs.chromium.org/p/chromium/issues/detail?id=1154243</p>
+  <div
+    style="display: flex; width: min-content; border: 2px solid blue; font: 12px/1 Ahem;"
+    id="container">
+    <!-- shipping: min-content width of container is sum of min-contents (2x
+         the width of the word "content")
+    author needs: each `flex: 0 0 auto` item contributes flex-basis to
+    container min-content because they can't shrink from their flex bases
+    -->
+    <div style="flex-shrink: 0">Test content</div>
+    <div style="background: yellow; flex-shrink: 0" id="right">Test content
+    </div>
+  </div>
+</section>
+
+<script>
+  test(_ => {
+    let left = bug423112.querySelector("#left-item");
+    let right = bug423112.querySelector("#right-item");
+    assert_less_than_equal(left.getBoundingClientRect().right, right.getBoundingClientRect().left);
+  }, "left < right");
+
+  test(_ => {
+    const container = bug464210.querySelector(".FlexInnerContainer");
+    const right = bug464210.querySelector("#right-item");
+    assert_less_than_equal(right.getBoundingClientRect().right, container.getBoundingClientRect().right);
+  }, "no overflow");
+
+  test(_ => {
+    const middle = bug533627c3.querySelector(".middle");
+    const middle2 = bug533627c3.querySelector(".middle2");
+    assert_equals(middle.offsetWidth, middle2.offsetWidth);
+  }, "same widths");
+
+  test(_ => {
+    const middle = bug441768.querySelector(".middle");
+    assert_equals(middle.offsetWidth, 0);
+  }, "zero width");
+
+  test(_ => {
+    const top = bug1144312.querySelector("#top");
+    const middle = bug1144312.querySelector("#middle");
+    const bottom = bug1144312.querySelector("#bottom");
+    assert_equals(top.offsetHeight, bottom.offsetHeight);
+    assert_equals(middle.offsetHeight, bottom.offsetHeight);
+  }, "same heights");
+
+  test(_ => {
+    const container = bug1154243.querySelector("#container");
+    const right = bug1154243.querySelector("#right");
+    assert_less_than_equal(right.getBoundingClientRect().right, container.getBoundingClientRect().right)
+  }, "no overflow 2");
+
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-wrap-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-wrap-001.html
new file mode 100644
index 00000000000..2c90df96bda
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-wrap-001.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<meta name="assert"
+  content="min-content width is calculated correctly for row-wrap flex containers in a variety of scenarios with two flex items" />
+
+<style>
+  .zero-width {
+    width: 0px;
+    height: 100px;
+    margin-bottom: 20px;
+  }
+
+  .floating-flexbox {
+    display: flex;
+    flex-wrap: wrap;
+    outline: 5px solid blue;
+    height: 100px;
+    float: left;
+  }
+
+  .floating-flexbox>div:nth-child(1) {
+    background: yellow;
+  }
+
+  .floating-flexbox>div:nth-child(2) {
+    background: orange;
+  }
+
+  .floating-flexbox>div>div {
+    width: 100px;
+  }
+
+</style>
+
+<body onload="checkLayout('.floating-flexbox')">
+  <div class="zero-width">
+    <div class="floating-flexbox" data-expected-width="100">
+      <!-- contribution: 100 -->
+      <div style="flex: 1 1 200px; width:50px;">
+        <div></div>
+      </div>
+      <!-- contribution: 50 -->
+      <div style="flex: 1 1 400px; width:50px;">
+      </div>
+    </div>
+  </div>
+
+  <div class="zero-width">
+    <div class="floating-flexbox" data-expected-width="100">
+      <!-- contribution: 100px
+      starts as max(specified=200, min-content=100) = 200
+      clamped down to 50 because doesn't grow
+      clamped up to 100 because auto min size is 100
+      -->
+      <div style="flex: 0 0 50px; width: 200px;">
+        <div></div>
+      </div>
+      <!-- contribution: 50px
+      starts as max(specified=50, min-content=100) = 100
+      clamped down to 50 because doesn't grow
+      auto min size is 50, so has no effect
+      -->
+      <div style="flex: 0 0 50px; width: 50px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="zero-width">
+    <div class="floating-flexbox" data-expected-width="200">
+      <!-- contribution: 200px
+      starts as max(specified=200, min-content=100) = 200
+      auto min size is 100, so has no effect
+      -->
+      <div style="flex: 1 0 50px; width: 200px;">
+        <div></div>
+      </div>
+      <!-- contribution: 150px
+      starts as max(specified=50, min-content=100) = 100
+      clamped up to 150 because doesn't shrink
+      auto min size is 50, so has no effect
+      -->
+      <div style="flex: 2 0 150px; width: 50px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Same as above case except last item has margins. -->
+  <div class="zero-width">
+    <div class="floating-flexbox" data-expected-width="450">
+      <div style="flex: 1 0 50px; width: 200px;">
+        <div></div>
+      </div>
+      <div style="flex: 2 0 150px; width: 50px; margin-left: 300px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Same as above except we now test that gaps are ignored. -->
+  <div class="zero-width">
+    <div class="floating-flexbox" data-expected-width="450"
+      style="row-gap: 24px; column-gap: 17px;">
+      <div style="flex: 1 0 50px; width: 200px;">
+        <div></div>
+      </div>
+      <div style="flex: 2 0 150px; width: 50px; margin-left: 300px;">
+        <div></div>
+      </div>
+    </div>
+  </div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html
new file mode 100644
index 00000000000..4c57f5c24ac
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-width-orthogonal-writing-mode.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: container widths & ortho items</title>
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#block-flow">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="the correct width/height of ortho children is used to size flex containers">
+<style>
+.vertical {
+    writing-mode: vertical-lr;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.inline-flexbox')">
+<div id=log></div>
+
+<div class="inline-flexbox" data-expected-width="20">
+    <div class="vertical" style="width: 20px; height: 50px;"></div>
+</div>
+
+<div class="inline-flexbox" data-expected-width="20">
+    <div class="vertical" style="line-height: 20px;">Some text</div>
+</div>
+
+<div class="inline-flexbox" data-expected-width="20">
+    <span class="vertical" data-expected-width="20" style="line-height: 20px;">Some text</span>
+</div>
+</body>
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content-006.html
new file mode 100644
index 00000000000..7848ff0c403
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content-007.html
new file mode 100644
index 00000000000..b3780b1d58e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content-007.html
@@ -0,0 +1,31 @@
+<!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">
+<link rel="help" href="https://crbug.com/1228023">
+<meta name="assert"
+  content="Wrapped item obeys justify-content:center when the item wraps because the container has max-height.">
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<style>
+  .flexitem {
+    width: 100px;
+  }
+
+</style>
+
+Pass condition: orange square is vertically centered in the black box.<br>
+Chrome 112 and Safari 16.4 fail. Firefox 111 passes.
+<div
+  style="display: flex; flex-flow: column wrap; max-height: 200px; justify-content: center; align-content: start; border: 2px solid; position: relative;">
+  <div class=flexitem style="background: blue; height: 200px;"></div>
+  <div class=flexitem style="background: orange; height: 100px;"
+    data-offset-y=50></div>
+</div>
+
+<script>
+  checkLayout('.flexitem + .flexitem');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content_space-between-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content_space-between-002.html
new file mode 100644
index 00000000000..38036598f16
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/justify-content_space-between-002.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: justify-content: space-between on the last item of a column</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property">
+<link rel="bookmark" href="https://crbug.com/690024">
+<meta name="assert" content="This test checks when processing the last item on a column we should not add justify-content space to the row height.">
+<style>
+.flexbox {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 500px;
+}
+</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 class="flexbox" data-expected-height="500">
+  <div>First item</div>
+  <div>Second item</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/layout-with-inline-svg-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/layout-with-inline-svg-001.html
new file mode 100644
index 00000000000..0ee9a36f49e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/layout-with-inline-svg-001.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: layout of child SVG elements.</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-position/#position-property">
+<link rel="help" href="https://crbug.com/633212"/>
+<meta name="assert" content="This test ensures that a flexbox and its flex items are properly laid out when containing an empty SVG element in an abspos container."/>
+
+<style>
+html, body {
+  margin: 0;
+}
+
+#flexbox {
+    display: flex;
+    flex-direction: column;
+}
+
+#flexitem {
+    outline: 1px solid black;
+    width: 100%;
+    height: 166px;
+    position: relative;
+    background: green;
+}
+
+#abspos {
+    position: absolute;
+}
+
+#container {
+    background: red;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<body>
+
+<div id="container">
+  <div id="flexbox">
+    <div id="flexitem">
+      <div id="abspos">
+        <svg></svg>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+test(function() {
+  assert_equals(document.getElementById('flexbox').offsetWidth,
+    document.getElementById('flexitem').offsetWidth);
+}, "sizes");
+</script>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/max-width-violation.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/max-width-violation.html
new file mode 100644
index 00000000000..9ee5ce53b56
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/max-width-violation.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: max-width of inflexible items</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flexibility">
+<link rel="bookmark" href="https://crbug.com/617956">
+<meta name="assert" content="Inflexible items (flex factor 0 or flex basis violating the min/max size constraint) take max-width into account.">
+<style>
+.columns {
+  display: flex;
+  width: 800px;
+}
+
+.columns > div {
+  background: #aaa;
+}
+
+.column1 {
+  width: 800px;
+  overflow: auto;
+  max-width: 150px;
+}
+
+.column2 {
+  flex: 0.8 0 0;
+}
+
+.red {
+  position: absolute;
+  width: 510px;
+  background: red !important;
+  height: 10px;
+  z-index: -1;
+}
+
+.abspos {
+  position: absolute;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.columns')">
+<div id=log></div>
+
+<p>You should see no red</p>
+<div class="columns">
+  <div class="red"></div>
+  <div class="column1" data-expected-width="150">
+    Column 1
+  </div>
+  <div class="column2" data-expected-width="520">
+    Column 2
+  </div>
+</div>
+
+<p>This second part is just to ensure we don't assert</p>
+<div class="columns">
+  <div class="column1 abspos" data-expected-width="150">
+    Column 1
+  </div>
+  <div class="column2" data-expected-width="640">
+    Column 2
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/multiline-min-max.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/multiline-min-max.html
new file mode 100644
index 00000000000..315aaf8759a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/multiline-min-max.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Flexbox: multiline flexbox and line breaks.</title>
+<link rel="stylesheet" href="support/flexbox.css" >
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item">
+<meta name="assert" content="This test ensures that multiline flexbox uses min/max constraints when finding line breaks."/>
+<style>
+.flexbox {
+  width: 600px;
+  background-color: grey;
+  border: 5px solid black;
+  height: 20px;
+  position: relative;
+}
+.flexbox > div {
+  height: 10px;
+}
+.children-border-box > div {
+  box-sizing: border-box;
+}
+
+.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: lime;
+}
+.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>
+</head>
+<body onload="checkLayout('.flexbox')">
+<div id=log></div>
+
+<div class="flexbox wrap">
+  <div class="flex-one" style="min-width: 400px" data-expected-width="400" data-offset-x="0" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
+</div>
+
+<div class="flexbox wrap">
+  <div class="flex-one" style="min-width: 400px; padding-left: 10px;" data-expected-width="500" data-offset-x="0" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div>
+</div>
+
+<div class="flexbox wrap">
+  <div class="flex-one" style="min-width: 400px; border-left: 10px solid red;" data-expected-width="500" data-offset-x="0" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div>
+</div>
+
+<div class="flexbox wrap">
+  <div class="flex-one" style="min-width: 400px; margin-left: 10px;" data-expected-width="490" data-offset-x="10" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div>
+</div>
+
+<div class="flexbox wrap">
+  <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="300" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
+</div>
+
+<div class="flexbox wrap">
+  <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; padding-left: 10px;" data-expected-width="310" data-offset-x="0" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div>
+</div>
+
+<div class="flexbox wrap">
+  <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border-left: 10px solid red;" data-expected-width="310" data-offset-x="0" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div>
+</div>
+
+<div class="flexbox wrap">
+  <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin-left: 10px;" data-expected-width="300" data-offset-x="10" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div>
+</div>
+
+<div class="flexbox wrap children-border-box">
+  <div class="flex-one" style="min-width: 400px; padding-left: 10px;" data-expected-width="400" data-offset-x="0" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
+</div>
+
+<div class="flexbox wrap children-border-box">
+  <div class="flex-one" style="min-width: 400px; border-left: 10px solid red;" data-expected-width="400" data-offset-x="0" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
+</div>
+
+<div class="flexbox wrap children-border-box">
+  <div class="flex-one" style="min-width: 400px; margin-left: 10px;" data-expected-width="490" data-offset-x="10" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="0" data-offset-y="10"></div>
+  <div class="flex-none" style="width: 100px" data-expected-width="100" data-offset-x="100" data-offset-y="10"></div>
+</div>
+
+<div class="flexbox wrap children-border-box">
+  <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; padding-left: 10px;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="300" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
+</div>
+
+<div class="flexbox wrap children-border-box">
+  <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border-left: 10px solid red;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="300" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="400" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100" data-offset-x="500" data-offset-y="0"></div>
+</div>
+
+<div class="flexbox wrap children-border-box">
+  <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin-left: 10px;" data-expected-width="300" data-offset-x="10" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="310" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145" data-offset-x="455" data-offset-y="0"></div>
+  <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600" data-offset-x="0" data-offset-y="10"></div>
+</div>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/multiline-min-preferred-width.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/multiline-min-preferred-width.html
new file mode 100644
index 00000000000..dd0a62ca26d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/multiline-min-preferred-width.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Flexbox: nested multiline (wrapping) flex boxes.</title>
+<link rel="stylesheet" href="support/flexbox.css" >
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+<meta name="assert" content="This test ensures that nested multiline flex boxes with 'flex-wrap: wrap' and the min preferred width set are laid out properly."/>
+<style>
+.item {
+  padding: 7px;
+  background-color: green;
+  border: 4px solid olive;
+  width: min-content;
+}
+
+.square {
+  background-color: lime;
+  width: 20px;
+  height: 20px;
+}
+</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('.container')">
+<div id=log></div>
+
+<div class="container flexbox wrap" data-expected-height=42>
+  <div class="item flexbox wrap" data-expected-width=42 data-expected-height=42>
+    <div class="square" data-expected-width=20 data-expected-height=20></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow-002.html
new file mode 100644
index 00000000000..25b4fe25e07
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow-002.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1114306">
+<style>
+.container {
+  width: 100px; height: 100px;
+  overflow: scroll;
+  border: solid 3px;
+  display: inline-flex;
+  padding: 10px;
+  gap: 10px;
+  align-items: start;
+  margin: 10px;
+  vertical-align: bottom;
+}
+
+.item {
+  min-width: 110px; min-height: 110px;
+  background: cyan;
+}
+
+.container:hover::before {
+  position: fixed;
+  top: 0; left: 0;
+  font-size: 10px;
+  content: attr(style);
+  background: yellow;
+  direction: ltr;
+  writing-mode: horizontal-tb;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.container')">
+<script>
+const writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];
+const directions = ['ltr', 'rtl'];
+const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+const flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
+
+for (let writingMode of writingModes) {
+  for (let direction of directions) {
+    for (let flexDirection of flexDirections) {
+      for (let flexWrap of flexWraps) {
+        let container = document.createElement('div');
+        container.className = 'container';
+        container.style.writingMode = writingMode;
+        container.style.direction = direction;
+        container.style.flexDirection = flexDirection;
+        container.style.flexWrap = flexWrap;
+
+        for (let i = 0; i < 3; i++) {
+          let item = document.createElement('div');
+          item.className = 'item';
+          item.textContent = (i+1);
+          container.appendChild(item);
+        }
+
+        let bias = writingMode == 'horizontal-tb';
+        if (flexWrap != 'nowrap') {
+          bias = !bias;
+        }
+        if (flexDirection == 'row' || flexDirection == 'row-reverse') {
+          bias = !bias;
+        }
+        container.setAttribute('data-expected-scroll-width', bias ? 130 : 370);
+        container.setAttribute('data-expected-scroll-height', bias ? 370 : 130);
+
+        document.body.appendChild(container);
+      }
+    }
+  }
+}
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow-003.html
new file mode 100644
index 00000000000..46ab1726451
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow-003.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1114306">
+<meta name="assert" content="the correct scrollbars appear for sideways writing-mode flexboxes">
+
+<style>
+.container {
+  width: 100px; height: 100px;
+  overflow: scroll;
+  border: solid 3px;
+  display: inline-flex;
+  padding: 10px;
+  gap: 10px;
+  align-items: start;
+  margin: 10px;
+  vertical-align: bottom;
+}
+
+.item {
+  min-width: 110px; min-height: 110px;
+  background: cyan;
+}
+
+.container:hover::before {
+  position: fixed;
+  top: 0; left: 0;
+  font-size: 10px;
+  content: attr(style);
+  background: yellow;
+  direction: ltr;
+  writing-mode: horizontal-tb;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.container')">
+<script>
+const writingModes = ['sideways-rl', 'sideways-lr'];
+const directions = ['ltr', 'rtl'];
+const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+const flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
+
+for (let writingMode of writingModes) {
+  for (let direction of directions) {
+    for (let flexDirection of flexDirections) {
+      for (let flexWrap of flexWraps) {
+        let container = document.createElement('div');
+        container.className = 'container';
+        container.style.writingMode = writingMode;
+        container.style.direction = direction;
+        container.style.flexDirection = flexDirection;
+        container.style.flexWrap = flexWrap;
+
+        for (let i = 0; i < 3; i++) {
+          let item = document.createElement('div');
+          item.className = 'item';
+          item.textContent = (i+1);
+          container.appendChild(item);
+        }
+
+        let bias = flexWrap != 'nowrap';
+        if (flexDirection == 'row' || flexDirection == 'row-reverse') {
+          bias = !bias;
+        }
+        container.setAttribute('data-expected-scroll-width', bias ? 130 : 370);
+        container.setAttribute('data-expected-scroll-height', bias ? 370 : 130);
+
+        document.body.appendChild(container);
+      }
+    }
+  }
+}
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow.html
new file mode 100644
index 00000000000..be470021fac
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/negative-overflow.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Flexbox: align-items: center/flex-end and bottom padding.</title>
+<link rel="stylesheet" href="support/flexbox.css" >
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
+<meta name="assert" content="This test ensures that flexbox containers with 'align-items: center|flex-end' and 'overflow: auto/scroll' have no extra bottom padding."/>
+<style>
+.flexbox {
+    overflow: auto;
+    height: 50px;
+    width: 50px;
+    background-color: red;
+    position: relative;
+}
+
+.vertical-padding {
+    padding-top: 5px;
+    padding-bottom: 10px;
+    background-color: lime;
+}
+
+.vertical-border {
+    border-top: 2px solid black;
+    border-bottom: 8px solid lightblue;
+}
+
+.flexbox > div {
+    width: 100%;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<script>
+window.onload = function() {
+    checkLayout('.flexbox');
+
+    // Make failures more obvious by showing the red background that should have been clipped.
+    Array.prototype.forEach.call(document.querySelectorAll(".flexbox"), function(element) {
+        element.scrollTop = 1000;
+    });
+};
+</script>
+</head>
+<body>
+<div id=log></div>
+
+<div class="flexbox align-items-flex-end" data-expected-scroll-height="50">
+    <div></div>
+</div>
+
+<div class="flexbox align-items-flex-end" data-expected-scroll-height="150">
+    <div></div>
+    <div style="position: absolute; left: 0; top: 50px;"></div>
+</div>
+
+<div class="flexbox align-items-center" data-expected-scroll-height="75">
+    <div></div>
+</div>
+
+<div class="flexbox" data-expected-scroll-height="100">
+    <div></div>
+</div>
+
+<div class="flexbox wrap-reverse" data-expected-scroll-height="200">
+    <div></div>
+    <div></div>
+</div>
+
+<div class="flexbox align-items-flex-end vertical-padding" data-expected-scroll-height="65">
+    <div></div>
+</div>
+
+<div class="flexbox align-items-flex-end vertical-padding vertical-border" data-expected-scroll-height="65">
+    <div></div>
+</div>
+
+<div class="flexbox align-items-center vertical-padding" data-expected-scroll-height="90">
+    <div></div>
+</div>
+
+<div class="flexbox vertical-padding" data-expected-scroll-height="115">
+    <div></div>
+</div>
+
+<div class="flexbox vertical-padding vertical-border" data-expected-scroll-height="115">
+    <div></div>
+</div>
+
+<div class="flexbox wrap-reverse vertical-padding" data-expected-scroll-height="215">
+    <div></div>
+    <div></div>
+</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/order-001.htm b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/order-001.htm
new file mode 100644
index 00000000000..98b937c02d1
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/order-001.htm
@@ -0,0 +1,38 @@
+<!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 Test: The 'order' property on flex items set to a value of '-1'</title>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
+        <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" />
+        <meta name="assert" content="This test checks that a flex container will lay out its content in the order specified by the ordinal groups." />
+        <style type="text/css">
+            #flexbox
+            {
+                background-color: red;
+                display: flex;
+                width: 300px;
+            }
+            div div
+            {
+                height: 100px;
+                width: 150px;
+            }
+            #flexItem1
+            {
+                background-color: orange;
+            }
+            #flexItem2
+            {
+                background-color: blue;
+                order: -1;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p>
+        <div id="flexbox">
+            <div id="flexItem1"></div>
+            <div id="flexItem2"></div>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/order_value.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/order_value.html
new file mode 100644
index 00000000000..3e1d50a6d87
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/order_value.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Flexible Box Test: order_check</title>
+    <link rel="author" title="Intel" href="http://www.intel.com" />
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" />
+    <link rel="stylesheet" href="support/test-style.css">
+    <meta name="assert" content="Check if the web engine can indentify order property." />
+    <style>
+      #test{
+	height: 200px;
+ 	width: 200px;
+        display: flex;
+      }
+      div#test02{
+	order: -1;
+      }
+    </style>
+    <script src="../../resources/testharness.js"></script>
+    <script src="../../resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <div id=log></div>
+    <div id=test><div id=test01>1</div><div id=test02>2</div><div id=test03>3</div></div>
+    <script type="text/javascript">
+        var t = async_test();
+        t.step(function () {
+            assert_equals(document.getElementById("test01").offsetTop, document.getElementById("test02").offsetTop, "Rectangle 1 and 2 have the same offsetTop value");
+            assert_equals((document.getElementById("test02").offsetLeft >= document.getElementById("test01").offsetLeft), false, "Rectangle 2 have a smaller offsetLeft value than 1.");
+        });
+        t.done();
+    </script>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html
new file mode 100644
index 00000000000..61613ded7e9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/orthogonal-writing-modes-and-intrinsic-sizing.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: main size on orthogonal flex item.</title>
+<link rel="stylesheet" href="support/flexbox.css" >
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size">
+<link rel="issue" href="https://codereview.chromium.org/1052363002">
+<meta name="assert" content="This test ensure the correct main sizes are used when flex item is orthogonal to the flex container."/>
+<style>
+.flexbox {
+  background-color: gray;
+}
+
+.vertical {
+  writing-mode: vertical-lr;
+  width: min-content;
+  background-color: blue;
+}
+</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" data-expected-height="20">
+  <div class="vertical" data-expected-width="50" data-expected-height="20">
+    <div style="width: 50px; height: 20px; background-color: blue;" data-expected-width="50" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div class="flexbox column" data-expected-height="20">
+  <div class="vertical" data-expected-width="50" data-expected-height="20">
+    <div style="width: 50px; height: 20px; background-color: blue;" data-expected-width="50" data-expected-height="20"></div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-002.html
new file mode 100644
index 00000000000..0ce3e398145
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-002.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: correct width for non-overflowing content with flex-direction: column</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">
+<link rel="help" href="https://crbug.com/580586">
+<meta name="assert" content="This test checks that no unnecessary extra horizontal space is considered for vertical scrollbars for non-overflowing content using flex-direction: column." />
+
+<style>
+body {
+  height: 200vh;
+}
+
+section {
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+}
+
+.side-menu {
+    border: 1px solid black;
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+}
+
+.box-body {
+    height: 1000px;
+    flex: 1 1 0%;
+    display: flex;
+    min-height: 0px;
+}
+
+.list {
+    list-style: none;
+    padding: 0;
+    overflow: auto;
+    flex: 1 1 0;
+}
+
+li {
+    height: 20px;
+    background-color: red;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('section')">
+
+<div id=log></div>
+
+<section>
+  <div class="box-body">
+    <div class="side-menu">
+      <ul class="list">
+        <li data-expected-width="200">
+        </li>
+      </ul>
+    </div>
+    <div style="height: 1000px;"></div>
+  </div>
+</section>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-003.html
new file mode 100644
index 00000000000..e658acc62f5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-003.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: margin: auto and overflow: auto with nested flexboxes.</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#auto-margins">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">
+<link rel="help" href="https://drafts.csswg.org/css-box-3/#margins">
+<link rel="help" href="https://crbug.com/605682">
+<meta name="assert" content="This test checks that 'margin: auto' set on the outer box gets properly handled when the inner box uses 'overflow: auto', in a layout with two nested flexboxes." />
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+.flexbox {
+  display: flex;
+  background: papayawhip;
+  width: 800px;
+}
+
+.flexbox > div {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+  background: olive;
+}
+
+.flexbox > div > div {
+  overflow-y: auto;
+  height: 50px;
+  visibility: hidden;
+}
+
+.elm {
+  height: 10px;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body>
+
+<div id=log></div>
+<p>Below there should be a olive square <em>centered</em> inside a papayawhip box.</p>
+<div class="flexbox">
+    <div data-offset-x="250">
+        <div>
+            <div id="elm"></div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.body.offsetTop;
+document.getElementById("elm").style.height = "800px";
+checkLayout('.flexbox');
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-004.html
new file mode 100644
index 00000000000..9e901e67977
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-004.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: no unnecessary scrollbars with overflow: auto.</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">
+<link rel="help" href="https://crbug.com/646288"/>
+<meta name="assert" content="This test ensures that no vertical scrollbar is rendered with 'overflow: auto' and 'flex-direction: column' when only horizontal scrolling is needed."/>
+
+<style>
+* {
+  min-width: 0;
+  min-height: 0;
+}
+
+body {
+  width: 800px;
+}
+
+#list-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+#player-list-wrapper {
+  flex-grow: 1;
+  overflow: auto;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('#list-wrapper')">
+
+<p>No vertical scrollbar should be rendered for this content.</p>
+
+<div id="list-wrapper" data-expected-width="800">
+  <div id="player-list-wrapper" data-expected-width="800">
+    <div data-expected-width="800">http://www.ispeech.org/p/generic/getaudio?text=http%3A%2F%2Fwww.ispeech.org%2Ftext.to.speech%3Flink%3Dhttp%253A%252F%252Fwww.ispeech.org%252Ftext.to.speech%253Fvoice%253Dusenglishfemale%2526action%253Dconvert%2526speed%253D0%2526text%253DType%252520some%252520text%252520and%252520click%252520play%2C&amp;voice=usenglishfemale&amp;speed=0&amp;action=convert</div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-006.html
new file mode 100644
index 00000000000..663bfaf9c1a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-006.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: Height with overflow: auto.</title>
+<link href="support/flexbox.css" rel="stylesheet">
+<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-overflow-4/#classic-scrollbars">
+<meta name="assert" content="This test ensures that flexbox with 'flex-direction: row|row-reverse' and a flex item child with 'overflow: auto' has the proper height."/>
+<style>
+.flexbox {
+    border: 5px solid green;
+    position: relative;
+    width: 50px;
+}
+
+.inline-flexbox {
+    border: 5px solid green;
+    position: relative;
+    height: 50px;
+}
+
+.overflow {
+    border: 1px solid red;
+    overflow: auto;
+    min-width: 0;
+    min-height: 0;
+}
+
+.vertical {
+    writing-mode: vertical-rl;
+}
+</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, .inline-flexbox')">
+<div id=log></div>
+<div class="flexbox to-be-checked" check-height check-accounts-scrollbar>
+  <div class="overflow"><div style="width: 100px; height: 20px"></div></div>
+</div>
+
+<div class="flexbox row-reverse to-be-checked" check-height check-accounts-scrollbar>
+  <div class="overflow"><div style="width: 100px; height: 20px"></div></div>
+</div>
+
+<div class="flexbox to-be-checked" check-height check-accounts-scrollbar>
+  <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div>
+</div>
+
+<div class="flexbox row-reverse to-be-checked" check-height check-accounts-scrollbar>
+  <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div>
+</div>
+
+<div class="flexbox vertical to-be-checked" check-height>
+  <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div>
+</div>
+
+<div class="flexbox row-reverse vertical to-be-checked" check-height>
+  <div class="overflow align-self-baseline"><div style="width: 100px; height: 20px"></div></div>
+</div>
+
+<div class="inline-flexbox column vertical to-be-checked" check-width check-accounts-scrollbar>
+  <div class="overflow"><div style="width: 20px; height: 100px"></div></div>
+</div>
+
+<div class="inline-flexbox column-reverse vertical to-be-checked" check-width check-accounts-scrollbar>
+  <div class="overflow"><div style="width: 20px; height: 100px"></div></div>
+</div>
+
+<div class="inline-flexbox column vertical to-be-checked" check-width>
+  <div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div>
+</div>
+
+<div class="inline-flexbox column-reverse vertical to-be-checked" check-width>
+  <div class="overflow align-self-baseline"><div style="width: 20px; height: 100px"></div></div>
+</div>
+
+<!-- This div is only for measuring scrollbar size -->
+<div id="measure" style="height: 100px; width: 100px; display: inline-block; overflow: auto;">
+  <div style="min-height: 300px;"></div>
+</div>
+
+<script>
+  var measure = document.getElementById('measure');
+  var scrollbarSize = measure.offsetWidth - measure.clientWidth;
+
+  var nodes = document.getElementsByClassName("to-be-checked");
+  for (var i = 0; i < nodes.length; i++) {
+    var node = nodes[i];
+
+    // Here, the things contributing height are:
+    //
+    // (a) each innermost div contributes an explicit height: 20px value.
+    // (b) the .overflow div contributes 2px of border (1px top + bottom),
+    //     plus the height of its scrollbar from overflow:auto.
+    // (c) the .flexbox div contributes 10px of border (5px top + bottom).
+    //
+    // So, the total height is 20px + 2px + 10px + scrollbarHeight,
+    // which simplifies to 32px + scrollbarHeight.
+    //
+    // Analogously, the same logic applies for nodes where width is tested.
+    var size =  32;
+    if (node.hasAttribute("check-height")) {
+      var height = node.hasAttribute("check-accounts-scrollbar") ? scrollbarSize : 0;
+      node.setAttribute("data-expected-height", size + height);
+    } else {
+      var width = node.hasAttribute("check-accounts-scrollbar") ? scrollbarSize : 0;
+      node.setAttribute("data-expected-width", size + width);
+    }
+  }
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-008.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-008.html
new file mode 100644
index 00000000000..13e368f39e8
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/overflow-auto-008.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: adding scrollbars with overflow: auto and flex-direction: column.</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://crbug.com/512229">
+<meta name="assert" content="This test checks that, when a block inside a flexbox with flex-direction: column adds horizontal scrollbars due to overflow, the parent flexbox is still able to render its contents without overflowing."/>
+
+<style>
+.vflex {
+  display: flex;
+  flex-direction: column;
+  max-width: 200px;
+  margin: 10px 0 10px 0;
+}
+
+.hbox {
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.rect {
+  min-height: 100px;
+  min-width: 100px;
+  background-color: green;
+  display: inline-block;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<body>
+
+<div class="vflex">
+  <div class="hbox">
+    <div class="rect"></div>
+    <div class="rect"></div>
+  </div>
+</div>
+
+<script>
+var hbox = document.querySelector('.hbox');
+test(function() {
+  assert_equals(hbox.parentNode.clientHeight, hbox.parentNode.scrollHeight);
+  assert_equals(hbox.clientHeight, hbox.scrollHeight);
+}, 'hbox dimensions');
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-computed.html
new file mode 100644
index 00000000000..6e4ef5a4565
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-computed.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedStyle().flexBasis</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis">
+<meta name="assert" content="flex-basis computed value is as specified, with length made absolute.">
+<meta name="assert" content="flex-basis computed value is non-negative.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("flex-basis", "1px");
+test_computed_value("flex-basis", "400%");
+test_computed_value("flex-basis", "auto");
+test_computed_value("flex-basis", "content");
+test_computed_value("flex-basis", "fit-content");
+test_computed_value("flex-basis", "min-content");
+test_computed_value("flex-basis", "max-content");
+
+test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px");
+test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px");
+test_computed_value("flex-basis", "calc(10%)", "10%");
+// https://github.com/w3c/csswg-drafts/issues/3482
+test_computed_value("flex-basis", "calc(0% + 10px)", "calc(0% + 10px)");
+test_computed_value("flex-basis", "calc(10% + 0px)", "10%");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-invalid.html
new file mode 100644
index 00000000000..cfb74a4888b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-basis with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis">
+<meta name="assert" content="flex-basis supports only the grammar 'content | <‘width’>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("flex-basis", "none");
+test_invalid_value("flex-basis", "auto content");
+test_invalid_value("flex-basis", "-1px");
+test_invalid_value("flex-basis", "-2%");
+test_invalid_value("flex-basis", "3px 4%");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-valid.html
new file mode 100644
index 00000000000..b7bcf2e40a6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-basis-valid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-basis with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis">
+<meta name="assert" content="flex-basis supports the full grammar 'content | <‘width’>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("flex-basis", "1px");
+test_valid_value("flex-basis", "calc(2em + 3ex)");
+test_valid_value("flex-basis", "400%");
+test_valid_value("flex-basis", "auto");
+test_valid_value("flex-basis", "fit-content");
+test_valid_value("flex-basis", "min-content");
+test_valid_value("flex-basis", "max-content");
+test_valid_value("flex-basis", "content");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-computed.html
new file mode 100644
index 00000000000..c63d656e6ec
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-computed.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedStyle().flex</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex">
+<meta name="assert" content="flex computed value is specified keywords and/or computed <length-percentage>.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("flex", "none", "0 0 auto");
+test_computed_value("flex", "1", "1 1 0%");
+test_computed_value("flex", "2 3", "2 3 0%");
+test_computed_value("flex", "4 5 6px");
+test_computed_value("flex", "7% 8", "8 1 7%");
+test_computed_value("flex", "8 auto", "8 1 auto");
+test_computed_value("flex", "calc(10px + 0.5em)", "1 1 30px");
+test_computed_value("flex", "calc(10px - 0.5em)", "1 1 0px");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-computed.html
new file mode 100644
index 00000000000..792358c8237
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-computed.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedStyle().flexDirection</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">
+<meta name="assert" content="flex-direction computed value is as specified.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("flex-direction", "row");
+test_computed_value("flex-direction", "row-reverse");
+test_computed_value("flex-direction", "column");
+test_computed_value("flex-direction", "column-reverse");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-invalid.html
new file mode 100644
index 00000000000..2c39a341d3f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-direction with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">
+<meta name="assert" content="flex-direction supports only the grammar 'row | row-reverse | column | column-reverse'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("flex-direction", "auto");
+test_invalid_value("flex-direction", "column row-reverse");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-valid.html
new file mode 100644
index 00000000000..05a0b74f14e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-direction-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-direction with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">
+<meta name="assert" content="flex-direction supports the full grammar 'row | row-reverse | column | column-reverse'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("flex-direction", "row");
+test_valid_value("flex-direction", "row-reverse");
+test_valid_value("flex-direction", "column");
+test_valid_value("flex-direction", "column-reverse");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-computed.html
new file mode 100644
index 00000000000..c109852f4e6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-computed.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().flexFlow</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
+<meta name="assert" content="flex-flow computed value is as specified.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("flex-flow", "column wrap-reverse");
+test_computed_value("flex-flow", "row-reverse wrap");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-invalid.html
new file mode 100644
index 00000000000..4572a803228
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-flow with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
+<meta name="assert" content="flex-flow supports only the grammar '<flex-direction> || <flex-wrap>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("flex-flow", "nowrap row nowrap");
+test_invalid_value("flex-flow", "column wrap column");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-shorthand.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-shorthand.html
new file mode 100644
index 00000000000..639e2436721
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-shorthand.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: flex-flow sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
+<meta name="assert" content="flex-flow supports the full grammar '<flex-direction> || <flex-wrap>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('flex-flow', 'nowrap column', {
+  'flex-direction': 'column',
+  'flex-wrap': 'nowrap'
+});
+
+test_shorthand_value('flex-flow', 'wrap row-reverse', {
+  'flex-direction': 'row-reverse',
+  'flex-wrap': 'wrap'
+});
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-valid.html
new file mode 100644
index 00000000000..60f02bd4445
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-flow-valid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-flow with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
+<meta name="assert" content="flex-flow supports the full grammar '<flex-direction> || <flex-wrap>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("flex-flow", "column nowrap", "column");
+test_valid_value("flex-flow", "nowrap column", "column");
+test_valid_value("flex-flow", "wrap row-reverse", "row-reverse wrap");
+test_valid_value("flex-flow", "nowrap", "row");
+test_valid_value("flex-flow", "row nowrap", "row");
+test_valid_value("flex-flow", "wrap", "wrap");
+test_valid_value("flex-flow", "row wrap", "wrap");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-computed.html
new file mode 100644
index 00000000000..23a48f49afa
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-computed.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedStyle().flexGrow</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow">
+<meta name="assert" content="flex-grow computed value is as specified.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("flex-grow", "1");
+test_computed_value("flex-grow", "2.34e+06", ["2.34e+06", "2340000"]);
+test_computed_value("flex-grow", "6.78e+08", ["6.78e+08", "678000000"]);
+test_computed_value("flex-grow", "0");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-invalid.html
new file mode 100644
index 00000000000..c8de18b745f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-grow with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow">
+<meta name="assert" content="flex-grow supports only the grammar '<number>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("flex-grow", "2e3.4");
+test_invalid_value("flex-grow", "-+5");
+test_invalid_value("flex-grow", "6 7");
+
+test_invalid_value("flex-grow", "1."); // Accepted by Edge.
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-valid.html
new file mode 100644
index 00000000000..2cdefe91d8a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-grow-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-grow with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow">
+<meta name="assert" content="flex-grow supports the full grammar '<number>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("flex-grow", "1");
+test_valid_value("flex-grow", "23.4e5", ["2.34e+06", "2.34e+006", "2340000"]);
+test_valid_value("flex-grow", "+.678E9", ["6.78e+08", "6.78e+008", "678000000"]);
+test_valid_value("flex-grow", ".0", "0");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-invalid.html
new file mode 100644
index 00000000000..c5d1a594edf
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex">
+<meta name="assert" content="flex supports only the grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("flex", "none 1");
+test_invalid_value("flex", "2 3 4");
+test_invalid_value("flex", "5px 7%");
+test_invalid_value("flex", "9 none");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shorthand.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shorthand.html
new file mode 100644
index 00000000000..735d1051e90
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shorthand.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: flex sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex">
+<meta name="assert" content="flex supports the full grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('flex', 'none', {
+  'flex-grow': '0',
+  'flex-shrink': '0',
+  'flex-basis': 'auto'
+});
+
+test_shorthand_value('flex', '1', {
+  'flex-grow': '1',
+  'flex-shrink': '1',
+  'flex-basis': '0%'
+});
+
+test_shorthand_value('flex', '2 3', {
+  'flex-grow': '2',
+  'flex-shrink': '3',
+  'flex-basis': '0%'
+});
+
+test_shorthand_value('flex', '4 5 6px', {
+  'flex-grow': '4',
+  'flex-shrink': '5',
+  'flex-basis': '6px'
+});
+
+test_shorthand_value('flex', '7% 8', {
+  'flex-grow': '8',
+  'flex-shrink': '1',
+  'flex-basis': '7%'
+});
+
+test_shorthand_value('flex', '8 auto', {
+  'flex-grow': '8',
+  'flex-shrink': '1',
+  'flex-basis': 'auto'
+});
+
+test_shorthand_value('flex', 'content', {
+  'flex-grow': '1',
+  'flex-shrink': '1',
+  'flex-basis': 'content'
+});
+
+test_shorthand_value('flex', '0 fit-content', {
+  'flex-grow': '0',
+  'flex-shrink': '1',
+  'flex-basis': 'fit-content'
+});
+
+test_shorthand_value('flex', '1 0 max-content', {
+  'flex-grow': '1',
+  'flex-shrink': '0',
+  'flex-basis': 'max-content'
+});
+
+test_shorthand_value('flex', 'auto 1 2', {
+  'flex-grow': '1',
+  'flex-shrink': '2',
+  'flex-basis': 'auto'
+});
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-computed.html
new file mode 100644
index 00000000000..a38d40b2c70
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-computed.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedStyle().flexShrink</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink">
+<meta name="assert" content="flex-shrink computed value is as specified.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("flex-shrink", "1");
+test_computed_value("flex-shrink", "2.34e+06", ["2.34e+06", "2340000"]);
+test_computed_value("flex-shrink", "6.78e+08", ["6.78e+08", "678000000"]);
+test_computed_value("flex-shrink", "0");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-invalid.html
new file mode 100644
index 00000000000..ea555b9efe3
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-shrink with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink">
+<meta name="assert" content="flex-shrink supports only the grammar '<number>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("flex-shrink", "2e3.4");
+test_invalid_value("flex-shrink", "-+5");
+test_invalid_value("flex-shrink", "6 7");
+
+test_invalid_value("flex-shrink", "1."); // Accepted by Edge.
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-valid.html
new file mode 100644
index 00000000000..e8714c50ca1
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-shrink-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-shrink with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink">
+<meta name="assert" content="flex-shrink supports the full grammar '<number>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("flex-shrink", "1");
+test_valid_value("flex-shrink", "23.4e5", ["2.34e+06", "2.34e+006", "2340000"]);
+test_valid_value("flex-shrink", "+.678E9", ["6.78e+08", "6.78e+008", "678000000"]);
+test_valid_value("flex-shrink", ".0", "0");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-valid.html
new file mode 100644
index 00000000000..a8c26a95687
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-valid.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex">
+<meta name="assert" content="flex supports the full grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("flex", "none", "0 0 auto");
+test_valid_value("flex", "1", "1 1 0%");
+test_valid_value("flex", "2 3", "2 3 0%");
+test_valid_value("flex", "4 5 6px");
+test_valid_value("flex", "7% 8", "8 1 7%");
+test_valid_value("flex", "8 auto", "8 1 auto");
+
+// The following is not yet supported by browsers:
+// test_valid_value("flex", "content");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-computed.html
new file mode 100644
index 00000000000..84e434889ab
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedStyle().flexWrap</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">
+<meta name="assert" content="flex-wrap computed value is as specified.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("flex-wrap", "nowrap");
+test_computed_value("flex-wrap", "wrap");
+test_computed_value("flex-wrap", "wrap-reverse");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-invalid.html
new file mode 100644
index 00000000000..79074e45cfc
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-wrap with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">
+<meta name="assert" content="flex-wrap supports only the grammar 'nowrap | wrap | wrap-reverse'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("flex-wrap", "auto");
+test_invalid_value("flex-wrap", "nowrap wrap");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-valid.html
new file mode 100644
index 00000000000..2b4b3dc2d2d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/flex-wrap-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing flex-wrap with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">
+<meta name="assert" content="flex-wrap supports the full grammar 'nowrap | wrap | wrap-reverse'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("flex-wrap", "nowrap");
+test_valid_value("flex-wrap", "wrap");
+test_valid_value("flex-wrap", "wrap-reverse");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-computed.html
new file mode 100644
index 00000000000..fbe9410a848
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: getComputedStyle().order</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order">
+<meta name="assert" content="order computed value is the specified integer.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("order", "0");
+test_computed_value("order", "123");
+test_computed_value("order", "-45");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-invalid.html
new file mode 100644
index 00000000000..b705482e2a4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing order with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order">
+<meta name="assert" content="order supports only the grammar '<integer>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("order", "auto");
+test_invalid_value("order", "123.45");
+test_invalid_value("order", "123 45");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-valid.html
new file mode 100644
index 00000000000..1765e8d4938
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/order-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: parsing order with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order">
+<meta name="assert" content="order supports the full grammar '<integer>'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("order", "0");
+test_valid_value("order", "123");
+test_valid_value("order", "-45");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/webkit-aliases.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/webkit-aliases.html
new file mode 100644
index 00000000000..7857c79e0f6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/parsing/webkit-aliases.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<meta charset=UTF-8>
+<title>CSS Flexbox Test: -webkit- legacy properties</title>
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#webkit-aliases">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/shorthand-testcommon.js"></script>
+<body>
+<script>
+
+test_is_legacy_name_alias("-webkit-align-content", "align-content");
+test_is_legacy_name_alias("-webkit-align-items", "align-items");
+test_is_legacy_name_alias("-webkit-align-self", "align-self");
+test_is_legacy_name_alias("-webkit-flex", "flex");
+test_is_legacy_name_alias("-webkit-flex-basis", "flex-basis");
+test_is_legacy_name_alias("-webkit-flex-direction", "flex-direction");
+test_is_legacy_name_alias("-webkit-flex-flow", "flex-flow");
+test_is_legacy_name_alias("-webkit-flex-grow", "flex-grow");
+test_is_legacy_name_alias("-webkit-flex-shrink", "flex-shrink");
+test_is_legacy_name_alias("-webkit-flex-wrap", "flex-wrap");
+test_is_legacy_name_alias("-webkit-justify-content", "justify-content");
+test_is_legacy_name_alias("-webkit-order", "order");
+
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-000.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-000.html
new file mode 100644
index 00000000000..939cdec5b30
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-000.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: Basic percentage heights</title>
+<link rel="author" title="Google" href="https://www.google.com/" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#main-sizing" />
+<meta name="flags" content="dom" />
+<meta name="assert" content="This test checks that percentage heights on a flex item correctly resolve against the container." />
+<style>
+.flexbox {
+    display: flex;
+    background-color: #aaa;
+    position: relative;
+}
+.flexbox :nth-child(1) {
+    background-color: blue;
+}
+.flexbox :nth-child(2) {
+    background-color: green;
+}
+.flexbox :nth-child(3) {
+    background-color: red;
+}
+
+.flexbox > div {
+    width: 40%;
+    height: 40%;
+}
+.column {
+    flex-flow: column wrap;
+    width: 100px;
+    height: 100px;
+    align-content: flex-start;
+}
+</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 column">
+    <div data-expected-height="40" data-offset-x="0" data-offset-y="0"></div>
+    <div data-expected-height="40" data-offset-x="0" data-offset-y="40"></div>
+    <div data-expected-height="40" data-offset-x="40" data-offset-y="0"></div>
+</div>
+
+<div class="flexbox column">
+    <div data-expected-height="40" data-offset-x="0" data-offset-y="0" style="margin-bottom: 10%"></div>
+    <div data-expected-height="40" data-offset-x="40" data-offset-y="0" style="margin-bottom: 20%"></div>
+    <div data-expected-height="40" data-offset-x="40" data-offset-y="60"></div>
+</div>
+
+<div class="flexbox column">
+    <div data-expected-height="20" data-offset-x="0" data-offset-y="0" style="flex: 1; min-height: 0; max-height: 20%"></div>
+    <div data-expected-height="40" data-offset-x="0" data-offset-y="20"></div>
+    <div data-expected-height="40" data-offset-x="0" data-offset-y="60"></div>
+</div>
+
+<div class="flexbox column" style="writing-mode: vertical-rl">
+    <div data-expected-width="40" data-offset-x="60" data-offset-y="0"></div>
+    <div data-expected-width="40" data-offset-x="20" data-offset-y="0"></div>
+    <div data-expected-width="40" data-offset-x="60" data-offset-y="40"></div>
+</div>
+
+<div class="flexbox column" style="writing-mode: vertical-rl">
+    <div data-expected-width="40" data-offset-x="60" data-offset-y="0" style="margin-bottom: 10%"></div>
+    <div data-expected-width="40" data-offset-x="20" data-offset-y="0" style="margin-bottom: 20%"></div>
+    <div data-expected-width="40" data-offset-x="60" data-offset-y="60"></div>
+</div>
+
+<div class="flexbox column" style="writing-mode: vertical-rl">
+    <div data-expected-width="20" data-offset-x="80" data-offset-y="0" style="flex: 1; min-width: 0; max-width: 20%"></div>
+    <div data-expected-width="40" data-offset-x="40" data-offset-y="0"></div>
+    <div data-expected-width="40" data-offset-x="0" data-offset-y="0"></div>
+</div>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-001.html
new file mode 100644
index 00000000000..62bbcecd2dd
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-001.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+
+<title>CSS Flexbox: Definite cross sizes</title>
+
+<link rel="stylesheet" href="support/flexbox.css">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes">
+<link rel="author" title="Google Inc." href="https://www.google.com/">
+<meta name="flags" content="dom" />
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<style>
+.rect {
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+}
+
+.flexbox {
+  width: 50px;
+  outline: 3px solid black;
+}
+
+
+.flexbox > * {
+  min-height: 0;
+  min-width: 0;
+}
+
+.flexbox > div > div {
+  overflow: hidden;
+}
+</style>
+
+<body onload="checkLayout('.flexbox')" style="height: 800px;">
+<div id=log></div>
+
+
+<p>This test verifies that we consider flex items' cross sizes to be definite
+if the align value is stretch (the default)</p>
+
+<p>Tests that we get a definite size in the simple case:</p>
+<div class="flexbox" data-expected-height="50">
+  <div data-expected-height="50">
+    <div style="height: 50%" data-expected-height="25">
+      <div class="rect" data-expected-height="50"></div>
+    </div>
+  </div>
+</div>
+
+<p>Tests that we get a definite size in a wrapping flexbox:</p>
+<div class="flexbox wrap" data-expected-height="50">
+  <div data-expected-height="50">
+    <div style="height: 50%" data-expected-height="25">
+      <div class="rect" data-expected-height="50"></div>
+    </div>
+  </div>
+</div>
+
+<p>Tests that we get an indefinite size when not stretch-aligning, despite
+definite size on container:</p>
+<div class="flexbox wrap" style="height: 50px;" data-expected-height="50">
+  <div class="align-self-flex-start" data-expected-height="50">
+    <div style="height: 50%" data-expected-height="50">
+      <div class="rect" data-expected-height="50"></div>
+    </div>
+  </div>
+</div>
+
+<p>Tests that we get a definite size in a definite-height flexbox:</p>
+<div class="flexbox" style="height: 50px;" data-expected-height="50">
+  <div data-expected-height="50">
+    <div style="height: 50%" data-expected-height="25">
+      <div class="rect" data-expected-height="50"></div>
+    </div>
+  </div>
+</div>
+
+<p>Tests that we get a definite size in a nested flexbox where only the outer
+one has an explicit height:</p>
+<div class="flexbox" style="height: 50px;" data-expected-height="50">
+  <div class="flexbox" data-expected-height="50">
+    <div data-expected-height="50">
+      <div style="height: 50%" data-expected-height="25">
+        <div class="rect" data-expected-height="50"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<p>Tests that we get a definite size in a nested flexbox where only the outer
+one has an explicit height and has an opposite direction:</p>
+<div class="flexbox" style="height: 50px;" data-expected-height="50">
+  <div class="flexbox column" data-expected-height="50">
+    <div class="flex-one" data-expected-height="50">
+      <div style="height: 50%" data-expected-height="25">
+        <div class="rect" data-expected-height="50"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<p>Tests that we respect min-height, on child of a flex item with percent
+height that's treated as definite:</p>
+<div class="flexbox" style="height: 50px;" data-expected-height="50">
+  <div data-expected-height="50">
+    <div style="height: 50%; min-height: 30px;" data-expected-height="30">
+      <div class="rect" data-expected-height="50"></div>
+    </div>
+  </div>
+</div>
+
+<p>Tests that max-height also supports percentages:</p>
+<div class="flexbox" data-expected-height="50">
+  <div data-expected-height="50">
+    <div style="max-height: 50%" data-expected-height="25">
+      <div class="rect" data-expected-height="50"></div>
+    </div>
+  </div>
+</div>
+
+<p>Tests that percentage sizes can also be definite:</p>
+<div class="flexbox" style="height: 10%;" data-expected-height="80">
+  <div data-expected-height="80">
+    <div style="height: 50%" data-expected-height="40">
+      <div class="rect" data-expected-height="50"></div>
+    </div>
+  </div>
+</div>
+
+<p>Tests that we use a definite size even when a percentage size is not definite</p>
+<div>
+  <div class="flexbox" style="height: 10%;" data-expected-height="50">
+    <div data-expected-height="50">
+      <div style="height: 50%" data-expected-height="25">
+        <div class="rect" data-expected-height="50"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<p>Tests that we don't mix up widths and heights</p>
+<div class="flexbox" style="height: 50px; width: 100px;" data-expected-height="50">
+  <div style="width: 100px;" data-expected-height="50" data-expected-width="100">
+    <div style="width: 50%" data-expected-width="50">
+      <div class="rect" data-expected-height="50" data-expected-width="50"></div>
+    </div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-003.html
new file mode 100644
index 00000000000..544b35e96bd
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-003.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: Resolving relative height content within a flex container against flexed size</title>
+<link rel="author" title="Microsoft" href="https://www.microsoft.com/" />
+<link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes" />
+<link rel="issue" href="https://github.com/w3c/csswg-drafts/issues/1679" />
+<meta name="assert" content="This test checks that percentage heights of content within a flex item are resolved against the flexed item" />
+
+<style>
+.flexbox {
+    display: flex;
+    min-height: 100%;
+}
+
+.column {
+    flex-flow: column;
+}
+
+.column-wrap {
+    flex-flow: column wrap;
+}
+
+.flexbox > div {
+    background: teal;
+    flex-grow: 1;
+}
+
+.flexbox span {
+    height: 100%;
+    background: orange;
+    display: block;
+}
+.vert-wm {
+    writing-mode: vertical-rl;
+}
+.horiz-wm {
+    writing-mode: horizontal-tb;
+}
+</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>
+
+<!-- The wrapper divs are here to give the flexbox something to fill  -->
+
+<!-- definite unwrapped column flexbox -->
+<div style="height: 100px;">
+    <div class="flexbox column" style="height: 0">
+        <div>
+            <span data-expected-height="100"></span>
+        </div>
+    </div>
+</div>
+
+<!-- definite wrapped column flexbox -->
+<div style="height: 100px;">
+    <div class="flexbox column-wrap" style="height: 0">
+       <div>
+            <span data-expected-height="50"></span>
+        </div>
+        <div>
+            <span data-expected-height="50"></span>
+        </div>
+    </div>
+</div>
+
+<!-- indefinite unwrapped column flexbox -->
+<div style="height: 100px;">
+    <div class="flexbox column">
+        <div>
+            <span data-expected-height="0"></span>
+        </div>
+    </div>
+</div>
+
+<!-- indefinite unwrapped column flexbox where item doesn't stretch -->
+<div style="height: 100px;">
+    <div class="flexbox column">
+        <div style="align-self: flex-start">
+            <span data-expected-height="0"></span>
+        </div>
+    </div>
+</div>
+
+<!-- indefinite wrapped column flexbox -->
+<div style="height: 100px;">
+    <div class="flexbox column-wrap">
+       <div>
+            <span data-expected-height="0"></span>
+        </div>
+        <div>
+            <span data-expected-height="0"></span>
+        </div>
+    </div>
+</div>
+
+<!-- indefinite unwrapped column flexbox, with orthogonal-flow flex item. The
+     flex item's main size (height) is definite, since it's the item's inline
+     size, and inline sizes always end up definite. -->
+<div style="height: 100px;">
+    <div class="flexbox column">
+        <div class="vert-wm">
+            <span data-expected-height="100"></span>
+        </div>
+    </div>
+</div>
+
+<!-- indefinite unwrapped row-oriented vertical-writing-mode flexbox, with
+     orthogonal-flow (horizontal-writing-mode) flex item. The flex item's
+     height (main size) is definite, since its parent flex container has a
+     definite main size, because the flex container's main axis is its
+     inline-axis and inline sizes are definite. -->
+<div style="height: 100px;">
+    <div class="flexbox vert-wm">
+        <div class="horiz-wm">
+            <span data-expected-height="100"></span>
+        </div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-011.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-011.html
new file mode 100644
index 00000000000..848eefb142f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-011.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Flexbox: percentage height of flex item</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="This test checks that the height of flexitems work properly
+with percentage value and 'overflow-y' auto.">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<script>
+window.onload = function()
+{
+    var outer = document.getElementById("outer");
+    outer.style.height = "300px";
+    outer.offsetLeft;
+    outer.style.height = "100px";
+    checkLayout('#outer');
+};
+</script>
+</head>
+<body>
+<div id=log></div>
+<div id="outer" data-expected-height="100">
+  <div class="flexbox" data-expected-height="100" style="height: 100%">
+    <div class="flex-one" data-expected-height="100" style="overflow-y: auto; height: 100%">
+        <div data-expected-height="100" style="height: 100%">
+          <div data-expected-height="100" style="width: 100px; height: 100px; background-color: green"></div>
+        </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-012.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-012.html
new file mode 100644
index 00000000000..581c30979a6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-012.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: percentages in flex items</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
+<link rel="help" href="https://crbug.com/341310">
+<meta name="assert" content="This test ensures that percentages are resolved in flex items.">
+<link href="support/flexbox.css" rel="stylesheet">
+<style>
+.horizontal {
+    height: 50px;
+    background-color: purple;
+    position: relative;
+}
+.vertical {
+    width: 50px;
+    height: 10px;
+    background-color: purple;
+    position: relative;
+    writing-mode: vertical-rl;
+}
+.flex-one {
+    background-color: red;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<script>
+function changeHeight()
+{
+  document.getElementById('dynamicHorizontalChild').style.height = "90%";
+  document.getElementById('dynamicVerticalChild').style.width = "30%";
+  checkLayout('.flexbox');
+}
+</script>
+<body onload="changeHeight()">
+<div class="flexbox horizontal">
+  <div data-expected-height="50" class="flex-one">
+    <div data-expected-height="35" style="height: 70%; background-color: lime"></div>
+  </div>
+</div>
+<div class="flexbox horizontal">
+  <div data-expected-height="50" class="flex-one">
+    <div id="dynamicHorizontalChild" data-expected-height="45" style="height: 70%; background-color: lime"></div>
+  </div>
+</div>
+<div class="flexbox horizontal">
+  <div data-expected-height="50" class="flex-one" style="padding: 10px; border: 2px solid black">
+    <div data-expected-height="18" style="height: 70%; background-color: lime"></div>
+  </div>
+</div>
+<div class="flexbox horizontal">
+  <img data-expected-height="25" style="max-height: 50%" src="support/10x10-green.png" />
+</div>
+<div class="flexbox horizontal">
+  <div data-expected-height="25" class="flex-one" style="max-height:50%">
+    <div data-expected-height="13" style="height: 50%; background-color: lime"></div>
+  </div>
+</div>
+<div class="flexbox vertical">
+  <div data-expected-width="50" class="flex-one">
+    <div data-expected-width="25" style="width: 50%; background-color: lime"></div>
+  </div>
+</div>
+<div class="flexbox vertical">
+  <div data-expected-width="50" class="flex-one">
+    <div id="dynamicVerticalChild" data-expected-width="15" style="width: 50%; background-color: lime"></div>
+  </div>
+</div>
+<div class="flexbox vertical">
+  <div data-expected-width="50" class="flex-one" style="padding: 10px; border: 2px solid black">
+    <div data-expected-width="13" style="width: 50%; background-color: lime"></div>
+  </div>
+</div>
+<div class="flexbox vertical">
+  <img data-expected-width="25" style="max-width: 50%" src="support/10x10-green.png" />
+</div>
+<div class="flexbox vertical">
+  <div data-expected-width="25" class="flex-one" style="max-width: 50%">
+    <div data-expected-width="13" style="width: 50%; background-color: lime"></div>
+  </div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-013.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-013.html
new file mode 100644
index 00000000000..2c6e4bd4740
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-heights-013.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: percentage height of replaced elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
+<link rel="help" href="https://crbug.com/499766">
+<meta name="assert" content="This test checks that percent heights of flex items' replaced children are resolved correctly" />
+<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>
+
+<body onload="checkLayout('.flexbox')">
+<div id=log></div>
+
+<p>You should see no red -- the height should be considered definite</p>
+
+<div class="flexbox" style="width: 100px; height: 150px; outline: 5px solid black;">
+  <div style="background: red;">
+    <img style="height: 100%; width: 100%;" src="support/100x100-green.png" data-expected-height="150">
+  </div>
+</div>
+
+<div class="flexbox column" style="width: 100px; height: 150px; outline: 5px solid black;">
+  <div class="flex-one" style="background: red;">
+    <img style="height: 100%; width: 100%;" src="support/100x100-green.png" data-expected-height="150">
+  </div>
+</div>
+
+<div class="flexbox" style="width: 100px; height: 150px; outline: 5px solid black;">
+  <div style="background: red;">
+    <object style="height: 100%; width: 100%;" data="support/100x100-green.png" data-expected-height="150"></object>
+  </div>
+</div>
+
+<div class="flexbox" style="width: 100px; height: 150px; outline: 5px solid black;">
+  <div style="background: red;">
+    <embed style="display:inline-block; height: 100%; width: 100%;" type="application/x-webkit-test-webplugin" data-expected-height="150"></embed>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-margins-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-margins-001.html
new file mode 100644
index 00000000000..b1563daa2ea
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-margins-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: percent margins with flex child</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css2/box.html#margin-properties">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=93411">
+<meta name="assert" content="This test ensures that percent margins always are computed with respect to the containing block's width even when there is flex on any child.">
+<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" style="display:flex; flex-direction: column; background-color: salmon; height: 300px; width: 400px;">
+    <div style="margin: 10%; background-color: orange; height: 5px; flex: 1" data-expected-width=320 data-expected-height=135></div>
+    <div style="margin: 10%; background-color: orange; height: 5px;" data-expected-width=320 data-expected-height=5></div>
+</div>
+
+<div class="flexbox" style="display:flex; background-color: salmon; height: 300px; width: 400px;">
+    <div style="margin: 10%; background-color: orange; height: 5px; flex: 1 5px" data-expected-width=235 data-expected-height=5></div>
+    <div style="margin: 10%; background-color: orange; height: 5px; width: 5px" data-expected-width=5 data-expected-height=5></div>
+</div>
+
+<div class="flexbox" style="display:flex; background-color: salmon; height: 300px; width: 400px; padding: 100px;">
+    <div style="margin: 10%; background-color: orange; height: 5px; flex: 1 5px" data-expected-width=235 data-expected-height=5></div>
+    <div style="margin: 10%; background-color: orange; height: 5px; width: 5px" data-expected-width=5 data-expected-height=5></div>
+</div>
+
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-max-width-cross-axis.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-max-width-cross-axis.html
new file mode 100644
index 00000000000..5b724cb92fe
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-max-width-cross-axis.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: percentage max width when using 'flex-direction: column'</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
+<link rel="help" href="https://crbug.com/675333">
+<meta name="assert" content="This test checks that an item's percentage max-width is correctly resolved when using 'flex-direction: column'">
+<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('.flexbox')">
+
+<p>Both bars should be the same width</p>
+<div class="flexbox column" style="width: 400px;">
+  <div data-expected-width="200" style="margin-left: 50%; width: 50%; background: green;">
+    Content
+  </div>
+</div>
+
+<div class="flexbox column" style="width: 400px;">
+  <div data-expected-width="200" style="margin-left: 50%; max-width: 50%; background: blue;">
+    Content
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size-quirks-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size-quirks-002.html
new file mode 100644
index 00000000000..e49f4e6ef33
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size-quirks.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size-quirks.html
new file mode 100644
index 00000000000..0e5b5c7b88f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size-quirks.html
@@ -0,0 +1,107 @@
+<title>CSS Flexbox: percentage size in flexbox children in quirks mode</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
+<link rel="help" href="https://crbug.com/531783">
+<meta name="assert" content="This test checks that percentage height/width values in flexbox children are correctly resolved regardless of quirks mode.">
+<style>
+.flexbox {
+    display: flex;
+}
+.column, .column .fixed {
+    height: 50px;
+}
+.row, .row .fixed {
+    width: 50px;
+}
+.container > div {
+    outline: 2px solid blue;
+}
+.row > div > div {
+    height: 20px;
+}
+.flexbox > div {
+    flex: 0 0 auto;
+}
+.column > .flexbox {
+    flex-direction: column;
+}
+.container > div > :nth-child(1) {
+    background-color: orange;
+}
+.container > div > :nth-child(2) {
+    background-color: yellow;
+}
+.container > div > :nth-child(3) {
+    background-color: salmon;
+}
+.container > div > :nth-child(4) {
+    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="container row">
+    <div class="flexbox">
+        <div style='width: 10px; min-width: 50%;' data-expected-width=25></div>
+        <div style='width: 50%;' data-expected-width=25></div>
+        <div style='width: 10px; max-width: 50%;' data-expected-width=10></div>
+        <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div>
+    </div>
+</div>
+
+<div class="container row" style='width: 100px'>
+    <div class="flexbox fixed">
+        <div style='width: 10px; min-width: 50%;' data-expected-width=25></div>
+        <div style='width: 50%;' data-expected-width=25></div>
+        <div style='width: 10px; max-width: 50%;' data-expected-width=10></div>
+        <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div>
+    </div>
+</div>
+
+<div class="container column" style='margin-bottom: 100px'>
+    <div class="flexbox" style="height: auto">
+        <div style='height: 10px; min-height: 50%;' data-expected-height=10></div>
+        <div style='height: 50%;' data-expected-height=0></div>
+        <div style='height: 10px; max-height: 50%;' data-expected-height=10></div>
+        <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=100></div>
+    </div>
+</div>
+
+<div class="container column">
+    <div class="flexbox fixed">
+        <div style='height: 10px; min-height: 50%;' data-expected-height=25></div>
+        <div style='height: 50%;' data-expected-height=25></div>
+        <div style='height: 10px; max-height: 50%;' data-expected-height=10></div>
+        <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=25></div>
+    </div>
+</div>
+
+<div class="container row">
+    <div class="flexbox">
+        <div style="flex: 0 0 50%" data-expected-width=25></div>
+    </div>
+</div>
+
+<div class="container column">
+    <div class="flexbox">
+        <div style="flex: 0 0 50%" data-expected-height=0></div>
+    </div>
+</div>
+
+<div class="container row">
+    <div class="flexbox fixed">
+        <div style="flex: 0 0 50%" data-expected-width=25></div>
+    </div>
+</div>
+
+<div class="container column">
+    <div class="flexbox fixed">
+        <div style="flex: 0 0 50%" data-expected-height=25></div>
+    </div>
+</div>
+
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size.html
new file mode 100644
index 00000000000..a30c9adfc36
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/percentage-size.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: Percentage size in flexbox children</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=81809">
+<meta name="assert" content="This test checks that percentage height/width values are correctly resolved in flexbox children.">
+<style>
+.flexbox {
+    display: flex;
+}
+.column, .column .fixed {
+    height: 50px;
+}
+.row, .row .fixed {
+    width: 50px;
+}
+.container > div {
+    outline: 2px solid blue;
+}
+.row > div > div {
+    height: 20px;
+}
+.flexbox > div {
+    flex: 0 0 auto;
+}
+.column > .flexbox {
+    flex-direction: column;
+}
+.container > div > :nth-child(1) {
+    background-color: orange;
+}
+.container > div > :nth-child(2) {
+    background-color: yellow;
+}
+.container > div > :nth-child(3) {
+    background-color: salmon;
+}
+.container > div > :nth-child(4) {
+    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="container row">
+    <div class="flexbox">
+        <div style='width: 10px; min-width: 50%;' data-expected-width=25></div>
+        <div style='width: 50%;' data-expected-width=25></div>
+        <div style='width: 10px; max-width: 50%;' data-expected-width=10></div>
+        <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div>
+    </div>
+</div>
+
+<div class="container row" style='width: 100px'>
+    <div class="flexbox fixed">
+        <div style='width: 10px; min-width: 50%;' data-expected-width=25></div>
+        <div style='width: 50%;' data-expected-width=25></div>
+        <div style='width: 10px; max-width: 50%;' data-expected-width=10></div>
+        <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div>
+    </div>
+</div>
+
+<div class="container column" style='margin-bottom: 100px'>
+    <div class="flexbox" style="height: auto">
+        <div style='height: 10px; min-height: 50%;' data-expected-height=10></div>
+        <div style='height: 50%;' data-expected-height=0></div>
+        <div style='height: 10px; max-height: 50%;' data-expected-height=10></div>
+        <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=100></div>
+    </div>
+</div>
+
+<div class="container column">
+    <div class="flexbox fixed">
+        <div style='height: 10px; min-height: 50%;' data-expected-height=25></div>
+        <div style='height: 50%;' data-expected-height=25></div>
+        <div style='height: 10px; max-height: 50%;' data-expected-height=10></div>
+        <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=25></div>
+    </div>
+</div>
+
+<div class="container row">
+    <div class="flexbox">
+        <div style="flex: 0 0 50%" data-expected-width=25></div>
+    </div>
+</div>
+
+<div class="container column">
+    <div class="flexbox">
+        <div style="flex: 0 0 50%" data-expected-height=0></div>
+    </div>
+</div>
+
+<div class="container row">
+    <div class="flexbox fixed">
+        <div style="flex: 0 0 50%" data-expected-width=25></div>
+    </div>
+</div>
+
+<div class="container column">
+    <div class="flexbox fixed">
+        <div style="flex: 0 0 50%" data-expected-height=25></div>
+    </div>
+</div>
+
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/position-relative-percentage-top-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/position-relative-percentage-top-001.html
new file mode 100644
index 00000000000..816e35f498f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/position-relative-percentage-top-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: Relative position with a percentage top</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#valdef-align-items-stretch">
+<meta name="assert" content="This test ensures that a flexbox with 'flex-flow: row wrap' properly centers a grandchild with 'position: relative' and 'top: 50%'.">
+<style>
+html, body {
+  margin: 0;
+}
+
+.border {
+  border:1px solid #000;
+}
+.width-50 {
+  width: 50%;
+}
+.flex {
+  display: flex;
+  flex-flow: row wrap;
+}
+.tall {
+  height: 300px;
+}
+.top-50 {
+  position: relative;
+  top: 50%;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.border')">
+<div class="border">
+  <div class="flex">
+    <div class="width-50">
+      <label class="top-50" data-offset-y="151">This should be in the center of the container</label>
+    </div>
+    <div class="width-50">
+      <div class="tall">
+        This is tall
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html
new file mode 100644
index 00000000000..5bdeab965a9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/quirks-auto-block-size-with-percentage-item.html
@@ -0,0 +1,19 @@
+<!-- quirks mode -->
+<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">
+    <img style="width:100px; height: 50%;" src="support/1x1-green.png" data-expected-height="100">
+    <div style="width: 50px; height: 100%; background: red;" data-expected-height="0"></div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/radiobutton-min-size.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/radiobutton-min-size.html
new file mode 100644
index 00000000000..db4a70e16e5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/radiobutton-min-size.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: minimum size of the radio button</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
+<meta name="assert" content="This test ensures that radio buttons used as flex items do not shrink below their default sizes.">
+<style>
+.flex {
+  display: flex;
+  width: 500px;
+}
+
+.wide {
+  width: 600px;
+  flex: none;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<p>You should see two identical-looking lines, both with a radio button at the
+beginning.</p>
+
+<div class="flex">
+  <input type="radio" id="check">
+  <div class="wide">Text</div>
+</div>
+
+<div>
+  <input type="radio" style="vertical-align: top;" id="ref"><span>Text</span>
+</div>
+
+<script>
+var ref = document.getElementById("ref");
+var check = document.getElementById("check");
+
+test(function() {
+  assert_equals(ref.offsetWidth, check.offsetWidth, "width should be equal");
+}, "two radio button widths are identical");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-align-items.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-align-items.html
new file mode 100644
index 00000000000..0d9a699e237
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-align-items.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Flexbox: Relayout align flex items</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
+<meta name="assert" content="This test ensures that align items work properly after changing existing values with 'flex-end' and 'stretch'.">
+<link href="support/flexbox.css" rel="stylesheet">
+<style>
+.flexbox {
+    height: 100px;
+    position: relative;
+}
+.flexbox > div {
+    border: 5px solid green;
+    width: 50px;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+</head>
+<body>
+<div id=log></div>
+<div id="from-stretch" class="flexbox">
+    <div data-expected-height="10" data-offset-y="90"></div>
+    <div data-expected-height="10" data-offset-y="90" class="align-self-auto"></div>
+    <div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div>
+    <div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div>
+    <div data-expected-height="10" data-offset-y="45" class="align-self-center"></div>
+    <div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div>
+    <div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div>
+</div>
+
+<div id="to-stretch" class="flexbox align-items-flex-start">
+    <div data-expected-height="100" data-offset-y="0"></div>
+    <div data-expected-height="100" data-offset-y="0" class="align-self-auto"></div>
+    <div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div>
+    <div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div>
+    <div data-expected-height="10" data-offset-y="45" class="align-self-center"></div>
+    <div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div>
+    <div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div>
+</div>
+<script>
+document.body.offsetLeft;
+document.getElementById("from-stretch").style.alignItems = "flex-end";
+document.getElementById("to-stretch").style.alignItems = "stretch";
+checkLayout(".flexbox");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-image-load.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-image-load.html
new file mode 100644
index 00000000000..9e6661b9f76
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-image-load.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Flexbox: Relayout after loading an image</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-values">
+<meta name="assert" content="This test ensures flexbox does a relayout after an image loads.">
+<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>
+</head>
+<body>
+<div id=log></div>
+<p>Test passes if a green 100x100 image is rendered.</p>
+<div id="test" class="flexbox">
+    &nbsp;
+    <div class="flexbox">
+        <img data-expected-width=100 data-expected-height=100 id="image" onload="imageLoaded()">
+    </div>
+</div>
+<script>
+
+function changeImage()
+{
+    document.getElementById("image").src = "support/100x100-green.png";
+}
+step_timeout(changeImage, 0);
+
+function imageLoaded()
+{
+    checkLayout('#test')
+}
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-input.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-input.html
new file mode 100644
index 00000000000..fd4122568b6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/relayout-input.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1082447" />
+<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: 100px;">
+  <input id="target" style="position: relative; height: 20px; flex: 1; width: 0px;" data-expected-width="100" />
+</div>
+<script>
+test(function() {
+  document.body.offsetTop;
+  document.getElementById('target').value = 'text';
+  checkLayout('#target');
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/scrollbars-auto-min-content-sizing.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/scrollbars-auto-min-content-sizing.html
new file mode 100644
index 00000000000..c26a423e5d1
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/shrinking-column-flexbox.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/shrinking-column-flexbox.html
new file mode 100644
index 00000000000..f8b2d37c05a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/shrinking-column-flexbox.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: Shrink column</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="This test ensures that flexbox shrinks the column height of a flex item
+after applying a new style.">
+<style>
+body {
+  width: 800px;
+  height: 600px;
+}
+
+.green {
+  background: green;
+}
+
+.blue {
+  background: blue;
+}
+
+.inner {
+  height: 200px;
+}
+
+.small {
+  height: 100px;
+}
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<script>
+onload = function() {
+  document.body.offsetWidth;
+  document.getElementById("target").classList.add("small");
+
+  checkLayout("body");
+};
+</script>
+
+<body class="flexbox column">
+
+<div class="flexbox column flex-one-one-auto">
+  <div class="flex-one-one-auto green" data-expected-height="250" id="target">
+    <div class="inner"></div>
+  </div>
+  <div class="flex-one-one-auto blue" data-expected-height="350">
+    <div class="inner"></div>
+  </div>
+</div>
+
+<div id=log></div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/stretch-after-sibling-size-change.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/stretch-after-sibling-size-change.html
new file mode 100644
index 00000000000..0737edbe3fb
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/stretch-after-sibling-size-change.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Flexbox: Stretch after sibling size is changed</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
+<link href="support/flexbox.css" rel="stylesheet">
+<meta name="assert" content="This test ensures that flexbox stretches flex items
+after a flex item height is changed.">
+<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.getElementById("a").style.height = "20px";
+    checkLayout(".flexbox");
+};
+</script>
+</head>
+<body>
+<div id=log></div>
+<div data-expected-width="100" data-expected-height="20" class="flexbox" style="width: 100px">
+    <div id=a class="flex-one" data-expected-width="50" data-expected-height="20" style="background-color: blue; height: 30px;"></div>
+    <div id=b class="flex-one" data-expected-width="50" data-expected-height="20" style="background-color: green"></div>
+</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/stretched-child-shrink-on-relayout.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/stretched-child-shrink-on-relayout.html
new file mode 100644
index 00000000000..db5c578c0f6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/stretched-child-shrink-on-relayout.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: Shrink stretched child on relayout</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">
+<meta name="assert" content="This ensures that flexbox shrinks stretched children after removing a sibling, in various writing-modes and flows.">
+<style>
+.flexbox {
+    display: flex;
+    background: papayawhip;
+    border: 1px solid midnightblue;
+    margin: 1em;
+    width: 50px;
+}
+
+.flexbox > div {
+    margin: 5px;
+    min-width: 10px;
+    min-height: 10px;
+    background-color: lawngreen;
+}
+
+.column {
+    flex-flow: column;
+}
+
+.horizontal-tb {
+    writing-mode: horizontal-tb;
+}
+.vertical-lr {
+    writing-mode: vertical-lr;
+}
+
+.largeitem {
+    height: 200px;
+    width: 200px;
+    margin: 5px;
+}
+</style>
+</head>
+<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">
+  <div data-expected-height=10 data-expected-width=10></div>
+  <div class="largeitem"></div>
+</div>
+<div class="flexbox column">
+  <div data-expected-height=10 data-expected-width=40></div>
+  <div class="largeitem"></div>
+</div>
+
+<div class="flexbox">
+  <div class="horizontal-tb" data-expected-height=10 data-expected-width=10></div>
+  <div class="largeitem"></div>
+</div>
+<div class="flexbox column">
+  <div class="horizontal-tb" data-expected-height=10 data-expected-width=40></div>
+  <div class="largeitem"></div>
+</div>
+<div class="flexbox">
+  <div class="vertical-lr" data-expected-height=10 data-expected-width=10></div>
+  <div class="largeitem"></div>
+</div>
+<div class="flexbox column">
+  <div class="vertical-lr" data-expected-height=10 data-expected-width=40></div>
+  <div class="largeitem"></div>
+</div>
+<script>
+document.body.offsetTop;
+var targets = document.getElementsByClassName('largeitem');
+for (var i = targets.length - 1; i >= 0; i--) {
+  targets[i].remove();
+};
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/100x100-blue.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/100x100-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..f578ae72533c7746c8a4d2f6eef32a8137ee1f4b
GIT binary patch
literal 92
zcmeAS@N?(olHy`uVBq!ia0y~yU`PRBMrH;E1}`0UaRvqk<^Z1%R|bavT@{zY85kHu
tJY5_^BqWm)Bv=<Gi1aiCI`}g%uvRcIHYYtOVPIfj@O1TaS?83{1ONe#6O{k}

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/100x100-green.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/100x100-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..25b76c3c6f216793a36b1f29287dafd993898c67
GIT binary patch
literal 91
zcmeAS@N?(olHy`uVBq!ia0y~yU`PRBMrH;E1}`0UaRvqk<^Z1%SB3_LIX{<9WME(r
s_H=O!sbEZApe@0=I6<VRDUgAIwSs|B?ySaH1_lNOPgg&ebxsLQ0Q(sefB*mh

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/10x10-green.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/10x10-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c39b0d02d342bbf1edd2ebbcc2ff4ff8b032e10
GIT binary patch
literal 74
zcmeAS@N?(olHy`uVBq!ia0y~yU;weXIM^5%7<!G)?`2?M5cG6$43U_cobbb6MJCiE
bzLh~={kY}Dr*+v33=9mOu6{1-oD!M<99j|G

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-green.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..b98ca0ba0a03c580ac339e4a3653539cfa8edc71
GIT binary patch
literal 135
zcmeAS@N?(olHy`uVBq!ia0y~yU|<AcMrH;E2G!ePrx+L*SkfJR9T^zbpD<_bdda}R
zz#QNc;>ys#Fz4sei3|)3T%InDAr-fh6Brm6m>3wJs^9y=z`!6`;u=vBoS#-wo>-L1
l;Fyx1l&avFo0y&&l$w}QS$HzlhJk^B!PC{xWt~$(695l!BbopJ

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-lime.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-lime.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb397fb090e199c51e80e4243d1ede03a79aa8d9
GIT binary patch
literal 135
zcmeAS@N?(olHy`uVBq!ia0y~yU|<AcMrH;E2G!ePrx+L*SkfJR9T^zbpD<_bdda}R
zz#QNc;>z%!!6fd$3I+xSE>9Q7kcwN$2@DJjObm=q)$jdbU|^6eag8Vm&QB{TPb^Ah
la7@WhN>%X8O-xS>N=;0uEIgTN!@$76;OXk;vd$@?2>|$dBS-)M

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-maroon.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-maroon.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f86b0721955eb4e0f014102c68c2a9764ef7593
GIT binary patch
literal 109
zcmeAS@N?(olHy`uVBq!ia0y~yU|<Ac4mJh`26@pVoeT^NY)RhkE({F}3=9k&OS#`N
zFfecyctjS1xM1vdGTRQU-^DS6<9c#NLc$Mz24)t<h7WDa^FX>hUHx3vIVCg!0P%?y
Ai~s-t

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-navy.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-navy.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b9a03955baea7abde9e056e8604e18694e49b66
GIT binary patch
literal 109
zcmeAS@N?(olHy`uVBq!ia0y~yU|<Ac4mJh`26@pVoeT^NY)RhkE({>hAoANHo`HdZ
zv%n*=n1O-81B~5HX4`@FyEuk$Tu)9&$oRp}z{JAX(7`d=3#84{)z4*}Q$iB}(7zQn

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-red.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-red.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bd73ac101874f306d007e9cea8fa3a1f62dce16
GIT binary patch
literal 135
zcmeAS@N?(olHy`uVBq!ia0y~yU|<AcMrH;E2G!ePrx+L*SkfJR9T^zbpD<_bdda}R
zz#QNc;`*O~LGlr&IRgU&m#2$kNX4z>1O^5MCI-f*>i7OIFfd4#xJHx&=ckpFCl;kL
lIHu$$r7C#lCZ?wbr6#6S7M@JCVPIfj@O1TaS?83{1OUUqB8dP1

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-white.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/1x1-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd43faec54ae60a210f1eab6ff4e7c88b8e34c97
GIT binary patch
literal 109
zcmeAS@N?(olHy`uVBq!ia0y~yU|<Ac4mJh`26@pVoeT^NY)RhkE)4%caKYZ?lNlHo
zI14-?iy0UgJiyrPWVRhxzl&oC$MxhN|NsB5XW;zJ{P$vW&j$tu1_n=8KbLh*2~7YJ
C&mF-4

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/200x200-green.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/200x200-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..1dcc392a6ef71e55302c40d41a547cf3f75a8f24
GIT binary patch
literal 275
zcmeAS@N?(olHy`uVBq!ia0y~yU^oH7jLZxS4AZCC++|>3U=HvJab;*=nDcY#L<R;1
z&H|6fVg?3oVGw3ym^DX&fq{X&#M9T6{XV-WucGj;MLRkf7#L(cT^vIq+}|E-WME)m
zIK1FzaQs7tP(~1^hD{`Zf${$f32O!h2FViFh!W@g+}zZ>5(ej@)Wnk16ovB4k_-iR
zPv3y>Mm}){1_o7-qLjpvRI6mL3I-zsLsMM?b6o?&5JMv?BQq-l6Kw+{D+2@NgNMJN
cXvob^$xN%nts!VmwHL@yp00i_>zopr02CER+yDRo

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/20x50-green.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/20x50-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7f6e67feee0079f21791cf050baffd87b67f8ab
GIT binary patch
literal 84
zcmeAS@N?(olHy`uVBq!ia0y~yU=U$oU@&52W?*1Q+mxBgz`(#9;1lA?(7-U~=hBG`
o3=BM;E{-7_(a8xCatsU%Cm0wRXPi@IU|?YIboFyt=akR{0EMg(VgLXD

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/300x150-green.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/300x150-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..57ece824a40be3d5d42d1ae53fa505cd1b8f237d
GIT binary patch
literal 1187
zcmeAS@N?(olHy`uVBq!ia0y~yVANq?V3@|i#K6Gt+ES^Nfq{W7$=lt9;Xep2*t>i(
z0|NtRfk$L91B0G22s2hJwJ&2}U|=ut^mS!_%*rGtWv!mz;l;qfbf+pLq9iD>T%n*S
zKP@vSRiUJ^AXOo?A~TJF!K3r-wAi9(MV{9Ck*?DVR25aG9e$d=%=*Qr>IX^IWtYw@
zx!i8Ya;!mg!h;$n^)K=E?mrrxCiV+lwRt*)Z_141XHAXr;XA9W9%Y3;+~xiyhu`w8
zE6?Nw(_d%53ioF%tJT@C<L&d!wh?#hYOELSejJ+OHt(_R`R&RNPy2n`ws`NlBj(3%
z&Nn|^VS7#MqJmrS4`IGLtxp_Y8+RqJPg=U*`c)(U?!+^bF06Xezm@y@!|n?6z42SE
zPt8+2AJp<#t*q)|#%<5|H|FiZ3%6S@x;<h3|AeYLA=S(8N}N6Z;`&Q3p8&1a+7+`~
zvRgXUmrU8Jvrx*eYvbBkfwJyv6s|dZc3InKWOzkRWM$w&$J(z`wYEv@+`KS-ozCfJ
zNpp7UX%vP@<s7)&WKj_kAUxyeKJlo+&t2gs1$PRj86A{NJi1%T&gh@-UTdl3WqKDy
zF6*z|pg+&DH`k|V^HCjz1shGTE`7i1Vc*w4wFpMzSR-q`h`!H7g<7^n-eTzoZ3OtF
zjUsRJDF`NMn>jNvxhn;Fl}KzBbaZE*-!yl#i=AUb$j(5C1m#H#$19H=lUi&#eX73k
zJh6s=7(r&K7=;5}ffMb;WGzENOxQwwvtG^Gs^V#w>2>l_&El?3*I@6oXVcd1s3`gR
z<k`EM-p_O@4w)>^QLH|<Q-npgAa=v91UF6f`9;Tq&zIbKnQrIp`s+%>)@4~&v)3&x
zoZR;Me$eI%d!B|_l`aYDkF9=nZSV6qwxZk<9nS7jW;IU&-(4}gnx6H=>0NQwmX*Fq
zg=aUjo6b0!r<Y-;ZZ)$}!kwvbHp_$yHZx`Y3_q!u&y<~6s5!;4x8zW!NoQlin<G{)
z&b@Pd7o6w#c>0cy^G~#PzKfs0Eqqt)`@GxiS8n~eySn>EDfjYa?L0O)a|P$`?TK0P
z*flc#+55}We|@;hdcSX<Y_0XLcv)T>$sgwWf7r^-OgHu2r`N#1!06%W;uunK>+NMn
zP6h^!0|#8qcWE9ue^6CojoO3BED25qiUWyf1TYyW&JY+#?87lbfH01U++*@msvw(V
RCj$cmgQu&X%Q~loCIB7})Nud+

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/40x20-green.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/40x20-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..c372de1dbd264ede31344915236b9420147586e4
GIT binary patch
literal 171
zcmeAS@N?(olHy`uVBq!ia0y~yV9;P-U=ZP8Vqjn>P<io&fq{Xuz$3Dlfq`2Xgc%uT
z&5>YWU|=ut^mS#w!_CFYrnq+RrA-VB43Z_T5hc#~xw)x%B@E6*sfi`2DGKG8B^e6t
zp1uL$jeOz^3=FECE{-7{$KRfHWMp7qVcDR(^F>m{4X!mtmKQrCbi}%kCViY<!B~Hu
WVTHV=++79+1_n=8KbLh*2~7YOzb?)I

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/60x60-gg-rr.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/60x60-gg-rr.png
new file mode 100644
index 0000000000000000000000000000000000000000..84f5b2a4f1d1865d763cac875bfa6a8c5c576c91
GIT binary patch
literal 224
zcmeAS@N?(olHy`uVBq!ia0y~yV6XvU4kiW$hOP7bR2di;7>k44ofy`glX=O&z`$AH
z5n0T@z%2~Ij105pNH8!ku$OrHy0YJ573HunoWT;{%fP@OS>hT|;+&tGo0?a`;9QiN
zSdyBeP@Y+mq2TW68xY>eC(gjY;Opt)7?N@C?FB<#1_K_Jjs6p-R~m~swt3jGTno*+
nRw|T%30};6Wyy;L{LPMwW&FmRxw@T!fq}u()z4*}Q$iB}{fat+

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/60x60-green.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/60x60-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3c8cf3eb4c89bd8f2d1ffde051856f375e3a3de
GIT binary patch
literal 218
zcmeAS@N?(olHy`uVBq!ia0y~yV6XvU4kiW$hOP7bR2di;7>k44ofy`glX=O&z`$AH
z5n0T@z%2~Ij105pNH8!ku$OrHy0YJ573HvyxV7zsA_D`1WQl7;iF1B#Zfaf$gL6@8
zVo7R>LV0FMhJw4NZ$Nk>pEv^pgS)4TV@Srmx91#r85lTN7F>SfX5Pwg?%|O7$xr<f
cvEaK{P%p!eHiswm3=9kmp00i_>zopr0J{rN*8l(j

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/README b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/README
new file mode 100644
index 00000000000..2e5f2ad0738
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/README
@@ -0,0 +1,28 @@
+CSS Global Support Directory
+============================
+
+This directory contains common support files (such as images and external
+style sheets). These are sync'ed into the support directories of all our
+test suites. If you have test-suite-specific support files, please add
+them to the appropriate test-suite-specific support/ directory.
+
+If you add to a support/ directory, please run the tools/supportprop.py
+script from the top of the repository to cascade support files into the
+lower-level support directories.
+
+Description of the Common Support File Collection
+-------------------------------------------------
+
+The 1x1-* images are all exactly one pixel.
+
+The swatch-* images all use 15x15 cells.
+
+The square-* images all use 15x15 cells with one pixel borders.
+
+The pattern-* images use cells of various sizes:
+
+   pattern-grg-rgr-grg.png   20x20
+   pattern-rgr-grg-rgr.png   20x20
+   pattern-tr.png            15x15
+   pattern-grg-rrg-rgg.png   15x15
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/a-green.css b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/a-green.css
new file mode 100644
index 00000000000..b0dbb071d5b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/a-green.css
@@ -0,0 +1 @@
+.a { color: green; }
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/b-green.css b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/b-green.css
new file mode 100644
index 00000000000..a0473f5ca26
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/b-green.css
@@ -0,0 +1 @@
+.b { color: green; }
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/c-red.css b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/c-red.css
new file mode 100644
index 00000000000..d4ba5c64e95
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/c-red.css
@@ -0,0 +1 @@
+.c { color: red; }
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/cat.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/cat.png
new file mode 100644
index 0000000000000000000000000000000000000000..85dd7324815b8f8ef1a1d0496224c1a0661db9d8
GIT binary patch
literal 1883
zcmeAS@N?(olHy`uVBq!ia0y~yU`S$MU`Xa*VqjpLF{dbtfq_A^#5JPCxhOTUBr`ux
zAtW<5m4W>Nk0b}Pv`=7m4FdxMdx@v7D_BTNQCjL;C<6lnXMsm#F#`kNVGw3Kp1&f6
zfr0I&r;B4q#jUq7+?#Hj@hq{ib3b=&_SW!hexd7YWo9Zh9A#?C*lT`JB|l}R(m_>*
zN6wX%HgdfSZh!v2N#}L@Q}M6n_upRA`~Umjd;9JBZH3c5e*U!Ya{T=#0&4Z=+t)0+
z{Wto4z5Rs)PuKouFmU?wwO?0q&Ow{Fx!z*(|0i#fOJ@HaSMraoVVc~-uTgeo@7-fs
z9kxZQ_-|6@Gv+y1<@<Gs@xnFz_l1pRUS)1Sldv?tUVcBvg3ZC}uj$73@7wcugB_1`
z%=){GTXXjMFdC+Y9XnV%TWV!TSEJOjX-~K}9QaTXY%TTS*1lWQL_Z#FHd-*zuz=_8
z6;Ih$-dy4LcUQUB?K#QbRwwFxJu~{e7sL7nhlZ6aZ*T3}HRp;!{F&W{*4`;v%Nsvm
z%5z!LNwK41Y`1;VnN#F8oVX~O9X<W6Y_t0FjE_4!7AN0jY&O+#S3KdieAWGDPvR4d
z-SsbDV$1fgDZXG)Ia%W9laBY=+pHI@TW!{~;hVLr?0vr*2`-GOH|9G}TDz_C>xyF<
zMk^-zJ-+epV&G+!Xgf=bo4@v{G4q+SNJ_o7+g-Bj*V`qfcIn1u5(!NbQm#R!5;yK|
z{c&ub)GMy`AT6f^SDh=)8GA)s@21b%HrHcgRa-B^)FZbp_U*s%l;Qrh$12ke)dgx^
zR|(tXaEAp7Z9bHt&?bC9$BNhIyBN#1{Fh2gex$P$UlDusN!*mZ!svwEOuZ#(-fItZ
zvD`cEd9@~Ouh)_JUY$E1PizwPXi`a^T${Cb!IPIAELSew7V~+~CbQxO%jBH3PmVv_
z5o_t3ux7UO8quJH{F!@dLZ00&dSUiTddF6Y)xERa7Z)(?i@vWWSQ%aGm7d8MtrigL
z7FGCcU*_$n+8Y(W`%TC#XO@`oVB;ctRX43N!N==nTsrCLRi2U`a7iJnsH(wnZ$YW?
z$;ofb9}1ZJZkS{fS@isp!Q|#o3BO8a*lRN}^JNLCTefx0FHP6}Aj`ONVpY0i`LTSv
zS%(>zQg-rhum4x|ue<NnXA_lI3?b6&%n4`1I*w$qU0Zi>t+NwH)rZPOe*$$kiky`S
zd6cs8sIf@j`$L~kh@N}#^!C%xA1k-)So^%%?n%G=dg~Qa^!ty5oGkuX-n+51tg>qr
zhqUq(i}r^8-V-&Q^L;j1g>L?_GwYIr$GkPXrYbT;d36??i$tdG43M<>exkO*=t*Cr
z#D@4yvurJ9t(=<M^>|uhk@KAX+BI9;*MD9jZ?WMrd)SjJn@tsbH=U5<lm5~DY>u;7
z;`TD_ADsL*W|m)YQ7yjsGD;*mf9B-xPu(T8?}nf3-=4fmT4`0Efv{W<*ZLi0!LK<|
z-k9#*=D6{kL7dr*{5d-g?r`|jWqOqVg{<^;pUwU`wl`AakNGn&9CJQyvcAq;Z0fxG
zvn+qVO+I-{r*X?GzVq3})3UbBUNDcB(T67^QXpsV+_?SOv*vsi-K&-)Q1WiWe$G|m
zw+*tMtP2x1-}dW9T6S4}lTO9m2PgM(p8NO4MXPE>mc-$!4BOAGG_hNJE;4d@5`*`X
zbw57`{rKnkvZC!>9(U-1Lf)F)Y4eUAemMK`gd(Gh)A-YLb%K{CwM`E5zIUE?qO#db
z?!H+K%hyb+shS+QT=Mws8A-AyZ8vZ0xv8#hFTB#|>#?9?Z;oXd-<vSEYs#m4?j08e
zj^}KVta44@3fj#QYni)TpzhxfXTN+|ku8ZG*B>#>=nFotH(UD49Oa^q8wzzMHW)3<
zo|oFW?x(1bb^f#S>)fJ0>qpMWEP1!^jDYBzl5X)8H|O1*yW4I1+aK?OQn|a|X<0oF
zU6#g{G&RRRdDfOlRp%?xclgDQn`u3HxMp*|bNTa~a<5X(MK4)(;^S56dOuThhIfAw
zKAD_#nDMary!-Q&^CIU7<eu^P^yy_(+w}=OO9XZNR`^Spnp|yuzT1CO)f++Q(sQ3}
z7x?$ivwUjLZg;G3K3kZ?vVbiM>sUXj`y4#>wEgEchGj9ICiqLc3U=<zFX~&M>dj{P
zMk@VlpN!R7*W>Lkmpptvf2r2Q_1bcWbQVUvbzXm@zG~S`&AAEl{>bn6`DKm1W4w{4
zo9`Nv>-!o`eBP}zW5JX2Tk1HqL{{XlF4<Z#bx-);BVNH(`<Heu+GNZkzQl>0>urfD
zb4+7j^|||zFS*RK?VUd?EnIWS`uT%%fm8kds=07Kd#?6itMNl&uY6&Ttu8Nvqh2@v
zTX;zSc^|(ef8E~$C;wKzm>Ix)!J@XS&qm+I<3gKwq}9}us;|C3czQNq2MdpUrtrst
zSJmDxH|@51opSYihpLw4*@gSArSIK8@v-ISWf3dVdhgFVAoOJ4{smsXPRu`?{vZB3
z(Qld9G_`v{23A2ur;fg<Ip=xL{loE>9>rl#uSLGd`J#U|^r;}{GuulH3=9mOu6{1-
HoD!M<!X=Ds

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/flexbox.css b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/flexbox.css
new file mode 100644
index 00000000000..83502cd144a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/flexbox.css
@@ -0,0 +1,143 @@
+.flexbox {
+    display: -webkit-flex;
+    display: flex;
+}
+.inline-flexbox {
+    display: -webkit-inline-flex;
+    display: inline-flex;
+}
+
+.flex-none {
+    -webkit-flex: none;
+    flex: none;
+}
+.flex-auto {
+    -webkit-flex: auto;
+    flex: auto;
+}
+.flex-one {
+    -webkit-flex: 1;
+    flex: 1;
+}
+.flex-one-one-auto {
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
+
+.row {
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+.row-reverse {
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+.column {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+.column-reverse {
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+.wrap {
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+.wrap-reverse {
+    -webkit-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
+}
+
+.align-content-flex-start {
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
+}
+.align-content-flex-end {
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
+}
+.align-content-center {
+    -webkit-align-content: center;
+    align-content: center;
+}
+.align-content-space-between {
+    -webkit-align-content: space-between;
+    align-content: space-between;
+}
+.align-content-space-around {
+    -webkit-align-content: space-around;
+    align-content: space-around;
+}
+.align-content-stretch {
+    -webkit-align-content: stretch;
+    align-content: stretch;
+}
+
+.align-items-flex-start {
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+.align-items-flex-end {
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+}
+.align-items-center {
+    -webkit-align-items: center;
+    align-items: center;
+}
+.align-items-baseline {
+    -webkit-align-items: baseline;
+    align-items: baseline;
+}
+.align-items-stretch {
+    -webkit-align-items: stretch;
+    align-items: stretch;
+}
+
+.align-self-auto {
+    -webkit-align-self: auto;
+    align-self: auto;
+}
+.align-self-flex-start {
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+}
+.align-self-flex-end {
+    -webkit-align-self: flex-end;
+    align-self: flex-end;
+}
+.align-self-center {
+    -webkit-align-self: center;
+    align-self: center;
+}
+.align-self-baseline {
+    -webkit-align-self: baseline;
+    align-self: baseline;
+}
+.align-self-stretch {
+    -webkit-align-self: stretch;
+    align-self: stretch;
+}
+
+.justify-content-flex-start {
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+}
+.justify-content-flex-end {
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+.justify-content-center {
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+.justify-content-space-between {
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+}
+.justify-content-space-around {
+    -webkit-justify-content: space-around;
+    justify-content: space-around;
+}
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/import-green.css b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/import-green.css
new file mode 100644
index 00000000000..537104e6633
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/import-green.css
@@ -0,0 +1 @@
+.import { color: green; }
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/import-red.css b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/import-red.css
new file mode 100644
index 00000000000..9945ef47114
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/import-red.css
@@ -0,0 +1 @@
+.import { color: red; }
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-grg-rgr-grg.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-grg-rgr-grg.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b88fbd81149891234185f54f8b4a0431759f181
GIT binary patch
literal 222
zcmeAS@N?(olHy`uVBq!ia0y~yV6XvU4kiW$hOP7bR2di;7>k44ofy`glX=O&z`&N|
z?e4<x9|RZdT|SwCfq}EYBeIx*fm;}a85w5Hkzin8U@!6Xb!ETBA;2o2kWpWGl!1XE
z&eO#)B;(%On}%Er3OvjQu1)`499z@q8nWX}qx7aJX<u%f(<s?|A@^hAf`tfh-@ni6
s=cU?AxeG`jJ<p}y<#R(D0>sUfXyzz=y(9Du0|Nttr>mdKI;Vst03M%HhX4Qo

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-grg-rrg-rgg.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-grg-rrg-rgg.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcf4f3fd7d95431b8cd1bc5f5129fcb724c5e40f
GIT binary patch
literal 231
zcmeAS@N?(olHy`uVBq!ia0y~yV9*6&4kiW$#zXb4(F_a>>pWc?Ln>~)4cjf$puodD
zPyU|$^+r}cfeBnseZ<(aJmz0<WOyLNP{72%E;Q$#jmx=H^>b{Zc7~c)wd|Ste^$uS
zjN~qsQw+iPcH3Py(RsCT=90xyH!ZCe?P)o2EOP}*iC2-3cQF6kr-2(;QiA(SB0k9m
zc>O;eHuoX7W{9SU8pGjCy_ITe3Yu#IMXoRScK5`E&sk41m-4;(A!e0r_1Q`G%E!|`
iFK$=m05LbpndkmfaFTD;Kg+<tz~JfX=d#Wzp$Pzm=vsyV

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-rgr-grg-rgr.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-rgr-grg-rgr.png
new file mode 100644
index 0000000000000000000000000000000000000000..d454e3a630cd98146c241537dbb3d4cef313f465
GIT binary patch
literal 223
zcmeAS@N?(olHy`uVBq!ia0y~yV6XvU4kiW$hOP7bR2di;7>k44ofy`glX=O&z`&N|
z?e4<x9|RZdT|SwCfq}EYBeIx*fm;}a85w5Hkzin8U@!6Xb!ETBA;2o2kWpWGl!1XE
z-qXb~B;(%On}%Er3OvjQu1)`499!e)8nWX}tMsOpXB}0WuIC>=mfOwG%!>ej>x}f?
t?wMP=Qtkp0NH<$#zo^Q=83ES&JT2$=!V$9SGXnzygQu&X%Q~loCIAOUNo)WB

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-tr.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/pattern-tr.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b4b25364e0ffbe09e563e13b567fa57330e48d5
GIT binary patch
literal 137
zcmeAS@N?(olHy`uVBq!ia0y~yV31>AVBqIqV_;xx+3OFI2=H`q45_%4oYK(rpNHqa
zq=baT42cU2${)2ZgdSpO<D2AjVD;=8PdBGNr|+zuc1pJ+O|G8tSXbY^VZQsKG&e63
qVJ~)*;;#*?*H;`}EcTe0;qeAOwHxavwlgp=FnGH9xvX<aXaWF%&n><H

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/ruler-h-50px.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/ruler-h-50px.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f46583665ca6471075227f9e2244f1ba1ffece0
GIT binary patch
literal 671
zcmeAS@N?(olHy`uVBq!ia0y~yU^vdez+l9|#K6EPV4ty;fq^N_)5S5Q;?~=_8&^GY
z5NY!_>6;iLW&QR@^o`qHt!7GGNzaWr_PHtjU@P0_!o_XvD4=u1skV86*rLY{bD~)e
zrQY1zbp3Ac$^W5gLWdrHp6{uq<~A|tQg_G2*B#gPSv+q`{F4%YihI91>r9RV`!2mS
z5!CDw+U3I%Vtb0qFS2XVo3h=1>;B81=E`_-Q8-ZSlvAX}>-AHf&Mh!J))YF;`~|mS
z$BUw!4<3BxyUDdew}*cMYb3)a1#U2Ut-Wehn3ky0sT3oZDQD9<S6qMn^mC=stM9*E
zOeA;~DR|fJa9tR1p>%G?v(J{vIh$_^TrApo=4sJCvvsfC9L1JdpFb5OqVum%aItk?
zvjJ=HM9V*ajs7VHzo=zcmcRu;2Sj`hiumjme|5NW{dY&NNWJNu85<*9LZ<!^Q}S9G
zwEC)-SEYqa-|@xQSG?YpdppSM_O|7hS6<g}?)`N^Suk_fG0X7KtN&G>)z}#yYY}Km
zT(PRFu*>K26_ecUw*>>YMy<X6I<8u2V#NCE^NfxcE=qVc^K|~g{Tbhlf-Srm&ZoWl
z9oM!sqWd4a!7An@Tnr40%$a+h#mKljFig;D2w_~p#ju1+A(UYy6T?a-4^f9z3_+|6
zL9B=7th&F?ZsFa$=xM4g8+2A*etDqiNyW*@>dP;mG&viz@`>)Tq>aD->MbpaHJ9uE
z&Hw65n(?`xDMp%N-EoiKmaV>;_4wnCt67|ie{@wV((A0kN_XFVTXtIF@toiP<*sL#
zv>je3kYpldI@`DYaeqI*QjyH_*VWAu$tP1jRqcKBZu*4}@86{yiVgM<WthRtw1lf=
aw*Pv)j4B!PSS1Dq1_n=8KbLh*2~7Y+Ts4mX

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/ruler-v-100px.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/ruler-v-100px.png
new file mode 100644
index 0000000000000000000000000000000000000000..a837eca2225082917dc952efd5c689e1b51d7bbd
GIT binary patch
literal 760
zcmeAS@N?(olHy`uVBq!ia0y~yU@&4}U^vdf#K6F~n05Ir1_q}6o-U3d6}R5bI_UQ(
zK*S-xdyBNV!_AFJ3ln{h=qI>#sObD<6Z*$2{QrP#{K2Lc+0MKe$;rRi+k`p-xvJ7H
zN-j58+VH5y;JKd1o*4i9)0y|P?-_@LIweZ9t(qky`g?L|?Di0?vva@KSIS;Hs~0!-
z#UWX5TN|4<e=XPfxz71E|NFrp!)u})yYyFiFTdRPxaaue@A`T9`9Et{-u_^BpTSMg
zwL1RF`|qwtHt7gP&d~bD$J_e6QfZQpT7F*Mp`R~0Rn661Mc%qyj52?I>gUz8#b3?b
z>moKJ9BkU^zQ#vQS?Oj@n2XJMX}<P@3B?r^H(r*wEV=x$WcS_FHO&jGW*q+ZyY}>^
zckkZ0EQ!&Zy{xjfR#$2ANtOBMyE}4kZ@$^{QBX_=WZJFTYs-)2uCoPmnpn9(qGdBp
z=lTV&4Ef-`GK6c|-`MM0b+QxJKX}D)Z*7w<L-WA{pKU^YmtS7>%A#-8y!rE=7g>hp
znn<m>m19=wd1j;A;=lu5OM_O;I+@b+=kn#t=U@HI<?LQl(0nxM<C7;Yq3_?npL}x3
z>s_m&G(`OT{qO(gvQuvU?hbMc)c%BnO|03!*W~WY&o4_*es^J6&FKYeeIGrLm$San
z{^RW}r^+erm3N#frySRXGTcETQ{d$POWS(l1^+DyTfH?(_x|_jwPAbX`aSF1ex@ou
z<X!sEcHy$jeS7z=eD(Tuw$j87&n}Pk*Q+ZlGq>M%cXxLzGMYK%^wZU=S8v{IeE+-h
z_w~o#<i-9{4%3?2-OYXfyS~2u>Z@5kK`wp${jN_we!N&X=lhb>$Zfgy_V)D&f_dEB
z<sZEZ<bUgb_LjGox4-I<apv=PeO`t&`#w!cPda?0ZCilc(@gHCf%9Mtxu=0(RLK1_
lP;PsG+|$DB?YDk0E}x*Kdh^jUaRvqk22WQ%mvv4FO#q)Ub+iBg

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/ruler-v-50px.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/ruler-v-50px.png
new file mode 100644
index 0000000000000000000000000000000000000000..84141028020b7e8cdf2412acbca3c799ba50a534
GIT binary patch
literal 757
zcmeAS@N?(olHy`uVBq!ia0y~yU@&4}U^vdf#K6F~n05Ir1_q`*o-U3d6}R5ba`e^;
zlxRDDF^z4J>#Iwl-7dGh-rkbzaB14|%ADmdAMYRbw|_*N9AC${?Di<vV^!@aQMkW*
zMt4i^vjyS1zt(i0=wJW5ruY2JnZ*`ilYR<Zi}ExS7F&HXD*N}}f9KAfd;9k7eZ%Yb
zm~Up>e3`GYr(ork$B!S+a#t~Z>{LIm+xTci$bzj`L$#*nZJ&MmX^&ywV~ONhXP@!^
zt6#Y|Z{d$azc~!Lltgp$^QDv7nj5!nyO?1j)jMI)$BLXDOG`_`V{hKRt(<qf++EOB
zByh{iMXm4l#qaZXtBzX#=_LQ_?;Ex)yTe^Kv819Rqi5&-{rwD=mw&MFzjXSv_x}6*
zTc$m+=vxxD`s;@e1}o?M`n>-6g)1(RS$w*7i66PebRsq+9Bg9czLuY;yLH{uTZcjH
zUlG@CC3r8to40%2?UyBs4%+3NIP&=8<HyOKoi0v6T2m*L6c$eOTdo=#7w5HW*RD%F
zGww-ORaZ~mvU|6-=1d>9lh?0bzi@Uz<r*KgU=0x!TU%SpzRP*rRZ}<LT)cR(XZ*qQ
z7aq)HLs$-X1&Hy_{F>JHZHswxp7Y8Y-#5z8_R7gEcyrS5>HDi<rxx3sdJH1-{_fc3
zRI4-9>uT23?|-wlM(ItT9$puA#+qL_(?B9bYie_I^Mhm^G3ox}lkVNW|M=sNCjn>g
z-o0C3vF7^g-@ku57MVyr{rq$G?Ae<)8{hx#%y;{YZI|)qthw{&+uPgkUS}=Ccll+>
z1Rb&N>({UEdw)G^>*dRrJqy()8y@>owKqh|)N|Lm*OhSvei_W#^M7W~=v`a$@8~4G
zJx?va-#4{oh}c&&{rS;0ap_x5l~b1MPI0e<Gp4v#g3xi0;2o#RDR2fv98Sg;{$b2r
XXTRBbd*(t01_lOCS3j3^P6<r_<0^fE

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/scrollbars.js b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/scrollbars.js
new file mode 100644
index 00000000000..5b61b499c0f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/scrollbars.js
@@ -0,0 +1,45 @@
+var flexDirections = ["row", "row-reverse", "column", "column-reverse"];
+var textDirections = ["ltr", "rtl"];
+var writingModes = ["horizontal", "flipped-blocks", "flipped-lines"];
+
+var createLeafNode = (i) => {
+  var flexItem = document.createElement("div");
+  flexItem.className = "leaf" + i;
+  var contentItem = document.createElement("div");
+  contentItem.innerHTML = i;
+  flexItem.appendChild(contentItem);
+  return flexItem;
+}
+
+var 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(i));
+  var marginShim = document.createElement("div");
+  return flexNode;
+}
+
+var createContainerNode = (flexDirection, textDirection, writingMode) => {
+  var containerNode = document.createElement("div");
+  containerNode.className = "container " + textDirection + " " + writingMode;
+  containerNode.appendChild(createContentNode(flexDirection, textDirection, writingMode));
+  return containerNode;
+}
+
+var createContainerRow = (flexDirection) => {
+  var containerRow = document.createElement("div");
+  containerRow.className = "container-row";
+  var rowLabel = document.createElement("div");
+  rowLabel.className = "vertical-header horizontal " + flexDirection;
+  rowLabel.innerHTML = flexDirection;
+  containerRow.appendChild(rowLabel);
+  textDirections.forEach((textDirection) => {
+    writingModes.forEach((writingMode) => {
+      var containerNode = createContainerNode(flexDirection, textDirection, writingMode);
+      containerRow.appendChild(containerNode);
+    });
+  });
+  return containerRow;
+}
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/solidblue.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/solidblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..8584a701a807d681ef09585229ec16ce59b50666
GIT binary patch
literal 1734
zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^xl_H+M9WMyDr
zQOR_64)An#RtPA{Ps_|nWni!nYz@7ie>+6Pt}{PqiI}}YgnN6}(e<Ih(L1H3)*fT?
zoV@g{m)O#mH?&lqSebXOlxDyEa@#8Z>PB<6Ka37HnfX0z6nWW_s&9Tfu*EaDU2B!6
zNA-&%{EBLCSwkQ0E=y7mJ`(fw*J;c9md~x9$K7_ZjnCXVOER=$+Uj+4&#O$Gyj*O`
zJm0QMo3D5?Us?UqPj}+!vqE|YMZceW{ZO`x<Mi8!@BaCHQ{G?Iedl7QlK+7`QQ2C_
zA3T9)u4HfX7TM4K`$y(>wmY9?K3q0qVOq^Jy>^aJ#l_?5wtkBCoP8IxUW=~f*u!SC
z=SG_T_QZH*i4&6_hUQ7{Qc9b+dF`acqVo^+`wO=l{^!@5UHausY;(l#IZJmY@8Ive
zr~NHtU#I=`tzTq5cyEYbztc0Zp7lrnuS+#d74m^!R!*udx%b>XK7OspJ+^zS)fWqv
zbNl|zDmAQ@k=S_gtLp0+CzLI&m!=DCULxM`KJ3Sq8_6#wt~e2#`5^JZL9g0XGvj9!
zhCOS!dwO%!%ri{N{VDsGpMBE6-eA9F?Vc5^XD?Zq8!r<3<Q<-!w{E55t#z{^1G)bi
z&9si|KcShsd+MPn@~8QBl`WJ!E#`IX;!CyqwP{u9g12t4?w%)pYr_1ym)?}HNmSmj
z-(#i!j7{ct?3JLTZHo`Mzi@F;_7l@hy1LTKdP%@MqbW!Bx|!Li8l7lqJ$yRRP|5$2
zP|n>-%l^m5TY5H$@6}xtxYYXi`hxu@H%8b8-(>tFpS1anfpog?k`3lJX20R^K4^82
zkCm$^*Gg3Da;?VK&wKn!L&U870zUn5sMY8QJa_ZG)UUJs|Jr74@YepK?0><~B>Jte
z0=sZVsre<l<=NTxZ}@CZvF-kG?(M$p?2<o)pL_3i=N>oPkauj`p&vKaZ`A#h8^mOt
zP}MbU;i(U0hd3*gWo=^^FRSvt&VLYj;a1SCjf<DQ`q_9vS?!?x3A;0wc0RnY>ffS&
zEAv*wuMod--#V*B(t4RntyZn}UyWMzTK&I1T_usbl>Vy3PTe<AkJWPb`@Qp3Z&a_3
zPZYk}6`OH2d%mf9u-~cbC*n`1{Mqwola2HSk)82!lb1i)`{51ex3fHdW%o*yaBa@=
z-CC{tkwwCUUzKex+x251M_X2xh(+F>KY3Y@*@<H}z9=s*i<$FuT33bDye@T*&iCE^
zM~*)-X4*b)&yTntY8#d@fBiRE*ucu_L9ULE>IvgVbFB))T)%LY%)W3owvO#S-y+Y|
zW!KD3iH6@?ziPcEXU(Y{MzL4j+eOcsh@O9{VOG9l@1gF+D*Kw1`d&ER`@PS#>@H94
zyJ(m8|A(w!hh;>s5UzbI@O8h`t+o$-HP4I}b+donwfE8U#U4-CCI(w=xc^)BrT3$|
zCEG7nG<**|ukK<kZ!YzJow<~CywZQMi>aUOBN+-Sa-_9|85kHi3p^r=85p>QL70(Y
z)*J~21}2Wokcg59UmvUF{9L`nl>DSry^7od1`x2Ru&T%{$W1LtRH(?!$t$+1uvG%9
zu*xg80txFYDS(xfWZNo5_y#CA=NF|anCcno87bLuDJUq|6s4qD1-ZCEwHKwN*(zm}
zloVL$>z9|8>y;bp<rk&v8(Lag>Khp88yV>qrKIT=SLT%@R_NvxD?<!{nd6dLoLrPy
zP?DLSrvNfHF)6>a#8ycOWRU_4K;4;J0JkWw80xF!{9OHt!~%UoJp+BX$sofkato}S
zi&7Iy@{2<9^K<M15;OBk^!!{y6v~YC3=D1b(G@^#w9yAS1IbxnKZ8s}6DQ={lFT$j
zz@WGnB!lT-kf@b^QD$mhNg^mX><n%6F~smX65{kA7dJaD8+~vTf}+!oOTi>7gn@xU
z#nZ(x#6mDRCE>)+^A3y&iyZVLUaw%};aQw$AjP)ejKPPO3=B-S7`s<8XKVze6i-(_
Jmvv4FO#qb9(`Ntx

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/square-purple.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/square-purple.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f522d78728417b0f74b694e2e47cd41c00359d1
GIT binary patch
literal 92
zcmeAS@N?(olHy`uVBq!ia0y~yU=RdhMrH;E2FAr#cQP<Aum$*pxHd2}{Ac)oROEmU
sNZQlIF{I*F@{j-f8ykf<uJALgxFP)4W0Ig30|Nttr>mdKI;Vst0N7F)r~m)}

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/square-teal.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/square-teal.png
new file mode 100644
index 0000000000000000000000000000000000000000..e567f51b91bbe40754cb0e0cae066201219cbb4a
GIT binary patch
literal 92
zcmeAS@N?(olHy`uVBq!ia0y~yU=RdhMrH;E2FAr#cQP<Aum$*pxH2>}F#P}T{%`F}
skhG_ZV@SoV<RAa{H#Q1!T;XR}aYOj8$0R{71_lNOPgg&ebxsLQ0P<EEP5=M^

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/square-white.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/square-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..5853cbb238cb2d4aba3dd49af3f2ba64d6c7a2de
GIT binary patch
literal 78
zcmeAS@N?(olHy`uVBq!ia0y~yU=Rdh4h9AW201nfH3kL-QBN1gkcwN$77ct7e1F_o
dm19_B85q`@3+UgM{jm$A(9_k=Wt~$(69DkA5A6T|

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-blue.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf2759634d45dbe3df13868341eddb7e4bf24172
GIT binary patch
literal 84
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~MrH;E21W^XP6h@B<^Z1%R|bavT@{zY85kIN
lJY5_^DsCkwC@?ZGFz7Nc{?-!KVqjok@O1TaS?83{1OO%x4{-nh

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-green.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..0aa79b0c86bd72c2220ecce39b9553e2cd3605b9
GIT binary patch
literal 84
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~MrH;E21W^XP6h@B<^Z1%SB3_LIX{<9WME+6
l@pN$vskoJ#puot$z@W>(_*+X@i-CcG!PC{xWt~$(696h@50U@?

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-lime.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-lime.png
new file mode 100644
index 0000000000000000000000000000000000000000..55fd7fdaedfc1ed505b111f20fabbca568c68fa5
GIT binary patch
literal 84
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~MrH;E21W^XP6h@B<^Z1%SBC!#CUFN=FfcIi
lc)B=-RNP8VP+(+WV9;e?{H-Od#lXP8;OXk;vd$@?2>>3m4?q9_

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-orange.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-orange.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3cd498b52bd88ea6c991f050f1ecb1cfdd136bb
GIT binary patch
literal 84
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~MrH;E21W^XP6h@B<^Z1%*Z)fyPEB&0&A`CG
l<LTlUQgJIeL4lEhfkBsn@wb++76StVgQu&X%Q~loCICfc5F-Ep

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-red.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-red.png
new file mode 100644
index 0000000000000000000000000000000000000000..1caf25c992aa8e23483cddb3334b5f51ec967f4a
GIT binary patch
literal 84
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~MrH;E21W^XP6h@B<^Z1%*Z&L*l8-pe85kIN
lJY5_^DsCkwC@?ZGFz7Nc{?-!KVqjok@O1TaS?83{1ONmV4uJpw

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-teal.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-teal.png
new file mode 100644
index 0000000000000000000000000000000000000000..0293ce89dea5c9413e4c829cc83a4e39d8f23300
GIT binary patch
literal 156
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~4mJh`2J356y%-o67>k44ofy`glX=O&z`&N|
z?e4<x9|RZdT|SwCfq}EYBeIx*fm;}a85w5Hkzin8U@!6Xb!ETBD$1bA&Q-F#hJk@W
z#?!?yMB{vNN=C+y^A2hWNedWyvgEGXtditrU<mDEl3iP-zl(u^fx*+&&t;ucLK6V2
CD<?1j

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-white.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a7d4323d77287d8eb03a89c635b09d099d94869
GIT binary patch
literal 85
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~Mg|532H~|Uo-;5oFeQ1ryD%``?Gj$Xz`(%g
l>EaktaVz=9|Nh1d7KZt8vR5|vY<~b!@9FC2vd$@?2>|&i7H|Ln

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-yellow.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/swatch-yellow.png
new file mode 100644
index 0000000000000000000000000000000000000000..1591aa0e2e274854ed836cf582235ea0202f9c8e
GIT binary patch
literal 84
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~MrH;E21W^XP6h@B<^Z1%*Z=<+x{iHuWnf_7
l@pN$vskoJ#puot$z@W>(_*+X@i-CcG!PC{xWt~$(698a25Y7Mq

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-bl.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-bl.png
new file mode 100644
index 0000000000000000000000000000000000000000..904e24e996a3e5da93bef89e10c49e24c07d0ed2
GIT binary patch
literal 1368
zcmeAS@N?(olHy`uVBq!ia0y~yU`PRB7G?$phNd$e=?n}EDgizrt_%z_jg4ofrOjku
zIAd&lCN1sE%$aA-oH>)0_J8Kg|7Xtp|NsC0s=1BL3=9lBB|(0{AU+f`2;Dz-j)8%J
zG0EHAg<Jmmkpm12ET=qO978H@y`Aoz_ry$~&GiU-K;;#7jtMu<3oaA9RL!czWSs5o
zSN&e@0Q(80-(m~qeO;maiX|;x@91=wy)xBvAFhhNw0zb4&^21B*Aute7<SvoU7wcM
zeg2!B_pxr%WzV?e!Y00E{r-~ar0%BM4keulXI)P8?{$_lpCG0<S8@5?pZw7$zAinL
z-my;i(2>tSrUc!MH1*PaUit8f%f4IF?>xwGjqjTp+rIhLOV(6F_cc~+&kwrADv2=(
zs@55|?NUwBYxraLVySHtQ<+T1s&lV?J^E(pH0RImdw<`*YU1!<kYEtkm|rd5&hhij
zlkW%JHhypP2xhZhGw=7UwzNBkjm)<jKcBI0$_abb!%EJd7KT6N+4%lT)E7e*J%gB#
z^S?TmpO$6Ll-)gLzmrj9&*|g)Oy~8Uu<iNed9r7L^^XhXY0=6@PVFx|u`xp7P1rZH
zd&NJkSG!KPiB)*A+1B*+r}z)wQ#PK_wKA3d6fM&epz$|<vbWlU)t^ddw;#7iVKkCl
z?OzkSudc}BnB`I~{ck4=^!{mHd)m)&YSkoFdH?&|>rSip>mK@;&=*l`Kd&%$-Rb4F
z+x8y~pUw5lBuuDwzoLE0R{K2lc`a2-{a=4_4!d95ukERHMsof2r~aF*Jd(vSw?8=^
zSsS`;Ta#;D&WZlbv*O;IVyUT_XJs}~KHW6bLR|F#>!u0&KdWB}wK$bxdVQ1X{;!;y
zizR>Ws)^2Rir>$1Tlm(}nv49Y6F%<ub>yzQ$vZpaV?XEYY5SHWUtS^Ho-)PA@lSGj
zdb9Yo-#$}9TkXD<^Zz}x@zC2Ri_bcLk2vP~u!l!i(d|z1y6(!OPtMBiSpKxKuO)6~
zt?BjR?^)BD^!-|Pgmi3aIetX^^Y8vj$;HY$+al7-+V5St9-x1$>xp#In;ElN=P<AO
z)O>J*%T@h}=dS9BpI)55v{|q)!m;MqjfhF<lNb3c<kvO1X7qCXD^A6v1II7Qypq`I
zFPr3iE!46`s^<2|g<JgvuE)nFXw>_zFKJuReDd>$ke(kpC-?1Ot~as$vpM_3;~!UC
zSj$dK5=bju;@J3H;eqn01umgBZZ$s+Kg+O=z45W>S9yinJN;zEhl(tTZIu!o(<h}h
za(sN+)m47M%Qz^xO;z;CwKSE^2?6gN|75B!e){S{ibsv=mDN5c*ta^p*fqmPT#U2O
zL31{%%i#lceKCIyoRs(@_V&_)u$MyS`<BJ17wuCl-Ow7%?PA~hCDp`l=FHSr)An0e
z26j7tGdj^T*RCwvQ2qAl$~hlxZtXa@R&vqn9X<>fDsDtr@3MYa@NC)aOMKD-Wec->
z-e|7<`C-$|Yx0J6pHr4k*m8Tym7^9c=O%DJo6I=zV&3%j{cgQFvlX8i+)K-8SrK!O
zOY&yJU73Z({WbQwdNMyVB%d%{oX&M}XT@Wo9|xHJH$G-keC8>Z6f{X$+B}JMVe!=|
z9#>O?bPqpjTCec!%Kh%pmedJrmENsZif&xtv{bs|XW7G_tFljuJ=!PCaIZNgG(7OG
z_f2boU`fO0+D&neCaFyu;=S_SPMkB>SzG?*Y)4pZZkDBk)XH7|jxUN`5XG0$E#q@}
zyTUo^MLQOFKHeH|ZqMRR{i%(WYG%S|c^yGpS9^CJyLDUOyy>>vdzcONW~F`BJF<5E
g3I8Yc-G8`Qi@p56Gk8`oFfcH9y85}Sb4q9e0HbQ50{{R3

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-br.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-br.png
new file mode 100644
index 0000000000000000000000000000000000000000..f413ff5c1a0f2ad9f9a345d3e07be57a59a82207
GIT binary patch
literal 1045
zcmeAS@N?(olHy`uVBq!ia0y~yU`PRB7G?$phNd$e=?n}EDgizrt_%z_jg4ofrOjku
zIAd&lCN1sE%$aA-oH>)0_J8Kg|7Xtp|NsC0s=1BL3=9lBB|(0{AU+f`2;Dz-j)8%J
zG0EHAg<Jmmkpm12%<Y~ojv*Dd-cFCsTWlcG#y?A^A$X>&Px%E_5zb$7oW`eY#8*Ap
zE2YUTktr6iWXpM9(M?T<o*ny<x1sl0WtEa5N6nA_wSD>w3)?3izfjJ*G`h*7Xiskc
z;=YAmjYpU5`{ey2?A_P3{m*Aj`?74ombzEEPXyIlG+2x(k1cxdubX>g{npNpn`cg7
z5j}M7jrh0e>uPW9{}#@@GeFNrx#4Nzmc{80{}|4D`S*%fn!u+0eHVWSe7jowX3L83
z37^Am-0$T&_-jX-&svoy%N<YX-SbhOkdv?YHCyJP?X-aA4O`?Eo!B{JUelw52`bfH
zTGr1Gb@y7_<hgZTrzO?+R=W4^H>-MPy<F8=+fXF#e6RT91fgTuirr~$xAb%MJ;l~a
zK4g{sy=&cG!#z0%Um6;UoRYZoA!L!%$A(3x?<I9qxJ?z^F`Y4G(x!!<widiMdBtt`
zrMKdQZ1%nxynhAn@O@dfw5ZK4TQzpIMBvm3Z%rSGG|M|KUvWU!GQQ;9h3Ro6iNAmS
zNWJF#fKNVN-u~PthIb0Q%a5i=-&uL!`Me?*^?H_FN%a-t`l`E%!r$_rKV<uFhO%Sg
zDX+8%roW{uGg8j}+bPts@~i3Z<~ea@{P|Lm8~@+r`2OUfl{=qfN?z*KeLhQ4Q_t@6
zdU9-*f7qMXE>hZF5hwl`O<aAs_4r<w4`vN}^o3R~vs?1d)U(gSdLq|OZk@l=Q<bis
z*}w4L(NC@~oNjy7)K0wmC@QdHdq4ZksvVb`Ba|f^q#|{X2p;^u>tlIDxM%FUFei}-
z<*N-kGK=2TJ$XBAA1`O|A^~&OJ+bT8c?U1JBf90fWYd-9*)OC#6L!Wc>}xIhu^_28
zp*4Qj_nYyqf48~l<xX6_@87I%Cuinonr^yrt-5Uf*9FHrCmx-1rqoz{-kIo48|K_^
zUleP#F-5f`aHB(ix5=(eeB4JiSDSB=*c9E-VE^~&)xUZhQtwvm5{?pk^SZfk`8;{Q
z{i|aXJ#4SCZ_(0RntS(DhE&$cD65&v3Uwy>#3=H)24+Nleic-Ckj2owspW9=nPBD9
zyL}&j4@!vX`ZGa|!7wr_=##5M7!T)(E(OKNL>A{wN*ug-S<Kfw1Hu?QBZ>~o&$gL5
zVVT)PHNnVD2?B3JjGk|?i#yD*dd;dElP-zy)Gg0#d2sapl{M2!BR3sd=fCm1<qWrz
zD@`wMdAt6__xl`|6JJzkckGn^&G_X0BkrG0|DvDhC(U1_I+yE)1p@;EgQu&X%Q~lo
FCIFl@0*?Ry

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-inner-half-size.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-inner-half-size.png
new file mode 100644
index 0000000000000000000000000000000000000000..e473bf80efc66766cb32ec2cc60244ed37dc1157
GIT binary patch
literal 180
zcmeAS@N?(olHy`uVBq!ia0y~yV31>AU@+ofV_;ykiHxpfU|^{Bba4!+xb=4GLB0bD
z9L_6m{{L^ZTQAPwk-@Cvf|*)d7-#Ohtv;*tqqo!P%)R~@EoLe!^**d{a1_s-HT(Dr
z!!7=&BpS}MSF^2|Yx_9&K*M`R`^~>!AIayQd`16n)lA{=O8$*vFORI~moSx@p4qed
meYxoo0p~NNN#Xp*xwl)2A6m9^u>=DH1B0ilpUXO@geCx_u1667

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-outer.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-outer.png
new file mode 100644
index 0000000000000000000000000000000000000000..82eeace7fc0c4202f79610978ab423e62abf8939
GIT binary patch
literal 2412
zcmeAS@N?(olHy`uVBq!ia0y~yU^v0Rz$n4N#K6G#ute?%0|TeAr;B4q#jUq<eY1sQ
zCEDgs?ti(6d-jpoyHmw39@W0Yv51@ZsH-lUlh~sAg^T_l;99rrg73>syY+UzQA;@T
zj>)SaP{eeRy}}j+vALDL=XOi*X1<=SHuuc;QbCouW+!L<zVms`?>RGjys~xET{W-%
z|1_niUu94DvnBI3-f&+!PxI@W@1Gz4lS-AJ>JjmGYD=w8Q{0#2fcHzc3cbvfzgBxh
z_~2E}i}eB%TU%Lmjs7hD|1{6&oWVQ=<I3gXOvQ;6M$azRai6u5(-hLnHu){Vf4@Cc
z|CgbIf5!@qYcD1ynLJ)R`|-zek2fV&n>TOv3y^tOIHfS{%;Wd9T4&ROvui6VDn5mK
zo`}!7^J~80`RX0rilOt;SY4ilq^tSprn{c3{4)K=LavtdEZJz5L!U~No{HqR-j7~!
zbfU-RV<x`kwx=tumB-jE72Z2bJ!pGI*q`Grq8ILbn35)YlXLA|n}1t#FaA1Z|G(p!
zn_2af?d!N&+EwSZE@|PnTj9DnL+tFL$ijK*Rnzyf_34!)si^(_`|N^ZRC9n=%2WT{
z^V*h1N}VoNDFVYwI<Le^wIxfr^B?N2vN^jb(xm%f`@!e+Zu1Swl(GbKG?trmrx}I>
z`?c#XUmB!2*Du{j^0~k6X`zWlJ7pGZXWD(s*QrwQtU&D>+2`lxUXF_2Rr2!ka{skq
z*+0aqZtJ9Pm+n1w<w}U%{P*`QB=n|$%ukzJ`Jq#`c|BiWihNSV5hoo7og+><N1WEE
zJj~mu%W^;dNMuKA#Kpz`weS4x7mk1a&--fO)>i@tXD#)!HgDW)!6V4MQK0+cgo^^{
zg%V0)Ns3}gj7bwWpNN!c>u^20DD9yRpEKA%sKH6Q4wtZ}Kh&Aiy178?BI8DejRM>t
z#IdyH(&f2Zw{PFRcdxF})1sT(-g+%nQd*WdYuU+*<uPlXpPwJTI#lpw+3vmdt}0W#
zIy-_+ZCdmC`ugq@cXyY+zq50)&qfO#_XBs$BNtc5ON-0OyuG;L|9{`VzrL>Sc=EYY
z(6avDo(`LuA0H02aw~m$aZy>Y^3#*f)BUGiVl|(yb3Ir5+^?W5aZmmKIG0&xpMCjK
z^8UT`T)zdT+Ovc<&vR{Z2L+468iqy9vkfKE6~z?5UIqJB5z2%Lh5hlo_xC~U9P<O9
zkn3oT=xO`-;Qz7w-pvKmyt6IuMOh}UUEWb@G+D??k{1+u+@KKXW;uUHAl=YBCGW(Y
z2^R%GK>`aJ0d9fUZ#K;Pn%)F4V&gnhlQrpvQc7Y;hEkI@7l@rxN}sq{f>#i15I8iE
zv~q70(5@*cdu~4G?!m~swMTExU07IL);<dqIf0v3L|)NZkQTUk&q`2)wMKNbMs%=(
z2r#oDqT?y=nkoO<rUuP<dM#?r6h2<<rFMO7SF^5eS`(wE4vrp8SZp=9x#z6hnz#M-
z*Q(g;yKl>^=k{H*n(CFg_VUXu*Q(0P%d@k+vvVV_J$tq+_jcdRQW1GQkIoavj<sFe
z6{6L7;?=8Hw{Feq(9zSowQcW~Eh<XI#l>&SZVQ$tB^^4ODF1fj!!y<Erd+ycGezTr
z!0N*r-fs>3W4Ph)hY01G9~&=bSlF*yzh1g+<L1rEN}oS}KAKc`V!Ksxi3RhcJPA2#
zV`Jl}*MI;1ZEj{>UO9R4<gHP@*|Dpy&PjMOX@*aE-n~6Hv$ndZOg>p+C7b^E`}_O6
zhd1Qz4$w$3O1^QKqkHL;qC0PG3SV7Z8@)Yf<(1dh*So6BKD)2_`?<ik*Vo4@YJE_g
zQuO9*cka1Qi<CK+Lc<Rcjsj;+Ii3jDNxFKF(erE|hXl8QSb`2i4=aelaEuAWU`S>J
zF&Z|483!U7HZm|Ab11mJXYpS9pz6=IRc%fRASDt#_qW#tc_~^woclqp{lmTErwsHj
zI^S7tQzFX!C+*6ih4UtEY*;v9p}~%Y1{3tu_B5;iuod~17tAZc4Kle&!nuO|kadDi
zf=0`X%i{K7ZPK9@;T+C4Qe33_p2sLYl-=_(<DBTRJ<U6x$<7dEO3>k8I%IuhQPRdw
zeH$4-&Q{nXe6R5XA5Uw;MutTbHXf)KDzp`QcsF0D=snw^>Y!69*OQO#Y2GQvJwud9
z;GQC<X!i%dqfI-Wl<y1Yi0ctlzBQqGg42xCOU`#L51)22(vEZ9gi@VD)|;Kc;W3Fp
z`@KU2J2XTd&i&wbRA~>hvtokIfe40{@&!qP_YB1tjxiaDv2d5qX7mqw+hKd;ZkocG
z)JeO~9@*2({A(JYWOt8fcMmJ)$%vM6g=9ua?h_FX$E50yJ(|LIL@Bv&`^=UUov?d~
zVvz7wNZIg-ucaIu;s#;@_c-5&=p3>(5McsIJ5;nAXYDhJ;p=-Ky2P*OcwC*9-6Gzd
zO(KV4)P7F$J7aC37(T)2QCjQk*RR9Z#TfED{`B;;wYBxRV_~a9b;NiNYlwBvx38Dm
zQ1~Ot^?;YhHtTcK_2bjh(&jwh8IxCEAD>-YP!OOY!j>a4k)2=8$Is8t-~W1+Y5L<&
zpEiBo6Sv;J?$3_zf=Y`je|-9pE&lt!ME_i~+2(n7GEAiQ>IMe~-``hTY%}HjbM~A!
zZx1|tm}oZp?cT$)&GTKJyuH2M-EOL$f8WM`Q77$ceiVFtbv4J#+TQ+t)>e>p-QxOb
zMl-XoudDs@V`KQnxV=?Nx7K}pboA3Fqhnru8;_Z3hh(*EPYRRx9hsQc6WN<u&XM+X
zZ@S&mD-EI#4<7Bm-}mMA6Ws|#q0{uOxVe{fzIs3Tb>-Ep()|4Mo7TL2`!+`Jd5+HX
z)5|h%ZOfgNwlwIY()=IW`<@<;F<Ee)SF~Pq;oZFZ`)YT`t+%#c7PK;N`|7RlN~~U%
z?D~G_?%lid?d$V$bI+bTXC<wBIw~UK#+^HR%HPk+z1`^Tdz6b?T3Y)1`}^0U_SgK}
z6ryD*EiNt|9v+^1J1#mpIx6bb-;a0h%<0&2`>oT$3%4^QjvYC2q+j0tkbv=th>0?u
z?$I|DlO1nN76wHyBv&x?up(!?WX1%Y5A**sFrG2Hyhvi^TLuOO22WQ%mvv4FO#luG
Bc2EES

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-style.css b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-style.css
new file mode 100644
index 00000000000..17f44c11796
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-style.css
@@ -0,0 +1,18 @@
+      #test01, #test02, #test03{
+        width: 50px;
+        height: 50px;
+        text-align:center;
+        font-size: 20px;
+      }
+      #test{
+        background: #ff0000;
+      }
+      #test01{
+        background: #7FFF00;
+      }
+      #test02{
+        background: #00FFFF;
+      }
+      #test03{
+        background: #4169E1;
+      }
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-tl.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-tl.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6ac0ef7e8f6e192c9c26239884bf92b13cf67b8
GIT binary patch
literal 1025
zcmeAS@N?(olHy`uVBq!ia0y~yU`PRB7G?$phNd$e=?n}EDgizrt_%z_jg4ofrOjku
zIAd&lCN1sE%$aA-oH>)0_J8Kg|7Xtp|NsC0s=1BL3=9lBB|(0{AU+f`2;Dz-j)8%J
zG0EHAg<Jmmkpm12%*CEAjv*Dd-cIw)TWuiFu<;0^m5|KB-{ma}X1xne{B^0+!RwoT
z_q_+Q3nor_6U?a2vGb1fhZzs{Uy0r88<`^b=i$$^W6T%7-VXoL{71q5#DBM2+bp-W
ze_U=U(|7Uu>e+wSg-zFRt>k}sJFzsBTd^yq;E$$7-1iA(?yHS86lCirE$7(uLN1Uq
zX09XC2ZjS}^D}n*Ig$QXDcoJ>lHPt#)oIsW{XXGXP|>j{Um;g_$LtS^f8%s)Tlh0q
z@$73)h?v>`K_R_9LheaZqOZ0@_dY$<UBMAWrZsmBYIQYq+E#C#@_h5Q7>kMLyACB8
zp5JJ^I>@ws;{PJHYxNU2nf2PPw!iEUm6^kFt;NUT&(YT0^5QQF&$ARCcYXf#q@d);
z*2S|N;`T{jWir1Mc124eE_!X$lNTMU6@D(U$=W^t<VCk{tb#w6U7pajDs^>;cjuDS
zY#S~c5AV{HpT|6GS#y+^91<$L^ndx?+$Hx<Z!x&+vUJ`}kE5D;y0O>YW;V12cqhgD
zQmal)Qe34Px$5-yQpXn4$<kK+3TErhehfV165`zyH|5`+kQ2uoLgFOqOP_N`A94tZ
zbI9qnN&8ZN^JT{=Zsxtp>%~91oZV|Gc#8YmbTRRHB3-L(B-e*eoo;del~xM>&r=o3
ztF0s4|5|*jU-Gx2sU+q5rw2W&<Gp{UT%CDBeyaFh)r)nCkE?di>Ua?1ZX16}F5sTS
zi^QJUg>&6SpE=B8iYeW5vtQTH{TIKT(#Ovidq0?SFP!F6SI(w%yR~e-@~e`it5<jS
zWHvsZ+~}j~w_Qx>@}y`EQ6V|sCra(!N$)oW$9~LHEYR+53;9&sBpqC|!`UNUd6V`R
zX3IN~-cN428EIy&QrI-%tC8TOp5B?|yC+BKd0m=uwES!L&XfuNmM$pUDmcGx^SrIu
zGwk-|w@dHb+r4VvQ>F8PQ`X6FoE4X5Jbq&S%iFn?(|(=2)-R*$BDcX@I#NHa*3kLe
zV+q6fBSq7f&goeEOlD&8k*A*&<Bt_)DwtFT-EN)N_O#x7!kOjuq3(YQXS^$R>GOK$
z#M1ly`nje0IpTjjPCj{jN-sb@eZI}(j|B#YzJ#VI^ez0g>U5$;+6+6n{W)4`GyZ*;
zYb0vy^FPcdXSu`Ql{0=c@m>knJUn?P@0Iyoo%*jqVmzM${%RWW?p)n}zwAry%(hqj
e>cL7M_@%<S^cgSK9%W!)VDNPHb6Mw<&;$UZ0q=?c

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-tr.png b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/support/test-tr.png
new file mode 100644
index 0000000000000000000000000000000000000000..59843ae54b64f6ce4f7e616d4be491c911ea84cf
GIT binary patch
literal 1235
zcmeAS@N?(olHy`uVBq!ia0y~yU`PRB7G?$phNd$e=?n}EDgizrt_%z_jg4ofrOjku
zIAd&lCN1sE%$aA-oH>)0_J8Kg|7Xtp|NsC0s=1BL3=9lBB|(0{AU+f`2;Dz-j)8%J
zG0EHAg<Jmmkpm12EUum|jv*Dd-cI)odTb$beCaHi1M6?wIp|l}yB`P@`d#9=Y=)`O
z)O*aPcNXwBaHn6J8*+qmQA}RS>%)_D+c&(B)e>X*bGiEe_m>MUxAXsUv76}sq+e-O
zaQoVze0hf@wsV8Tm8S^j_3ijsUai==U{&MQ(EgM2#do$d7>F>aDz<z&t6FxUz`!j)
zWX8qYZ+{DXVxK*~>B6(0vCjjF3{uZN+uN|5gGu>CTrG#AM8#)5V^@JGTP)>wNH*=i
zc7OI}PN&bz4(Dz;9=*eN<;xt|Db^AvzHXY!%5v_8BRBhvuR(r~cXN9r?VS?*-=lHA
zP|~WZo?}UVdmASO9I|L+Qn!qCt1_RpZfcKF$D5E(`&n83r_OnCWww>X3OQEB4>32|
zCQJ*-YyZE}uYhgi9MzWo-lZzd6E$C|wJ&+PkiV&)W1U&PrHZc8Uh&1UF{xJ+V*I?E
z-?MO*ovFPonRI8a%9{&Ca*x=~o-qwE-7IpvY{8?;Gn<Pf<=)(w@@Ufi^Alp4eoI_A
z$2T*s>r?K+IA^a!sf;PAXEJNI9yGbo9qq#%_hZw}odP#G-%DlA(|7VaK7GNn>PI(c
ze%<x>{+?MXYXldC?n?c-SU(`b>B{7qS7(~OX%~kuf0-|{$oitkMUKsL&7-q@+a0EF
z&zE%ZJZJHCyH5U($)+U&XA}!<t6gl1(#&#rMH$~6pLp-?%^+jvguXXNrGAOt*3Z~{
zD(0koyiSv+2*Z=bpOt+UGlj)#?JR99E9|pzjyq{}Pby93F3&pIqf_UbW;MO3sc&K1
zCl_=1P-U8xuB(ql_7s_%*vq@O`kw7-^DFL1*eseHdz-uaf&M|`Cy!W#kEGPBh}WID
zKS@}*>U(nAgQ5c0?RQptPGq-k5z2E-eSb<(q0TPaMc}m$@8hsTA$;>}e=!t@D!S(_
zj-O;Yh3ymXpPbTb=Ux@J$mAq{d2cgE_*qcOtcz(k&pF2Y?U^vw)!=Wbe(K?s-|yL7
zzPYYZWaHJKpv!S{t3)$<wtUrT$#JN=ogSn7wNQ56$C(uyleDg<XZ(rY;kJ`O==sTf
z?KU&zMYl^Ay-(TAGX34>hv%#cg%uBFecW!9`>^Zrg>w=~+J{)rY!7@b@O(v?qW6Tv
zV~k(V-kPK|tzJaHe>3C6Yu_7o2n4>LA+aUQ@RNgDA8+^?n?>*2s-j|#_Zdd(>wVCZ
zF;Kd;QKE9AV6<gzSFCHQ<RRhH<$^}_o6o<AoTwoAQ{7znK&a1ayI*<dPuTCYGvod}
zU8=Xu?97S&T`LTO<9B*3+rHfO=R&?-Nv)@=Ckwq&SC6-E*_yHMwBe*x=TCjly}3Ww
z`Q*ATm)fv>H*FKUW>+TG^S;{r>382p4!67m0_*Lx?^l?~K0X!|5o7r?dAjR~9kR<l
z#j0+T5n}6qmHuh>WbOmoQ<VCZEA--To!;`~$@>%Mw5puvo%){d`1{{oTZ0)c+0|P6
ti@1GlXO(9a#GgH5zWRl3snY-YuB{7QGk$x{U|?Wi@O1TaS?83{1OTf<OeO#T

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/svg-root-as-flex-item-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/svg-root-as-flex-item-006.html
new file mode 100644
index 00000000000..1fb3f7bd2f4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/svg-root-as-flex-item-006.html
@@ -0,0 +1,24 @@
+<!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-bounding-client-rect-width=600
+    data-expected-bounding-client-rect-height=300>
+    <rect x="0" y="0" width="200" height="100" fill="blue" />
+  </svg>
+</div>
+
+<script>
+  checkLayout('svg');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/table-with-percent-intrinsic-width.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/table-with-percent-intrinsic-width.html
new file mode 100644
index 00000000000..f858b3c8ea7
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/text-as-flexitem-size-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/text-as-flexitem-size-001.html
new file mode 100644
index 00000000000..20345cae43f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/text-as-flexitem-size-001.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+
+     This test is a text-based variant of text-as-flexitem-size-001.
+     (Not sure if all these variants are needed without an aspect ratio,
+     but seemed best to keep it in parallel as much as reasonable.)
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item containing text.
+    </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="author" title="Elika J. Etemad" href="http://inkedblade.net/contact">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <style>
+      @import "/fonts/ahem.css";
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 80px;
+        height: 50px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+        background: orange;
+      }
+
+      .flexbox p {
+        font: 10px/1 Ahem, monospace;
+        margin: 0.5em;
+        color: #0006;
+      }
+      /* Depending on wrapping, flex item content will be 35px or 45px tall,
+         min-content width = 40px and max-content width = 70px */
+    </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')">
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <div data-expected-width="70" data-expected-height="35">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox" style="width: 50px">
+      <div data-expected-width="50" data-expected-height="45">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox" style="width: 20px">
+      <div data-expected-width="20" data-expected-height="45">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <div style="width: 30px"
+           data-expected-width="30" data-expected-height="45">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div style="height: 30px"
+           data-expected-width="70" data-expected-height="30">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div style="flex: 0 0 30px"
+           data-expected-width="30" data-expected-height="45">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <div style="min-width: 75px"
+           data-expected-width="75" data-expected-height="35">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div style="min-height: 40px"
+           data-expected-width="70" data-expected-height="40">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div style="min-width: 75px; min-height: 40px"
+           data-expected-width="75" data-expected-height="40">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <div style="max-width: 20px"
+           data-expected-width="20" data-expected-height="45">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div style="max-height: 20px"
+           data-expected-width="70" data-expected-height="20">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div style="max-width: 20px; max-height: 20px"
+           data-expected-width="20" data-expected-height="20">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <div style="min-width: 70px; max-height: 20px"
+           data-expected-width="70" data-expected-height="20">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div style="max-width: 20px; min-height: 50px"
+           data-expected-width="20" data-expected-height="50">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <div style="min-width: 70px; height: 20px"
+           data-expected-width="70" data-expected-height="20">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div style="width: 40px; max-height: 20px"
+           data-expected-width="40" data-expected-height="20">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div style="max-width: 20px; height: 20px"
+           data-expected-width="20" data-expected-height="20">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div style="width: 20px; min-height: 20px"
+           data-expected-width="20" data-expected-height="45">
+        <p>xx xxx</p>
+        <p>xx</p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/support/inheritance-testcommon.js b/Tests/LibWeb/Text/input/wpt-import/css/support/inheritance-testcommon.js
new file mode 100644
index 00000000000..38ac94eb12e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/support/inheritance-testcommon.js
@@ -0,0 +1,96 @@
+'use strict';
+
+(function() {
+
+function assert_initial(property, initial) {
+  let initialDesc = initial;
+  if (Array.isArray(initial))
+    initialDesc = '[' + initial.map(e => "'" + e + "'").join(' or ') + ']';
+
+  test(() => {
+    const target = document.getElementById('target');
+    assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
+    target.style[property] = 'initial';
+    if (Array.isArray(initial)) {
+      assert_in_array(getComputedStyle(target)[property], initial);
+    } else {
+      assert_equals(getComputedStyle(target)[property], initial);
+    }
+    target.style[property] = '';
+  }, 'Property ' + property + ' has initial value ' + initialDesc);
+}
+
+/**
+ * Create tests that a CSS property inherits and has the given initial value.
+ *
+ * The current document must have an element #target within element #container.
+ *
+ * @param {string}        property  The name of the CSS property being tested.
+ * @param {string|array}  initial   The computed value for 'initial' or a list
+ *                                  of acceptable computed value serializations.
+ * @param {string}        other     An arbitrary value for the property that
+ *                                  round trips and is distinct from the initial
+ *                                  value.
+ */
+function assert_inherited(property, initial, other) {
+  if (initial)
+    assert_initial(property, initial);
+
+  test(() => {
+    const container = document.getElementById('container');
+    const target = document.getElementById('target');
+    assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
+    container.style[property] = 'initial';
+    target.style[property] = 'unset';
+    assert_not_equals(getComputedStyle(container)[property], other);
+    assert_not_equals(getComputedStyle(target)[property], other);
+    container.style[property] = other;
+    assert_equals(getComputedStyle(container)[property], other);
+    assert_equals(getComputedStyle(target)[property], other);
+    target.style[property] = 'initial';
+    assert_equals(getComputedStyle(container)[property], other);
+    assert_not_equals(getComputedStyle(target)[property], other);
+    target.style[property] = 'inherit';
+    assert_equals(getComputedStyle(target)[property], other);
+    container.style[property] = '';
+    target.style[property] = '';
+  }, 'Property ' + property + ' inherits');
+}
+
+/**
+ * Create tests that a CSS property does not inherit, and that it has the
+ * given initial value.
+ *
+ * The current document must have an element #target within element #container.
+ *
+ * @param {string}        property  The name of the CSS property being tested.
+ * @param {string|array}  initial   The computed value for 'initial' or a list
+ *                                  of acceptable computed value serializations.
+ * @param {string}        other     An arbitrary value for the property that
+ *                                  round trips and is distinct from the initial
+ *                                  value.
+ */
+function assert_not_inherited(property, initial, other) {
+  assert_initial(property, initial);
+
+  test(() => {
+    const container = document.getElementById('container');
+    const target = document.getElementById('target');
+    assert_true(property in getComputedStyle(target));
+    container.style[property] = 'initial';
+    target.style[property] = 'unset';
+    assert_not_equals(getComputedStyle(container)[property], other);
+    assert_not_equals(getComputedStyle(target)[property], other);
+    container.style[property] = other;
+    assert_equals(getComputedStyle(container)[property], other);
+    assert_not_equals(getComputedStyle(target)[property], other);
+    target.style[property] = 'inherit';
+    assert_equals(getComputedStyle(target)[property], other);
+    container.style[property] = '';
+    target.style[property] = '';
+  }, 'Property ' + property + ' does not inherit');
+}
+
+window.assert_inherited = assert_inherited;
+window.assert_not_inherited = assert_not_inherited;
+})();
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/support/shorthand-testcommon.js b/Tests/LibWeb/Text/input/wpt-import/css/support/shorthand-testcommon.js
new file mode 100644
index 00000000000..15e7cf8edf5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/support/shorthand-testcommon.js
@@ -0,0 +1,106 @@
+'use strict';
+
+function test_shorthand_value(property, value, longhands) {
+    const stringifiedValue = JSON.stringify(value);
+
+    for (let longhand of Object.keys(longhands).sort()) {
+        test(function(){
+            var div = document.getElementById('target') || document.createElement('div');
+            div.style[property] = "";
+            try {
+                div.style[property] = value;
+
+                const readValue = div.style[longhand];
+                assert_equals(readValue, longhands[longhand], longhand + " should be canonical");
+
+                div.style[longhand] = "";
+                div.style[longhand] = readValue;
+                assert_equals(div.style[longhand], readValue, "serialization should round-trip");
+            } finally {
+                div.style[property] = "";
+            }
+        }, "e.style['" + property + "'] = " + stringifiedValue + " should set " + longhand);
+    }
+
+    test(function(){
+        var div = document.getElementById('target') || document.createElement('div');
+        div.style[property] = "";
+        try {
+            const expectedLength = div.style.length;
+            div.style[property] = value;
+            assert_true(CSS.supports(property, value));
+            for (let longhand of Object.keys(longhands).sort()) {
+                div.style[longhand] = "";
+            }
+            assert_equals(div.style.length, expectedLength);
+        } finally {
+            div.style[property] = "";
+        }
+    }, "e.style['" + property + "'] = " + stringifiedValue + " should not set unrelated longhands");
+}
+
+/**
+ * Helper to be called from inside test().
+ */
+function is_property_in_longhands(t, property_name) {
+    let e = document.createElement("div");
+    document.body.append(e);
+    t.add_cleanup(() => e.remove());
+    let cs = getComputedStyle(e);
+    return Array.from(cs).includes(property_name);
+}
+
+/**
+ * This function is designed mainly to test the distinction between
+ * legacy name aliases and legacy shorthands.
+ */
+function test_is_legacy_name_alias(old_name, new_name) {
+    test(t => {
+        let e = document.createElement("div");
+        e.style.setProperty(old_name, "inherit");
+        assert_equals(e.style.getPropertyValue(old_name), "inherit",
+                      `${old_name} is supported`);
+        assert_equals(e.style.getPropertyValue(new_name), "inherit",
+                      `${old_name} is an alias for ${new_name}`);
+        assert_equals(e.style.cssText, `${new_name}: inherit;`,
+                      `declarations serialize using new name ${new_name}`);
+
+        e = document.createElement("div");
+        e.style.setProperty(old_name, "var(--v)");
+        assert_equals(e.style.getPropertyValue(new_name), "var(--v)",
+                      `${old_name} is a legacy name alias rather than a shorthand`)
+
+        e = document.createElement("div");
+        e.style.setProperty(new_name, "var(--w)");
+        assert_equals(e.style.getPropertyValue(old_name), "var(--w)",
+                      `${old_name} is a legacy name alias rather than a shorthand`)
+
+        assert_false(is_property_in_longhands(t, old_name),
+                     `${old_name} is not in getComputedStyle() list of longhands`);
+    }, `${old_name} is a legacy name alias for ${new_name}`);
+}
+
+/**
+ * This function is designed mainly to test the distinction between
+ * legacy name aliases and legacy shorthands.
+ */
+function test_is_legacy_shorthand(old_name, new_name) {
+    test(t => {
+        let e = document.createElement("div");
+        e.style.setProperty(old_name, "inherit");
+        assert_equals(e.style.getPropertyValue(old_name), "inherit",
+                      `${old_name} is supported`);
+        assert_equals(e.style.getPropertyValue(new_name), "inherit",
+                      `${old_name} is an alias for ${new_name}`);
+        assert_equals(e.style.cssText, `${new_name}: inherit;`,
+                      `declarations serialize using new name ${new_name}`);
+
+        e = document.createElement("div");
+        e.style.setProperty(old_name, "var(--v)");
+        assert_equals(e.style.getPropertyValue(new_name), "",
+                      `${old_name} is a shorthand rather than a legacy name alias`)
+
+        assert_false(is_property_in_longhands(t, old_name),
+                     `${old_name} is not in getComputedStyle() list of longhands`);
+    }, `${old_name} is a legacy name alias for ${new_name}`);
+}
diff --git a/Tests/LibWeb/Text/input/wpt-import/resources/check-layout-th.js b/Tests/LibWeb/Text/input/wpt-import/resources/check-layout-th.js
new file mode 100644
index 00000000000..54ddb35f311
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/resources/check-layout-th.js
@@ -0,0 +1,253 @@
+(function() {
+// Test is initiated from body.onload, so explicit done() call is required.
+setup({ explicit_done: true });
+
+function checkSubtreeExpectedValues(t, parent, prefix)
+{
+    var checkedLayout = checkExpectedValues(t, parent, prefix);
+    Array.prototype.forEach.call(parent.childNodes, function(node) {
+        checkedLayout |= checkSubtreeExpectedValues(t, node, prefix);
+    });
+    return checkedLayout;
+}
+
+function checkAttribute(output, node, attribute)
+{
+    var result = node.getAttribute && node.getAttribute(attribute);
+    output.checked |= !!result;
+    return result;
+}
+
+function assert_tolerance(actual, expected, message)
+{
+    if (isNaN(expected) || isNaN(actual) || Math.abs(actual - expected) >= 1) {
+        assert_equals(actual, Number(expected), message);
+    }
+}
+
+function checkDataKeys(node) {
+  // The purpose of this list of data-* attributes is simply to ensure typos
+  // in tests are caught. It is therefore "ok" to add to this list for
+  // specific tests.
+    var validData = new Set([
+        "data-anchor-polyfill",
+        "data-expected-width",
+        "data-expected-height",
+        "data-offset-x",
+        "data-offset-y",
+        "data-expected-client-width",
+        "data-expected-client-height",
+        "data-expected-scroll-width",
+        "data-expected-scroll-height",
+        "data-expected-bounding-client-rect-width",
+        "data-expected-bounding-client-rect-height",
+        "data-total-x",
+        "data-total-y",
+        "data-expected-display",
+        "data-expected-padding-top",
+        "data-expected-padding-bottom",
+        "data-expected-padding-left",
+        "data-expected-padding-right",
+        "data-expected-margin-top",
+        "data-expected-margin-bottom",
+        "data-expected-margin-left",
+        "data-expected-margin-right"
+    ]);
+    if (!node || !node.getAttributeNames)
+        return;
+    // Use "data-test" prefix if you need custom-named data elements.
+    for (let name of node.getAttributeNames()) {
+        if (name.startsWith("data-") && !name.startsWith("data-test"))
+            assert_true(validData.has(name), name + " is a valid data attribute");
+    }
+}
+
+function checkExpectedValues(t, node, prefix)
+{
+    checkDataKeys(node);
+    var output = { checked: false };
+
+    var expectedWidth = checkAttribute(output, node, "data-expected-width");
+    if (expectedWidth) {
+        assert_tolerance(node.offsetWidth, expectedWidth, prefix + "width");
+    }
+
+    var expectedHeight = checkAttribute(output, node, "data-expected-height");
+    if (expectedHeight) {
+        assert_tolerance(node.offsetHeight, expectedHeight, prefix + "height");
+    }
+
+    var expectedOffset = checkAttribute(output, node, "data-offset-x");
+    if (expectedOffset) {
+        assert_tolerance(node.offsetLeft, expectedOffset, prefix + "offsetLeft");
+    }
+
+    var expectedOffset = checkAttribute(output, node, "data-offset-y");
+    if (expectedOffset) {
+        assert_tolerance(node.offsetTop, expectedOffset, prefix + "offsetTop");
+    }
+
+    var expectedWidth = checkAttribute(output, node, "data-expected-client-width");
+    if (expectedWidth) {
+        assert_tolerance(node.clientWidth, expectedWidth, prefix + "clientWidth");
+    }
+
+    var expectedHeight = checkAttribute(output, node, "data-expected-client-height");
+    if (expectedHeight) {
+        assert_tolerance(node.clientHeight, expectedHeight, prefix + "clientHeight");
+    }
+
+    var expectedWidth = checkAttribute(output, node, "data-expected-scroll-width");
+    if (expectedWidth) {
+        assert_tolerance(node.scrollWidth, expectedWidth, prefix + "scrollWidth");
+    }
+
+    var expectedHeight = checkAttribute(output, node, "data-expected-scroll-height");
+    if (expectedHeight) {
+        assert_tolerance(node.scrollHeight, expectedHeight, prefix + "scrollHeight");
+    }
+
+    var expectedWidth = checkAttribute(output, node, "data-expected-bounding-client-rect-width");
+    if (expectedWidth) {
+        assert_tolerance(node.getBoundingClientRect().width, expectedWidth, prefix + "getBoundingClientRect().width");
+    }
+
+    var expectedHeight = checkAttribute(output, node, "data-expected-bounding-client-rect-height");
+    if (expectedHeight) {
+        assert_tolerance(node.getBoundingClientRect().height, expectedHeight, prefix + "getBoundingClientRect().height");
+    }
+
+    var expectedOffset = checkAttribute(output, node, "data-total-x");
+    if (expectedOffset) {
+        var totalLeft = node.clientLeft + node.offsetLeft;
+        assert_tolerance(totalLeft, expectedOffset, prefix +
+                         "clientLeft+offsetLeft (" + node.clientLeft + " + " + node.offsetLeft + ")");
+    }
+
+    var expectedOffset = checkAttribute(output, node, "data-total-y");
+    if (expectedOffset) {
+        var totalTop = node.clientTop + node.offsetTop;
+        assert_tolerance(totalTop, expectedOffset, prefix +
+                         "clientTop+offsetTop (" + node.clientTop + " + " + node.offsetTop + ")");
+    }
+
+    var expectedDisplay = checkAttribute(output, node, "data-expected-display");
+    if (expectedDisplay) {
+        var actualDisplay = getComputedStyle(node).display;
+        assert_equals(actualDisplay, expectedDisplay, prefix + "display");
+    }
+
+    var expectedPaddingTop = checkAttribute(output, node, "data-expected-padding-top");
+    if (expectedPaddingTop) {
+        var actualPaddingTop = getComputedStyle(node).paddingTop;
+        // Trim the unit "px" from the output.
+        actualPaddingTop = actualPaddingTop.slice(0, -2);
+        assert_equals(actualPaddingTop, expectedPaddingTop, prefix + "padding-top");
+    }
+
+    var expectedPaddingBottom = checkAttribute(output, node, "data-expected-padding-bottom");
+    if (expectedPaddingBottom) {
+        var actualPaddingBottom = getComputedStyle(node).paddingBottom;
+        // Trim the unit "px" from the output.
+        actualPaddingBottom = actualPaddingBottom.slice(0, -2);
+        assert_equals(actualPaddingBottom, expectedPaddingBottom, prefix + "padding-bottom");
+    }
+
+    var expectedPaddingLeft = checkAttribute(output, node, "data-expected-padding-left");
+    if (expectedPaddingLeft) {
+        var actualPaddingLeft = getComputedStyle(node).paddingLeft;
+        // Trim the unit "px" from the output.
+        actualPaddingLeft = actualPaddingLeft.slice(0, -2);
+        assert_equals(actualPaddingLeft, expectedPaddingLeft, prefix + "padding-left");
+    }
+
+    var expectedPaddingRight = checkAttribute(output, node, "data-expected-padding-right");
+    if (expectedPaddingRight) {
+        var actualPaddingRight = getComputedStyle(node).paddingRight;
+        // Trim the unit "px" from the output.
+        actualPaddingRight = actualPaddingRight.slice(0, -2);
+        assert_equals(actualPaddingRight, expectedPaddingRight, prefix + "padding-right");
+    }
+
+    var expectedMarginTop = checkAttribute(output, node, "data-expected-margin-top");
+    if (expectedMarginTop) {
+        var actualMarginTop = getComputedStyle(node).marginTop;
+        // Trim the unit "px" from the output.
+        actualMarginTop = actualMarginTop.slice(0, -2);
+        assert_equals(actualMarginTop, expectedMarginTop, prefix + "margin-top");
+    }
+
+    var expectedMarginBottom = checkAttribute(output, node, "data-expected-margin-bottom");
+    if (expectedMarginBottom) {
+        var actualMarginBottom = getComputedStyle(node).marginBottom;
+        // Trim the unit "px" from the output.
+        actualMarginBottom = actualMarginBottom.slice(0, -2);
+        assert_equals(actualMarginBottom, expectedMarginBottom, prefix + "margin-bottom");
+    }
+
+    var expectedMarginLeft = checkAttribute(output, node, "data-expected-margin-left");
+    if (expectedMarginLeft) {
+        var actualMarginLeft = getComputedStyle(node).marginLeft;
+        // Trim the unit "px" from the output.
+        actualMarginLeft = actualMarginLeft.slice(0, -2);
+        assert_equals(actualMarginLeft, expectedMarginLeft, prefix + "margin-left");
+    }
+
+    var expectedMarginRight = checkAttribute(output, node, "data-expected-margin-right");
+    if (expectedMarginRight) {
+        var actualMarginRight = getComputedStyle(node).marginRight;
+        // Trim the unit "px" from the output.
+        actualMarginRight = actualMarginRight.slice(0, -2);
+        assert_equals(actualMarginRight, expectedMarginRight, prefix + "margin-right");
+    }
+
+    return output.checked;
+}
+
+var testNumber = 0;
+var highlightError = false; // displays outline around failed test element.
+var printDomOnError = true; // prints dom when test fails.
+
+window.checkLayout = function(selectorList, callDone = true)
+{
+    if (!selectorList) {
+        console.error("You must provide a CSS selector of nodes to check.");
+        return;
+    }
+    var nodes = document.querySelectorAll(selectorList);
+    nodes = Array.prototype.slice.call(nodes);
+    var checkedLayout = false;
+    Array.prototype.forEach.call(nodes, function(node) {
+        const title = node.title == '' ? '' : `: ${node.title}`;
+        test(function(t) {
+            var container = node.parentNode.className == 'container' ? node.parentNode : node;
+            var prefix =
+                printDomOnError ? '\n' + container.outerHTML + '\n' : '';
+            var passed = false;
+            try {
+                checkedLayout |= checkExpectedValues(t, node.parentNode, prefix);
+                checkedLayout |= checkSubtreeExpectedValues(t, node, prefix);
+                passed = true;
+            } finally {
+              if (!passed && highlightError) {
+                if (!document.getElementById('testharness_error_css')) {
+                  var style = document.createElement('style');
+                  style.id = 'testharness_error_css';
+                  style.textContent = '.testharness_error { outline: red dotted 2px !important; }';
+                  document.body.appendChild(style);
+                }
+                if (node)
+                  node.classList.add('testharness_error');
+              }
+                checkedLayout |= !passed;
+            }
+        }, `${selectorList} ${++testNumber}${title}`);
+    });
+    if (!checkedLayout) {
+        console.error("No valid data-* attributes found in selector list : " + selectorList);
+    }
+    if (callDone)
+        done();
+};
+
+})();