[css-grid] Import additional grid layout tests and update TestExpectations
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 Nov 2018 21:25:07 +0000 (21:25 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 Nov 2018 21:25:07 +0000 (21:25 +0000)
https://bugs.webkit.org/show_bug.cgi?id=191515

Reviewed by Dean Jackson.

Imported several tests from Blink and update TextExpectaions.

* TestExpectations: Adding specific bugs for the expected failures.
* fast/css-grid-layout/changing-content-property-on-nested-grid-should-not-crash-expected.txt: Added.
* fast/css-grid-layout/changing-content-property-on-nested-grid-should-not-crash.html: Added.
* fast/css-grid-layout/column-property-should-not-apply-on-grid-container-expected.html: Added.
* fast/css-grid-layout/column-property-should-not-apply-on-grid-container.html: Added.
* fast/css-grid-layout/crash-large-positions-expected.txt: Added.
* fast/css-grid-layout/crash-large-positions.html: Added.
* fast/css-grid-layout/fixed-width-intrinsic-width-should-exclude-scrollbar-width-in-grid-expected.txt: Added.
* fast/css-grid-layout/fixed-width-intrinsic-width-should-exclude-scrollbar-width-in-grid.html: Added.
* fast/css-grid-layout/floating-not-effect-on-grid-items-expected.txt: Added.
* fast/css-grid-layout/floating-not-effect-on-grid-items.html: Added.
* fast/css-grid-layout/grid-align-baseline-expected.txt: Added.
* fast/css-grid-layout/grid-align-baseline-vertical-expected.txt: Added.
* fast/css-grid-layout/grid-align-baseline-vertical.html: Added.
* fast/css-grid-layout/grid-align-baseline.html: Added.
* fast/css-grid-layout/grid-auto-repeat-inherit-initial-crash-expected.txt: Added.
* fast/css-grid-layout/grid-auto-repeat-inherit-initial-crash.html: Added.
* fast/css-grid-layout/grid-auto-repeat-positioned-container-expected.html: Added.
* fast/css-grid-layout/grid-auto-repeat-positioned-container.html: Added.
* fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio-expected.txt: Added.
* fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio.html: Added.
* fast/css-grid-layout/grid-container-percentage-columns-expected.txt:
* fast/css-grid-layout/grid-container-percentage-columns.html:
* fast/css-grid-layout/grid-container-percentage-rows-expected.txt: Added.
* fast/css-grid-layout/grid-container-percentage-rows.html: Added.
* fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin-expected.html: Added.
* fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin.html: Added.
* fast/css-grid-layout/grid-container-scroll-accounts-for-sizing-expected.html:
* fast/css-grid-layout/grid-container-scroll-accounts-for-sizing.html:
* fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width-expected.txt: Added.
* fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width.html: Added.
* fast/css-grid-layout/grid-crash-huge-margins-and-min-height-max-content-expected.txt: Added.
* fast/css-grid-layout/grid-crash-huge-margins-and-min-height-max-content.html: Added.
* fast/css-grid-layout/grid-crash-out-of-flow-positioned-element-expected.txt: Added.
* fast/css-grid-layout/grid-crash-out-of-flow-positioned-element.html: Added.
* fast/css-grid-layout/grid-crash-remove-positioned-item-expected.txt:
* fast/css-grid-layout/grid-crash-remove-positioned-item.html:
* fast/css-grid-layout/grid-item-before-anonymous-child-crash-expected.txt: Added.
* fast/css-grid-layout/grid-item-before-anonymous-child-crash.html: Added.
* fast/css-grid-layout/grid-item-border-overflow-paint-expected.html: Added.
* fast/css-grid-layout/grid-item-border-overflow-paint.html: Added.
* fast/css-grid-layout/grid-item-change-alignment-from-stretch-expected.txt: Added.
* fast/css-grid-layout/grid-item-change-alignment-from-stretch.html: Added.
* fast/css-grid-layout/grid-item-grid-container-percentage-rows-expected.html: Added.
* fast/css-grid-layout/grid-item-grid-container-percentage-rows.html: Added.
* fast/css-grid-layout/grid-item-overflow-expected.html: Added.
* fast/css-grid-layout/grid-item-overflow-paint-expected.html: Added.
* fast/css-grid-layout/grid-item-overflow-paint.html: Added.
* fast/css-grid-layout/grid-item-overflow.html: Added.
* fast/css-grid-layout/grid-item-paddings-and-writing-modes-expected.html: Added.
* fast/css-grid-layout/grid-item-paddings-and-writing-modes.html: Added.
* fast/css-grid-layout/grid-item-scroll-position-expected.txt: Added.
* fast/css-grid-layout/grid-item-scroll-position.html: Added.
* fast/css-grid-layout/grid-margins-not-collapse-expected.html: Added.
* fast/css-grid-layout/grid-margins-not-collapse.html: Added.
* fast/css-grid-layout/grid-painting-item-overflow-expected.html: Added.
* fast/css-grid-layout/grid-painting-item-overflow.html: Added.
* fast/css-grid-layout/grid-painting-items-only-once-expected.html: Added.
* fast/css-grid-layout/grid-painting-items-only-once.html: Added.
* fast/css-grid-layout/grid-painting-respect-dom-order-expected.html: Added.
* fast/css-grid-layout/grid-painting-respect-dom-order.html: Added.
* fast/css-grid-layout/grid-painting-rtl-expected.html: Added.
* fast/css-grid-layout/grid-painting-rtl.html: Added.
* fast/css-grid-layout/grid-self-baseline-01-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-01.html: Added.
* fast/css-grid-layout/grid-self-baseline-02-b-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-02-b.html: Added.
* fast/css-grid-layout/grid-self-baseline-02-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-02.html: Added.
* fast/css-grid-layout/grid-self-baseline-03-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-03.html: Added.
* fast/css-grid-layout/grid-self-baseline-04-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-04.html: Added.
* fast/css-grid-layout/grid-self-baseline-05-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-05.html: Added.
* fast/css-grid-layout/grid-self-baseline-06-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-06.html: Added.
* fast/css-grid-layout/grid-self-baseline-07-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-07.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-01-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-01.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-02-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-02.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-03-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-03.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-04-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-04.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-05-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-05.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-06-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-06.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-07-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-horiz-07.html: Added.
* fast/css-grid-layout/grid-self-baseline-two-dimensional-expected.txt: Added.
* fast/css-grid-layout/grid-self-baseline-two-dimensional.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-01-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-01.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-02-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-03-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-04-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-05-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-06-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-07-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-lr-07.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-01-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-01.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-02-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-03-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-04-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-05-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-06-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-07-expected.html: Added.
* fast/css-grid-layout/grid-self-baseline-vertical-rl-07.html: Added.
* fast/css-grid-layout/grid-shorthands-style-format-expected.txt: Added.
* fast/css-grid-layout/grid-shorthands-style-format.html: Added.
* fast/css-grid-layout/grid-strict-ordering-crash-2-expected.txt: Added.
* fast/css-grid-layout/grid-strict-ordering-crash-2.html: Added.
* fast/css-grid-layout/named-grid-areas-dynamic-with-media-query-expected.html: Added.
* fast/css-grid-layout/named-grid-areas-dynamic-with-media-query.html: Added.
* fast/css-grid-layout/negative-growth-share-as-infinity-crash-expected.txt: Added.
* fast/css-grid-layout/negative-growth-share-as-infinity-crash.html: Added.
* fast/css-grid-layout/painting-item-marginbox-overflowing-grid-area-expected.html: Added.
* fast/css-grid-layout/painting-item-marginbox-overflowing-grid-area.html: Added.
* fast/css-grid-layout/positioned-grid-container-item-percentage-size-expected.html: Added.
* fast/css-grid-layout/positioned-grid-container-item-percentage-size.html: Added.
* fast/css-grid-layout/positioned-grid-container-percentage-tracks-expected.txt: Added.
* fast/css-grid-layout/positioned-grid-container-percentage-tracks.html: Added.
* fast/css-grid-layout/preferred-width-computed-after-layout-expected.txt: Added.
* fast/css-grid-layout/preferred-width-computed-after-layout.html: Added.
* fast/css-grid-layout/quirks-mode-percent-resolution-grid-item-expected.txt: Added.
* fast/css-grid-layout/quirks-mode-percent-resolution-grid-item.html: Added.
* fast/css-grid-layout/resources/blue-100x50.png: Added.
* fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
(testGridPositionDefinitionsValues):
* fast/css-grid-layout/scrolled-grid-painting-expected.html: Added.
* fast/css-grid-layout/scrolled-grid-painting-overflow-expected.html: Added.
* fast/css-grid-layout/scrolled-grid-painting-overflow.html: Added.
* fast/css-grid-layout/scrolled-grid-painting.html: Added.
* fast/css-grid-layout/setting-node-properties-to-null-during-layout-should-not-crash-expected.txt: Added.
* fast/css-grid-layout/setting-node-properties-to-null-during-layout-should-not-crash.html: Added.
* fast/css-grid-layout/stale-grid-layout-2-expected.txt: Added.
* fast/css-grid-layout/stale-grid-layout-expected.txt: Added.
* fast/css-grid-layout/vertical-align-do-not-effect-grid-items-expected.html: Added.
* fast/css-grid-layout/vertical-align-do-not-effect-grid-items.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@238105 268f45cc-cd09-0410-ab3c-d52691b4dbfc

152 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/fast/css-grid-layout/changing-content-property-on-nested-grid-should-not-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/changing-content-property-on-nested-grid-should-not-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/column-property-should-not-apply-on-grid-container-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/column-property-should-not-apply-on-grid-container.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/crash-large-positions-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/crash-large-positions.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/fixed-width-intrinsic-width-should-exclude-scrollbar-width-in-grid-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/fixed-width-intrinsic-width-should-exclude-scrollbar-width-in-grid.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-baseline-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-align-baseline.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-auto-repeat-inherit-initial-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-auto-repeat-inherit-initial-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-auto-repeat-positioned-container-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-auto-repeat-positioned-container.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-container-percentage-columns-expected.txt
LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html
LayoutTests/fast/css-grid-layout/grid-container-percentage-rows-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-container-percentage-rows.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-container-scroll-accounts-for-sizing-expected.html
LayoutTests/fast/css-grid-layout/grid-container-scroll-accounts-for-sizing.html
LayoutTests/fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-crash-huge-margins-and-min-height-max-content-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-crash-huge-margins-and-min-height-max-content.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-crash-out-of-flow-positioned-element-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-crash-out-of-flow-positioned-element.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-crash-remove-positioned-item-expected.txt
LayoutTests/fast/css-grid-layout/grid-crash-remove-positioned-item.html
LayoutTests/fast/css-grid-layout/grid-item-before-anonymous-child-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-before-anonymous-child-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-border-overflow-paint-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-border-overflow-paint.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-grid-container-percentage-rows-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-grid-container-percentage-rows.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-overflow-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-overflow-paint-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-overflow-paint.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-overflow.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-paddings-and-writing-modes-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-paddings-and-writing-modes.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-scroll-position-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-scroll-position.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-margins-not-collapse-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-margins-not-collapse.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-painting-item-overflow-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-painting-item-overflow.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-painting-items-only-once-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-painting-items-only-once.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-painting-respect-dom-order-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-painting-respect-dom-order.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-painting-rtl-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-painting-rtl.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-01-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-01.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-02-b-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-02-b.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-02-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-02.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-03-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-03.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-04-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-04.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-05-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-05.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-06-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-06.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-07-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-07.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-01-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-01.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-07-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-07.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-01-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-01.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-07-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-07.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-01-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-01.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-07-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-07.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-shorthands-style-format-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-shorthands-style-format.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-strict-ordering-crash-2-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-strict-ordering-crash-2.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/named-grid-areas-dynamic-with-media-query-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/named-grid-areas-dynamic-with-media-query.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/negative-growth-share-as-infinity-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/negative-growth-share-as-infinity-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/painting-item-marginbox-overflowing-grid-area-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/painting-item-marginbox-overflowing-grid-area.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/positioned-grid-container-item-percentage-size-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/positioned-grid-container-item-percentage-size.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/positioned-grid-container-percentage-tracks-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/positioned-grid-container-percentage-tracks.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/quirks-mode-percent-resolution-grid-item-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/quirks-mode-percent-resolution-grid-item.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/resources/blue-100x50.png [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js
LayoutTests/fast/css-grid-layout/scrolled-grid-painting-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/scrolled-grid-painting-overflow-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/scrolled-grid-painting-overflow.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/scrolled-grid-painting.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/setting-node-properties-to-null-during-layout-should-not-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/setting-node-properties-to-null-during-layout-should-not-crash.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/stale-grid-layout-2-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/stale-grid-layout-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/vertical-align-do-not-effect-grid-items-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/vertical-align-do-not-effect-grid-items.html [new file with mode: 0644]

index 0dbb8a0..fa7ead6 100644 (file)
@@ -1,3 +1,167 @@
+2018-11-12  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] Import additional grid layout tests and update TestExpectations
+        https://bugs.webkit.org/show_bug.cgi?id=191515
+
+        Reviewed by Dean Jackson.
+
+        Imported several tests from Blink and update TextExpectaions.
+
+        * TestExpectations: Adding specific bugs for the expected failures.
+        * fast/css-grid-layout/changing-content-property-on-nested-grid-should-not-crash-expected.txt: Added.
+        * fast/css-grid-layout/changing-content-property-on-nested-grid-should-not-crash.html: Added.
+        * fast/css-grid-layout/column-property-should-not-apply-on-grid-container-expected.html: Added.
+        * fast/css-grid-layout/column-property-should-not-apply-on-grid-container.html: Added.
+        * fast/css-grid-layout/crash-large-positions-expected.txt: Added.
+        * fast/css-grid-layout/crash-large-positions.html: Added.
+        * fast/css-grid-layout/fixed-width-intrinsic-width-should-exclude-scrollbar-width-in-grid-expected.txt: Added.
+        * fast/css-grid-layout/fixed-width-intrinsic-width-should-exclude-scrollbar-width-in-grid.html: Added.
+        * fast/css-grid-layout/floating-not-effect-on-grid-items-expected.txt: Added.
+        * fast/css-grid-layout/floating-not-effect-on-grid-items.html: Added.
+        * fast/css-grid-layout/grid-align-baseline-expected.txt: Added.
+        * fast/css-grid-layout/grid-align-baseline-vertical-expected.txt: Added.
+        * fast/css-grid-layout/grid-align-baseline-vertical.html: Added.
+        * fast/css-grid-layout/grid-align-baseline.html: Added.
+        * fast/css-grid-layout/grid-auto-repeat-inherit-initial-crash-expected.txt: Added.
+        * fast/css-grid-layout/grid-auto-repeat-inherit-initial-crash.html: Added.
+        * fast/css-grid-layout/grid-auto-repeat-positioned-container-expected.html: Added.
+        * fast/css-grid-layout/grid-auto-repeat-positioned-container.html: Added.
+        * fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio-expected.txt: Added.
+        * fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio.html: Added.
+        * fast/css-grid-layout/grid-container-percentage-columns-expected.txt:
+        * fast/css-grid-layout/grid-container-percentage-columns.html:
+        * fast/css-grid-layout/grid-container-percentage-rows-expected.txt: Added.
+        * fast/css-grid-layout/grid-container-percentage-rows.html: Added.
+        * fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin-expected.html: Added.
+        * fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin.html: Added.
+        * fast/css-grid-layout/grid-container-scroll-accounts-for-sizing-expected.html:
+        * fast/css-grid-layout/grid-container-scroll-accounts-for-sizing.html:
+        * fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width-expected.txt: Added.
+        * fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width.html: Added.
+        * fast/css-grid-layout/grid-crash-huge-margins-and-min-height-max-content-expected.txt: Added.
+        * fast/css-grid-layout/grid-crash-huge-margins-and-min-height-max-content.html: Added.
+        * fast/css-grid-layout/grid-crash-out-of-flow-positioned-element-expected.txt: Added.
+        * fast/css-grid-layout/grid-crash-out-of-flow-positioned-element.html: Added.
+        * fast/css-grid-layout/grid-crash-remove-positioned-item-expected.txt:
+        * fast/css-grid-layout/grid-crash-remove-positioned-item.html:
+        * fast/css-grid-layout/grid-item-before-anonymous-child-crash-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-before-anonymous-child-crash.html: Added.
+        * fast/css-grid-layout/grid-item-border-overflow-paint-expected.html: Added.
+        * fast/css-grid-layout/grid-item-border-overflow-paint.html: Added.
+        * fast/css-grid-layout/grid-item-change-alignment-from-stretch-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-change-alignment-from-stretch.html: Added.
+        * fast/css-grid-layout/grid-item-grid-container-percentage-rows-expected.html: Added.
+        * fast/css-grid-layout/grid-item-grid-container-percentage-rows.html: Added.
+        * fast/css-grid-layout/grid-item-overflow-expected.html: Added.
+        * fast/css-grid-layout/grid-item-overflow-paint-expected.html: Added.
+        * fast/css-grid-layout/grid-item-overflow-paint.html: Added.
+        * fast/css-grid-layout/grid-item-overflow.html: Added.
+        * fast/css-grid-layout/grid-item-paddings-and-writing-modes-expected.html: Added.
+        * fast/css-grid-layout/grid-item-paddings-and-writing-modes.html: Added.
+        * fast/css-grid-layout/grid-item-scroll-position-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-scroll-position.html: Added.
+        * fast/css-grid-layout/grid-margins-not-collapse-expected.html: Added.
+        * fast/css-grid-layout/grid-margins-not-collapse.html: Added.
+        * fast/css-grid-layout/grid-painting-item-overflow-expected.html: Added.
+        * fast/css-grid-layout/grid-painting-item-overflow.html: Added.
+        * fast/css-grid-layout/grid-painting-items-only-once-expected.html: Added.
+        * fast/css-grid-layout/grid-painting-items-only-once.html: Added.
+        * fast/css-grid-layout/grid-painting-respect-dom-order-expected.html: Added.
+        * fast/css-grid-layout/grid-painting-respect-dom-order.html: Added.
+        * fast/css-grid-layout/grid-painting-rtl-expected.html: Added.
+        * fast/css-grid-layout/grid-painting-rtl.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-01-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-01.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-02-b-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-02-b.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-02-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-02.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-03-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-03.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-04-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-04.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-05-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-05.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-06-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-06.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-07-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-07.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-01-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-01.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-02-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-02.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-03-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-03.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-04-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-04.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-05-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-05.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-06-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-06.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-07-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-horiz-07.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-two-dimensional-expected.txt: Added.
+        * fast/css-grid-layout/grid-self-baseline-two-dimensional.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-01-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-01.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-02-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-03-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-04-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-05-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-06-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-07-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-lr-07.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-01-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-01.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-02-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-03-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-04-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-05-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-06-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-07-expected.html: Added.
+        * fast/css-grid-layout/grid-self-baseline-vertical-rl-07.html: Added.
+        * fast/css-grid-layout/grid-shorthands-style-format-expected.txt: Added.
+        * fast/css-grid-layout/grid-shorthands-style-format.html: Added.
+        * fast/css-grid-layout/grid-strict-ordering-crash-2-expected.txt: Added.
+        * fast/css-grid-layout/grid-strict-ordering-crash-2.html: Added.
+        * fast/css-grid-layout/named-grid-areas-dynamic-with-media-query-expected.html: Added.
+        * fast/css-grid-layout/named-grid-areas-dynamic-with-media-query.html: Added.
+        * fast/css-grid-layout/negative-growth-share-as-infinity-crash-expected.txt: Added.
+        * fast/css-grid-layout/negative-growth-share-as-infinity-crash.html: Added.
+        * fast/css-grid-layout/painting-item-marginbox-overflowing-grid-area-expected.html: Added.
+        * fast/css-grid-layout/painting-item-marginbox-overflowing-grid-area.html: Added.
+        * fast/css-grid-layout/positioned-grid-container-item-percentage-size-expected.html: Added.
+        * fast/css-grid-layout/positioned-grid-container-item-percentage-size.html: Added.
+        * fast/css-grid-layout/positioned-grid-container-percentage-tracks-expected.txt: Added.
+        * fast/css-grid-layout/positioned-grid-container-percentage-tracks.html: Added.
+        * fast/css-grid-layout/preferred-width-computed-after-layout-expected.txt: Added.
+        * fast/css-grid-layout/preferred-width-computed-after-layout.html: Added.
+        * fast/css-grid-layout/quirks-mode-percent-resolution-grid-item-expected.txt: Added.
+        * fast/css-grid-layout/quirks-mode-percent-resolution-grid-item.html: Added.
+        * fast/css-grid-layout/resources/blue-100x50.png: Added.
+        * fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
+        (testGridPositionDefinitionsValues):
+        * fast/css-grid-layout/scrolled-grid-painting-expected.html: Added.
+        * fast/css-grid-layout/scrolled-grid-painting-overflow-expected.html: Added.
+        * fast/css-grid-layout/scrolled-grid-painting-overflow.html: Added.
+        * fast/css-grid-layout/scrolled-grid-painting.html: Added.
+        * fast/css-grid-layout/setting-node-properties-to-null-during-layout-should-not-crash-expected.txt: Added.
+        * fast/css-grid-layout/setting-node-properties-to-null-during-layout-should-not-crash.html: Added.
+        * fast/css-grid-layout/stale-grid-layout-2-expected.txt: Added.
+        * fast/css-grid-layout/stale-grid-layout-expected.txt: Added.
+        * fast/css-grid-layout/vertical-align-do-not-effect-grid-items-expected.html: Added.
+        * fast/css-grid-layout/vertical-align-do-not-effect-grid-items.html: Added.
+
 2018-11-12  Youenn Fablet  <youenn@apple.com>
 
         RealtimeOutgoing A/V sources should observe their sources only if having a sink
 2018-11-12  Youenn Fablet  <youenn@apple.com>
 
         RealtimeOutgoing A/V sources should observe their sources only if having a sink
index 2d71db9..0c32529 100644 (file)
@@ -602,6 +602,38 @@ webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-
 webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html [ ImageOnlyFailure ]
 webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html [ ImageOnlyFailure ]
 webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html [ ImageOnlyFailure ]
 webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html [ ImageOnlyFailure ]
 webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html [ ImageOnlyFailure ]
 webkit.org/b/145566 imported/w3c/web-platform-tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html [ ImageOnlyFailure ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-01.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-02-b.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-02.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-03.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-04.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-05.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-06.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-07.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-01.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-02.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-03.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-04.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-05.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-06.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-horiz-07.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-01.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-lr-07.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-01.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-vertical-rl-07.html [ Skip ]
+webkit.org/b/145566 fast/css-grid-layout/grid-self-baseline-two-dimensional.html [ Failure ]
+webkit.org/b/145566 fast/css-grid-layout/grid-align-baseline.html [ Failure ]
+webkit.org/b/145566 fast/css-grid-layout/grid-align-baseline-vertical.html [ Failure ]
 webkit.org/b/191365 imported/w3c/web-platform-tests/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html [ ImageOnlyFailure ]
 webkit.org/b/191365 imported/w3c/web-platform-tests/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html [ ImageOnlyFailure ]
 webkit.org/b/191367 imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html [ ImageOnlyFailure ]
 webkit.org/b/191365 imported/w3c/web-platform-tests/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html [ ImageOnlyFailure ]
 webkit.org/b/191365 imported/w3c/web-platform-tests/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html [ ImageOnlyFailure ]
 webkit.org/b/191367 imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html [ ImageOnlyFailure ]
@@ -609,6 +641,11 @@ webkit.org/b/191460 imported/w3c/web-platform-tests/css/css-grid/grid-items/anon
 webkit.org/b/191461 imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-001.html [ ImageOnlyFailure ]
 webkit.org/b/191462 imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html [ ImageOnlyFailure ]
 webkit.org/b/191463 imported/w3c/web-platform-tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html
 webkit.org/b/191461 imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-subitems-001.html [ ImageOnlyFailure ]
 webkit.org/b/191462 imported/w3c/web-platform-tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html [ ImageOnlyFailure ]
 webkit.org/b/191463 imported/w3c/web-platform-tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html
+webkit.org/b/191473 fast/css-grid-layout/grid-crash-out-of-flow-positioned-element.html [ Crash ]
+webkit.org/b/149890 fast/css-grid-layout/grid-shorthands-style-format.html [ Failure ]
+webkit.org/b/191506 fast/css-grid-layout/grid-item-scroll-position.html [ Failure ]
+webkit.org/b/191507 fast/css-grid-layout/positioned-grid-container-percentage-tracks.html [ Failure ]
+webkit.org/b/191508 fast/css-grid-layout/crash-large-positions.html [ Skip ]
 
 # Flaky tests at import time
 imported/w3c/web-platform-tests/css/css-scoping/css-scoping-shadow-host-namespace.html [ ImageOnlyFailure ]
 
 # Flaky tests at import time
 imported/w3c/web-platform-tests/css/css-scoping/css-scoping-shadow-host-namespace.html [ ImageOnlyFailure ]
diff --git a/LayoutTests/fast/css-grid-layout/changing-content-property-on-nested-grid-should-not-crash-expected.txt b/LayoutTests/fast/css-grid-layout/changing-content-property-on-nested-grid-should-not-crash-expected.txt
new file mode 100644 (file)
index 0000000..790457b
--- /dev/null
@@ -0,0 +1,3 @@
+This test PASSES if it does NOT CRASH.
+
+
diff --git a/LayoutTests/fast/css-grid-layout/changing-content-property-on-nested-grid-should-not-crash.html b/LayoutTests/fast/css-grid-layout/changing-content-property-on-nested-grid-should-not-crash.html
new file mode 100644 (file)
index 0000000..9d20f2a
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+</script>
+<style>
+.grid { display: grid; }
+.lastBaseline { justify-self: baseline; }
+.verticalLR { writing-mode: vertical-rl; }
+.content { content: ""; }
+</style>
+<p>This test PASSES if it does NOT CRASH.</p>
+<div class="grid">
+   <div class="grid">
+      <div id="item" class="lastBaseline verticalLR"></div>
+   </div>
+</div>
+<script>
+document.body.offsetLeft;
+item.classList.add("content");
+</script>
+
diff --git a/LayoutTests/fast/css-grid-layout/column-property-should-not-apply-on-grid-container-expected.html b/LayoutTests/fast/css-grid-layout/column-property-should-not-apply-on-grid-container-expected.html
new file mode 100644 (file)
index 0000000..10a1bb6
--- /dev/null
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid, .inline-grid
+{
+    font-family: Ahem;
+    width: 20em;
+    font-kerning: none;
+}
+</style>
+
+<body>
+
+<div class='grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+<div class='inline-grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/column-property-should-not-apply-on-grid-container.html b/LayoutTests/fast/css-grid-layout/column-property-should-not-apply-on-grid-container.html
new file mode 100644 (file)
index 0000000..de7fb18
--- /dev/null
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid, .inline-grid
+{
+    font-family: Ahem;
+    width: 20em;
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+
+    -webkit-column-gap: 100px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 100px; /* Firefox */
+    column-gap: 100px;
+}
+</style>
+
+<body>
+
+<div class='grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+<div class='inline-grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/crash-large-positions-expected.txt b/LayoutTests/fast/css-grid-layout/crash-large-positions-expected.txt
new file mode 100644 (file)
index 0000000..e69de29
diff --git a/LayoutTests/fast/css-grid-layout/crash-large-positions.html b/LayoutTests/fast/css-grid-layout/crash-large-positions.html
new file mode 100644 (file)
index 0000000..b492516
--- /dev/null
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Test using huge values for grid-column-* and grid-row-*</title>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+
+<div style="display: grid;">
+    <div id="item" style="grid-column-start: 5000000000; grid-column-end: -5000000000; grid-row-start: 5000000000; grid-row-end: -5000000000;"></div>
+</div>
+
+<script>
+ test(function() {
+     testGridPositionDefinitionsValues(document.getElementById("item"), "1000", "-1000", "1000", "-1000");
+ }, "Test that setting and getting grid-column|row-start|end to huge values is properly clamped and does not make the renderer crash.");
+</script>
diff --git a/LayoutTests/fast/css-grid-layout/fixed-width-intrinsic-width-should-exclude-scrollbar-width-in-grid-expected.txt b/LayoutTests/fast/css-grid-layout/fixed-width-intrinsic-width-should-exclude-scrollbar-width-in-grid-expected.txt
new file mode 100644 (file)
index 0000000..4efeec8
--- /dev/null
@@ -0,0 +1,4 @@
+This test checks that scrollbar width should not be added to the width of fixed-width grid items.
+
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/fixed-width-intrinsic-width-should-exclude-scrollbar-width-in-grid.html b/LayoutTests/fast/css-grid-layout/fixed-width-intrinsic-width-should-exclude-scrollbar-width-in-grid.html
new file mode 100644 (file)
index 0000000..461a684
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    grid-template-columns: 400px 500px;
+    grid-template-rows: 200px 300px;
+}
+
+.gridItemScrollOverflow {
+    width: 50px;
+    height: 50px;
+    overflow: scroll;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that scrollbar width should not be added to the width of fixed-width grid items.</p>
+
+<div class="grid">
+    <div class="firstRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+    <div class="firstRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+    <div class="secondRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+    <!-- Grid item itself being a grid container-->
+    <div class="grid secondRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items-expected.txt b/LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items-expected.txt
new file mode 100644 (file)
index 0000000..2f786d4
--- /dev/null
@@ -0,0 +1,3 @@
+This test checks that the grid's items are not affected by the 'float' and 'clear' properties.
+
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items.html b/LayoutTests/fast/css-grid-layout/floating-not-effect-on-grid-items.html
new file mode 100644 (file)
index 0000000..9799d56
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+.container {
+    background-color:grey;
+}
+
+.gridItem {
+    width: 50px;
+    height: 50px;
+}
+</style>
+<body onload="checkLayout('.container')">
+
+<p>This test checks that the grid's items are not affected by the 'float' and 'clear' properties.</p>
+
+<div style="position: relative">
+    <div class="container grid justifyContentStart">
+        <div style="float: right;" class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div style="float: left;" class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div style="float: left;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div style="clear: both;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+        <div style="float: left;" class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-align-baseline-expected.txt b/LayoutTests/fast/css-grid-layout/grid-align-baseline-expected.txt
new file mode 100644 (file)
index 0000000..1e86877
--- /dev/null
@@ -0,0 +1,15 @@
+ahem
+
+
+
+ahem
+
+
+
+baseline1 and baseline2 should have the same baseline.baseline4 and baseline5 should be below baseline6.
+
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical-expected.txt b/LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical-expected.txt
new file mode 100644 (file)
index 0000000..158583e
--- /dev/null
@@ -0,0 +1,25 @@
+ahem
+
+
+
+ahem
+
+
+
+ahem
+
+
+
+ahem
+
+
+
+baseline1 and baseline2 should have the same baseline.
+baseline4 and baseline5 should be below baseline6.
+
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
+PASS .grid 5 
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical.html b/LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical.html
new file mode 100644 (file)
index 0000000..7b7e4fb
--- /dev/null
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    height: 600px;
+    grid-auto-columns: 1fr;
+    margin-bottom: 20px;
+    position: relative;
+    writing-mode: vertical-rl;
+    text-orientation: sideways-right;
+}
+
+.grid :nth-child(1) { background-color: brown; }
+.grid :nth-child(2) { background-color: green; }
+.grid :nth-child(3) { background-color: red; }
+.grid :nth-child(4) { background-color: yellow; }
+.grid :nth-child(5) { background-color: purple; }
+.grid :nth-child(6) { background-color: orange; }
+.grid :nth-child(7) { background-color: lime; }
+.grid :nth-child(8) { background-color: lightblue; }
+.grid :nth-child(9) { background-color: darkred; }
+.grid :nth-child(10) { background-color: gold; }
+.grid :nth-child(11) { background-color: salmon; }
+
+.firstRowThirdColumn {
+    grid-row: 1;
+    grid-column: 3;
+}
+.firstRowFourthColumn {
+    grid-row: 1;
+    grid-column: 4;
+}
+.firstRowFifthColumn {
+    grid-row: 1;
+    grid-column: 5;
+}
+.grid > div {
+    min-width: 0px;
+}
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<div class="grid">
+    <div data-expected-width="20" data-offset-x="70" class="firstRowFirstColumn alignSelfBaseline" style="width: 20px;"></div>
+    <div data-expected-width="10" data-offset-x="70" class="firstRowSecondColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 10px;"></div>
+    <div data-expected-width="10" data-offset-x="70" class="firstRowThirdColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 0;"></div>
+    <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid">
+  <div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline2" class="firstRowSecondColumn-one alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div id="baseline3" data-expected-width="50" class="firstRowFourthColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid">
+  <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid" style="-webkit-writing-mode: vertical-lr">
+  <div id="baseline6" data-offset-x="18" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline7" data-offset-x="18" class="firstRowSecondColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid" style="-webkit-writing-mode: vertical-lr">
+  <div id="baseline8" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline9" class="firstRowSecondColumn alignSelfBaseline"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
+</div>
+
+<div id="results"></div>
+
+<script>
+function additionalBaselineChecks()
+{
+    var baseline1 = document.getElementById("baseline1");
+    var baseline2 = document.getElementById("baseline2");
+    var baseline3 = document.getElementById("baseline3");
+    logIfFalse(baseline1.offsetLeft == baseline2.offsetLeft,
+               "baseline1 and baseline2 should have the same baseline.");
+    logIfFalse(baseline3.offsetLeft + baseline3.offsetWidth > 75,
+               "baseline3 should be above the center align-itemsed item.");
+
+    var baseline4 = document.getElementById("baseline4");
+    var baseline5 = document.getElementById("baseline5");
+    logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth == baseline5.offsetLeft + baseline5.offsetWidth,
+               "baseline4 and baseline5 should be right aligned with each other.");
+    logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth < 100,
+               "baseline4 and baseline5 should be below baseline6.");
+
+    var baseline6 = document.getElementById("baseline6");
+    var baseline7 = document.getElementById("baseline7");
+    logIfFalse(baseline6.offsetLeft == baseline7.offsetLeft,
+               "baseline6 and baseline7 should have the same baseline.");
+
+    var baseline8 = document.getElementById("baseline8");
+    var baseline9 = document.getElementById("baseline9");
+    logIfFalse(baseline8.offsetLeft == baseline9.offsetLeft,
+               "baseline8 and baseline9 should be left aligned with each other.");
+
+}
+
+function logIfFalse(condition, msg)
+{
+    if (!condition)
+        document.getElementById("results").innerHTML += msg + "<br/>";
+}
+
+additionalBaselineChecks();
+</script>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-align-baseline.html b/LayoutTests/fast/css-grid-layout/grid-align-baseline.html
new file mode 100644 (file)
index 0000000..c442c24
--- /dev/null
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    width: 600px;
+    grid-auto-columns: 1fr;
+    position: relative;
+    margin-bottom: 20px;
+    font: 20px/1 Ahem;
+}
+
+.grid :nth-child(1) { background-color: blue; }
+.grid :nth-child(2) { background-color: green; }
+.grid :nth-child(3) { background-color: red; }
+.grid :nth-child(4) { background-color: yellow; }
+.grid :nth-child(5) { background-color: purple; }
+.grid :nth-child(6) { background-color: orange; }
+.grid :nth-child(7) { background-color: lime; }
+.grid :nth-child(8) { background-color: lightblue; }
+.grid :nth-child(9) { background-color: darkred; }
+.grid :nth-child(10) { background-color: gold; }
+.grid :nth-child(11) { background-color: salmon; }
+
+.firstRowThirdColumn {
+    grid-row: 1;
+    grid-column: 3;
+}
+.firstRowFourthColumn {
+    grid-row: 1;
+    grid-column: 4;
+}
+.firstRowFifthColumn {
+    grid-row: 1;
+    grid-column: 5;
+}
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<div class="grid alignItemsBaseline">
+    <div style="margin: 40px 0px;" class="firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
+    <div style="margin: auto 0px 0px;" class="firstRowSecondColumn" data-offset-x="200" data-offset-y="80" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
+    <div style="margin: 20px 0px;" class="firstRowThirdColumn" data-offset-x="400" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
+</div>
+
+<div class="grid">
+    <div data-expected-height="20" data-offset-y="20" class="firstRowFirstColumn alignSelfBaseline" style="height: 20px;"></div>
+    <div data-expected-height="10" data-offset-y="30" class="firstRowSecondColumn alignSelfBaseline" style="height: 10px; margin: 30px 0 10px;"></div>
+    <div data-expected-height="10" data-offset-y="30" class="firstRowThirdColumn alignSelfBaseline" style="height: 10px; margin: 20px 0 0;"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div>
+</div>
+
+<div class="grid">
+    <div id="baseline1" class="firstRowFirstColumn" style="align-self: baseline;">ahem</div>
+    <div id="baseline2" data-offset-y="0" class="firstRowSecondColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
+    <div data-expected-height="50" data-offset-y="25" class="firstRowThirdColumn alignSelfCenter"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
+    <div id="baseline3" data-expected-height="50" class="firstRowFourthColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFifthColumn" style="height: 100px;"></div>
+</div>
+
+<div class="grid">
+    <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+    <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
+    <div data-expected-height="50" data-offset-y="0" class="firstRowThirdColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div>
+</div>
+
+<div id="results"></div>
+
+<script>
+function additionalBaselineChecks()
+{
+    var baseline1 = document.getElementById("baseline1");
+    var baseline2 = document.getElementById("baseline2");
+    var baseline3 = document.getElementById("baseline3");
+    logIfFalse(baseline1.offsetTop + baseline1.offsetHeight == baseline2.offsetTop + baseline2.offsetHeight,
+               "baseline1 and baseline2 should have the same baseline.");
+    logIfFalse(baseline3.offsetTop < 25,
+               "baseline3 should be above the center align-selfed item.");
+
+    var baseline4 = document.getElementById("baseline4");
+    var baseline5 = document.getElementById("baseline5");
+    logIfFalse(baseline4.offsetTop == baseline5.offsetTop,
+               "baseline4 and baseline5 should be top aligned with each other.");
+    logIfFalse(baseline4.offsetTop > 0,
+               "baseline4 and baseline5 should be below baseline6.");
+}
+
+function logIfFalse(condition, msg)
+{
+    if (!condition)
+        document.getElementById("results").innerText += msg;
+}
+
+additionalBaselineChecks();
+</script>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-repeat-inherit-initial-crash-expected.txt b/LayoutTests/fast/css-grid-layout/grid-auto-repeat-inherit-initial-crash-expected.txt
new file mode 100644 (file)
index 0000000..16ed769
--- /dev/null
@@ -0,0 +1,3 @@
+The test PASS if it does not trigger an ASSERT on Debug builds.
+
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-repeat-inherit-initial-crash.html b/LayoutTests/fast/css-grid-layout/grid-auto-repeat-inherit-initial-crash.html
new file mode 100644 (file)
index 0000000..634afa3
--- /dev/null
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.autoFillColumns { grid-template-columns: 100px repeat(auto-fill, 50px); }
+.autoFitRows { grid-template-rows: 100px repeat(auto-fit, 50px); }
+
+</style>
+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+</script>
+<p>The test PASS if it does not trigger an ASSERT on Debug builds.</p>
+<div class="grid autoFillColumns" style="grid-template-columns: inherit;">
+<div class="grid autoFitRows" style="grid-template-rows: initial;">
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-repeat-positioned-container-expected.html b/LayoutTests/fast/css-grid-layout/grid-auto-repeat-positioned-container-expected.html
new file mode 100644 (file)
index 0000000..d376938
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    width: 100px;
+    grid: repeat(5, 20px) / repeat(4, 25px);
+    justify-content: start;
+    align-content: start;
+}
+
+.item {
+    background: green;
+}
+</style>
+
+<p>This test checks that auto repeat tracks are properly computed for a positioned grid container with a definite width and height.</p>
+
+<p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p>
+
+<pre id="log">grid: 20px 20px 20px 20px 20px / 25px 25px 25px 25px;</pre>
+
+<div class="wrapper">
+    <div id="grid" class="grid">
+        <div class="item" style="grid-area: 1 / 1;"></div>
+        <div class="item" style="grid-area: 2 / 2;"></div>
+        <div class="item" style="grid-area: 3 / 3;"></div>
+        <div class="item" style="grid-area: 4 / 4;"></div>
+        <div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div>
+    </div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-repeat-positioned-container.html b/LayoutTests/fast/css-grid-layout/grid-auto-repeat-positioned-container.html
new file mode 100644 (file)
index 0000000..94ecd9f
--- /dev/null
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.wrapper {
+    position: relative;
+    width: 100px;
+    height: 100px;
+}
+
+.grid {
+    position: absolute;
+    left: 0; right: 0; top: 0; bottom: 0;
+    grid: repeat(auto-fill, 20px) / repeat(auto-fill, 25px);
+    justify-content: start;
+    align-content: start;
+}
+
+.item {
+    background: green;
+}
+</style>
+
+<p>This test checks that auto repeat tracks are properly computed for a positioned grid container with a definite width and height.</p>
+
+<p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p>
+
+<pre id="log"></pre>
+
+<div class="wrapper">
+    <div id="grid" class="grid">
+        <div class="item" style="grid-area: 1 / 1;"></div>
+        <div class="item" style="grid-area: 2 / 2;"></div>
+        <div class="item" style="grid-area: 3 / 3;"></div>
+        <div class="item" style="grid-area: 4 / 4;"></div>
+        <div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div>
+    </div>
+</div>
+
+<script>
+    var log = document.getElementById("log");
+
+    var grid = document.getElementById("grid");
+    var computedStyle = getComputedStyle(grid);
+
+    log.innerHTML = "grid: " + computedStyle.getPropertyValue("grid-template-rows") + " / " + computedStyle.getPropertyValue("grid-template-columns") + ";";
+</script>
diff --git a/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio-expected.txt b/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio-expected.txt
new file mode 100644 (file)
index 0000000..9518dc8
--- /dev/null
@@ -0,0 +1,35 @@
+
+PASS .container 1 
+PASS .container 2 
+PASS .container 3 
+PASS .container 4 
+PASS .container 5 
+PASS .container 6 
+PASS .container 7 
+PASS .container 8 
+PASS .container 9 
+PASS .container 10 
+PASS .container 11 
+PASS .container 12 
+PASS .container 13 
+PASS .container 14 
+This test shows how min-width|height:auto is computed for items with intrinisc aspect ratios
+
+Check that width respects the intrinsic aspect ratio when specifying the height
+
+
+
+
+
+
+
+
+Check that height respects the intrinsic aspect ratio when specifying the width
+
+
+
+
+
+
+
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio.html b/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio.html
new file mode 100644 (file)
index 0000000..e8d0480
--- /dev/null
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<style>
+.container {
+    border: 5px solid orange;
+    display: grid;
+}
+</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')">
+<div id="log"></div>
+
+<p>This test shows how min-width|height:auto is computed for items with intrinisc aspect ratios</p>
+
+<p>Check that width respects the intrinsic aspect ratio when specifying the height</p>
+<div class="container min-content" data-expected-width="60" data-expected-height="35">
+    <img src="resources/blue-100x50.png" style="height: 25px;" data-expected-width="50" data-expected-height="25"/>
+</div>
+
+<div class="container min-content" data-expected-width="150" data-expected-height="80">
+    <img src="resources/blue-100x50.png" style="min-height: 70px;" data-expected-width="140" data-expected-height="70"/>
+</div>
+
+<div class="container min-content" data-expected-width="90" data-expected-height="50">
+    <img src="resources/blue-100x50.png" style="max-height: 40px;" data-expected-width="80" data-expected-height="40"/>
+</div>
+
+<div class="container min-content" data-expected-width="70" data-expected-height="40">
+    <img src="resources/blue-100x50.png" style="height: 25px; min-height: 30px;" data-expected-width="60" data-expected-height="30"/>
+</div>
+
+<div class="container min-content" data-expected-width="30" data-expected-height="20">
+    <img src="resources/blue-100x50.png" style="height: 25px; max-height: 10px;" data-expected-width="20" data-expected-height="10"/>
+</div>
+
+<div class="container min-content" data-expected-width="50" data-expected-height="35">
+    <img src="resources/blue-100x50.png" style="height: 25px; max-width: 40px;" data-expected-width="40" data-expected-height="25"/>
+</div>
+
+<div class="container min-content" data-expected-width="60" data-expected-height="40">
+    <img src="resources/blue-100x50.png" style="height: 25px; min-height: 30px; max-width: 50px;" data-expected-width="50" data-expected-height="30"/>
+</div>
+
+
+<p>Check that height respects the intrinsic aspect ratio when specifying the width</p>
+<div class="container min-content" data-expected-width="60" data-expected-height="35">
+    <img src="resources/blue-100x50.png" style="width: 50px;" data-expected-width="50" data-expected-height="25"/>
+</div>
+
+<div class="container min-content" data-expected-width="70" data-expected-height="40">
+    <img src="resources/blue-100x50.png" style="max-width: 60px;" data-expected-width="60" data-expected-height="30"/>
+</div>
+
+<div class="container min-content" data-expected-width="130" data-expected-height="70">
+    <img src="resources/blue-100x50.png" style="min-width: 120px;" data-expected-width="120" data-expected-height="60"/>
+</div>
+
+<div class="container min-content" data-expected-width="90" data-expected-height="50">
+    <img src="resources/blue-100x50.png" style="width: 60px; min-width: 80px;" data-expected-width="80" data-expected-height="40"/>
+</div>
+
+<div class="container min-content" data-expected-width="34" data-expected-height="22">
+    <img src="resources/blue-100x50.png" style="width: 24px; max-width: 40px;" data-expected-width="24" data-expected-height="12"/>
+</div>
+
+<div class="container min-content" data-expected-width="130" data-expected-height="35">
+    <img src="resources/blue-100x50.png" style="width: 120px; max-height: 25px;" data-expected-width="120" data-expected-height="25"/>
+</div>
+
+<div class="container min-content" data-expected-width="35" data-expected-height="110">
+    <img src="resources/blue-100x50.png" style="width: 25px; min-height: 100px;" data-expected-width="25" data-expected-height="100"/>
+</div>
+
+</body>
index 75dfc59..8518ca4 100644 (file)
@@ -1,42 +1,43 @@
+
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
+PASS .grid 5 
+PASS .grid 6 
+PASS .grid 7 
+PASS .grid 8 
+PASS .grid 9 
+PASS .grid 10 
+PASS .grid 11 
+PASS .grid 12 
+PASS .grid 13 
+PASS .grid 14 
+PASS .grid 15 
+PASS .grid 16 
+PASS .grid 17 
+PASS .grid 18 
+PASS .grid 19 
+PASS .grid 20 
 This test checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes.
 
 XX X
 This test checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes.
 
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
 XX X
 XX X
-PASS
index eb54c6f..36bf2fe 100644 (file)
     grid-template-columns: 50% 100px;
 }
 </style>
     grid-template-columns: 50% 100px;
 }
 </style>
-<script src="../../resources/check-layout.js"></script>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
 <body onload="checkLayout('.grid')">
 <body onload="checkLayout('.grid')">
+<div id="log"></div>
 
 <p>This test checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes.</p>
 
 
 <p>This test checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes.</p>
 
diff --git a/LayoutTests/fast/css-grid-layout/grid-container-percentage-rows-expected.txt b/LayoutTests/fast/css-grid-layout/grid-container-percentage-rows-expected.txt
new file mode 100644 (file)
index 0000000..429e37d
--- /dev/null
@@ -0,0 +1,52 @@
+
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
+PASS .grid 5 
+PASS .grid 6 
+PASS .grid 7 
+PASS .grid 8 
+PASS .grid 9 
+PASS .grid 10 
+PASS .grid 11 
+PASS .grid 12 
+PASS .grid 13 
+PASS .grid 14 
+PASS .grid 15 
+PASS .grid 16 
+PASS .grid 17 
+PASS .grid 18 
+PASS .grid 19 
+PASS .grid 20 
+PASS .grid 21 
+PASS .grid 22 
+PASS .grid 23 
+PASS .grid 24 
+This test checks that percentage rows behave as "auto" if the height of the grid container is indefinite.
+
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+XX X
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-container-percentage-rows.html b/LayoutTests/fast/css-grid-layout/grid-container-percentage-rows.html
new file mode 100644 (file)
index 0000000..49c8bcd
--- /dev/null
@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.wrapper {
+    position: relative;
+    clear: both;
+}
+
+.grid {
+    font: 10px/1 Ahem;
+    width: fit-content;
+}
+
+.abspos {
+    position: absolute;
+}
+
+.fixedSize {
+    width: 200px;
+    height: 200px;
+}
+
+.oneRow100 {
+    grid-template-rows: 100%;
+}
+
+.oneRow50 {
+    grid-template-rows: 50%;
+}
+
+.twoRows {
+    grid-template-rows: 100px 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('.grid')">
+<div id="log"></div>
+
+<p>This test checks that percentage rows behave as "auto" if the height of the grid container is indefinite.</p>
+
+<div class="wrapper">
+    <div class="grid oneRow100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fixedSize oneRow100" data-expected-width="200" data-expected-height="200">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos oneRow100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content oneRow100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content oneRow100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content oneRow100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid oneRow50" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fixedSize oneRow50" data-expected-width="200" data-expected-height="200">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos oneRow50" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content oneRow50" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content oneRow50" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content oneRow50" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid twoRows" data-expected-width="40" data-expected-height="110">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos twoRows" data-expected-width="40" data-expected-height="110">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content twoRows" data-expected-width="40" data-expected-height="110">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="110">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content twoRows" data-expected-width="40" data-expected-height="110">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid twoRows" data-expected-width="40" data-expected-height="100">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos twoRows" data-expected-width="40" data-expected-height="100">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content twoRows" data-expected-width="40" data-expected-height="100">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="100">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content twoRows" data-expected-width="40" data-expected-height="100">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
+        </div>
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin-expected.html b/LayoutTests/fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin-expected.html
new file mode 100644 (file)
index 0000000..9ce866a
--- /dev/null
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+body {
+   position: relative;
+   height: 100vh;
+}
+.item1 {
+   width: fit-content;
+   margin: 0px auto;
+}
+.item2 {
+   position: absolute;
+   bottom: 0;
+   background-color: cyan;
+   height: 50px;
+   width: 100%;
+}
+</style>
+<div class="item1">item1</div>
+<div class="item2">item2</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin.html b/LayoutTests/fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin.html
new file mode 100644 (file)
index 0000000..8d118c2
--- /dev/null
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="match" href="grid-container-scroll-accounts-for-auto-margin-expected.html">
+<style>
+body {
+   display: grid;
+   grid-template-columns: auto;
+   grid-template-rows: 1fr auto;
+   height: 100vh;
+}
+.item1 {
+   margin: 0px auto;
+}
+.item2 {
+   background-color: cyan;
+   height: 50px;
+}
+</style>
+<div class="item1">item1</div>
+<div class="item2">item2</div>
+<script>
+    document.body.style = "overflow: hidden;";
+    document.body.offsetLeft;
+    document.body.style = "overflow: auto;";
+</script>
index e357cf3..e2d6a39 100644 (file)
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <!DOCTYPE html>
-<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <style>
 html {
    overflow-x: scroll;
 }
 <style>
 html {
    overflow-x: scroll;
 }
-.container {
+.grid {
+   width: fit-content;
    overflow-y: scroll;
    overflow-x: scroll;
 }
    overflow-y: scroll;
    overflow-x: scroll;
 }
@@ -15,6 +15,6 @@ html {
 }
 </style>
 <p>This test passes if you see a 100x100px green box and scrollbars are disabled.</p>
 }
 </style>
 <p>This test passes if you see a 100x100px green box and scrollbars are disabled.</p>
-<div class="container fit-content">
+<div class="grid">
     <div class="item">item</div>
 </div>
     <div class="item">item</div>
 </div>
index 0a8182b..4e63adc 100644 (file)
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <!DOCTYPE html>
-<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <style>
 html {
    overflow-x: scroll;
 }
 <style>
 html {
    overflow-x: scroll;
 }
-.container {
+.grid {
    display: grid;
    display: grid;
+   width: fit-content;
    overflow-y: scroll;
    overflow-x: scroll;
 }
    overflow-y: scroll;
    overflow-x: scroll;
 }
@@ -16,6 +16,6 @@ html {
 }
 </style>
 <p>This test passes if you see a 100x100px green box and scrollbars are disabled.</p>
 }
 </style>
 <p>This test passes if you see a 100x100px green box and scrollbars are disabled.</p>
-<div class="container fit-content">
+<div class="grid">
     <div class="item">item</div>
 </div>
     <div class="item">item</div>
 </div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width-expected.txt b/LayoutTests/fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width-expected.txt
new file mode 100644 (file)
index 0000000..ceea9f3
--- /dev/null
@@ -0,0 +1,5 @@
+Test that scrollbar width is added to the width of the grid container.
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width.html b/LayoutTests/fast/css-grid-layout/grid-container-width-should-include-scroll-bar-width.html
new file mode 100644 (file)
index 0000000..00b4cd0
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid, .inline-grid {
+    overflow: scroll;
+}
+.gridItem {
+    width: 100px;
+    height: 100px;
+    background: green;
+}
+</style>
+<script src='../../resources/check-layout.js'></script>
+
+<body onload="checkLayout('.grid'); checkLayout('.inline-grid');">
+
+Test that scrollbar width is added to the width of the grid container.
+<div class='grid fit-content' data-expected-width='115'>
+    <span class='gridItem'></span>
+</div>
+<div class='grid fit-content' style='left: 150px; overflow-y: hidden' data-expected-width='100'>
+    <span class='gridItem'></span>
+</div>
+<div class='inline-grid fit-content' style='left: 300px' data-expected-width='115'>
+    <span class='gridItem'></span>
+</div>
+<div class='inline-grid fit-content' style='left: 450px; overflow-y: hidden' data-expected-width='100'>
+    <span class='gridItem'></span>
+</div>
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-crash-huge-margins-and-min-height-max-content-expected.txt b/LayoutTests/fast/css-grid-layout/grid-crash-huge-margins-and-min-height-max-content-expected.txt
new file mode 100644 (file)
index 0000000..a395d71
--- /dev/null
@@ -0,0 +1,5 @@
+crbug.com/697317 - height >= 0 in LayoutBox.cpp
+
+This test has PASSED if it does not CRASH.
+
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-crash-huge-margins-and-min-height-max-content.html b/LayoutTests/fast/css-grid-layout/grid-crash-huge-margins-and-min-height-max-content.html
new file mode 100644 (file)
index 0000000..4d7aa7c
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<script>
+  if (window.testRunner)
+    testRunner.dumpAsText();
+</script>
+<style>
+  #grid {
+    display: grid;
+    grid: 100px / 100px;
+  }
+  #item {
+    padding: 10px;
+    margin: 50px 0px;
+    min-height: max-content;
+  }
+</style>
+<p>crbug.com/697317 - height &gt;= 0 in LayoutBox.cpp</p>
+<p>This test has PASSED if it does not CRASH.</p>
+<div id="grid">
+  <div id="item"></a>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-crash-out-of-flow-positioned-element-expected.txt b/LayoutTests/fast/css-grid-layout/grid-crash-out-of-flow-positioned-element-expected.txt
new file mode 100644 (file)
index 0000000..e69de29
diff --git a/LayoutTests/fast/css-grid-layout/grid-crash-out-of-flow-positioned-element.html b/LayoutTests/fast/css-grid-layout/grid-crash-out-of-flow-positioned-element.html
new file mode 100644 (file)
index 0000000..0135769
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<body style="display: inline-grid;">
+<style>
+.absolutelyPositioned { position: absolute; }
+</style>
+crbug.com/280451 - Heap-use-after-free in WebCore::LayoutGrid::computePreferredTrackWidth</br>
+This test has passed if it didn't crash.
+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+
+var cell = document.createElement("cell");
+cell.setAttribute("class", "absolutelyPositioned");
+document.body.appendChild(cell);
+window.scrollBy(98, 28);
+cell.setAttribute("class", "nonExistent");
+</script>
index 94919e9..467a133 100644 (file)
@@ -1,4 +1,4 @@
-webkit.org/b/169739 - [css-grid] Crash on debug removing a positioned child
+crbug.com/700383 - [css-grid] Grid layouts go mostly blank
 
 This test has PASSED if it does not CRASH on debug.
 
 
 This test has PASSED if it does not CRASH on debug.
 
index 79c0f90..c5afdf0 100644 (file)
@@ -3,11 +3,12 @@
   if (window.testRunner)
     testRunner.dumpAsText();
 </script>
   if (window.testRunner)
     testRunner.dumpAsText();
 </script>
-<p>webkit.org/b/169739 - [css-grid] Crash on debug removing a positioned child</p>
+<p>crbug.com/700383 - [css-grid] Grid layouts go mostly blank</p>
 <p>This test has PASSED if it does not CRASH on debug.</p>
 <div id="grid" style="display: grid;">
 <p>This test has PASSED if it does not CRASH on debug.</p>
 <div id="grid" style="display: grid;">
-  <!-- This grid item with some text is needed, otherwise RenderGrid::paintChildren()
-       won't be called after removing the positioned item. -->
+  <!-- This grid item with some text is needed,
+       otherwise LayoutGrid::paintChildren() won't be called
+       after removing the positioned item. -->
   <div>item</div>
 </div>
 <script>
   <div>item</div>
 </div>
 <script>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-before-anonymous-child-crash-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-before-anonymous-child-crash-expected.txt
new file mode 100644 (file)
index 0000000..ea87e3c
--- /dev/null
@@ -0,0 +1,3 @@
+This test checks that adding a new grid item before an already existing item wrapped by an anonymous block does not crash under ASAN.
+
+X
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-before-anonymous-child-crash.html b/LayoutTests/fast/css-grid-layout/grid-item-before-anonymous-child-crash.html
new file mode 100644 (file)
index 0000000..7d77de9
--- /dev/null
@@ -0,0 +1,16 @@
+<body>
+  <p>This test checks that adding a new grid item before an already existing item wrapped by an anonymous block does not crash under ASAN.</p>
+  <div id=grid style="display: grid; grid-auto-flow: stack;">X</div>
+</body>
+<script type="text/javascript">
+ if (window.testRunner)
+   testRunner.dumpAsText();
+
+ document.addEventListener("DOMContentLoaded", crash, false);
+
+ function crash() {
+   document.designMode = 'on';
+   window.getSelection().selectAllChildren(grid);
+   document.execCommand("Italic", null);
+ }
+</script>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-border-overflow-paint-expected.html b/LayoutTests/fast/css-grid-layout/grid-item-border-overflow-paint-expected.html
new file mode 100644 (file)
index 0000000..7ca8c08
--- /dev/null
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+    function onloadScrollTop() {
+        // Scroll until we see the grid item's border but not the grid item
+        window.scrollBy(0, -150);
+    }
+</script>
+</head>
+<body style="height: 1000px" onload="onloadScrollTop()">
+
+<div style="height: 200px; width: 100px; background-color:red">
+  <div style="height: 100px; width: 100px; background-color: orange"></div>
+  <div style="height: 100px; width: 100px; background-color: green"></div>
+</div>
+
+<div>There should be a 100px wide green box (grid item's border) above</div>
+
+<script>
+    window.scrollTo(0,300);
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-border-overflow-paint.html b/LayoutTests/fast/css-grid-layout/grid-item-border-overflow-paint.html
new file mode 100644 (file)
index 0000000..9804ce7
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+    .grid {
+        display: grid;
+        grid-template-rows: repeat(2, 100px);
+        grid-template-columns: 100px;
+        background-color: red;
+    }
+
+    .gridItem {
+        height: 100%;
+        width: 100%;
+        background-color: orange;
+    }
+</style>
+<script>
+    function onloadScrollTop() {
+        // Scroll until we see the grid item's border but not the grid item
+        window.scrollBy(0,-150);
+    }
+</script>
+</head>
+<body style="height: 1000px" onload="onloadScrollTop()">
+
+<div class="grid fit-content">
+  <div class="gridItem" style="grid-column: 1; grid-row: 1; border-bottom: 100px green solid;"></div>
+</div>
+
+<div>There should be a 100px wide green box (grid item's border) above</div>
+
+</body>
+<script>
+    window.scrollTo(0,300);
+</script>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch-expected.txt
new file mode 100644 (file)
index 0000000..246af92
--- /dev/null
@@ -0,0 +1,17 @@
+Test to verify that grid item's stretched size is reset when changing to a different alignment value.
+
+XXXXX
+
+PASS Checking stretched size before changing to self-start. 
+PASS Checking size after changing to self-start. 
+PASS Checking stretched size before changing to self-end. 
+PASS Checking size after changing to self-end. 
+PASS Checking stretched size before changing to start. 
+PASS Checking size after changing to start. 
+PASS Checking stretched size before changing to end. 
+PASS Checking size after changing to end. 
+PASS Checking stretched size before changing to center. 
+PASS Checking size after changing to center. 
+PASS Checking stretched size before changing to baseline. 
+PASS Checking size after changing to baseline. 
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch.html b/LayoutTests/fast/css-grid-layout/grid-item-change-alignment-from-stretch.html
new file mode 100644 (file)
index 0000000..09caa78
--- /dev/null
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+.grid {
+  position: relative;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 10px/1 Ahem;
+}
+</style>
+<p>Test to verify that grid item's stretched size is reset when changing to a different alignment value.</p>
+<div class="grid fit-content">
+  <div id="item">XXXXX</div>
+</div>
+<script>
+"use strict";
+var child = document.getElementById("item");
+const values = ['self-start', 'self-end', 'start', 'end', 'center', 'baseline'];
+values.forEach(function(value) {
+  child.style.alignSelf = 'stretch';
+  child.style.justifySelf = 'stretch';
+  test(function() {
+    assert_equals(child.offsetWidth, 100, "The width is not what it should:");
+    assert_equals(child.offsetHeight, 200, "The height is not what it should:");
+  }, "Checking stretched size before changing to " + value + ".");
+
+  child.style.alignSelf = value;
+  child.style.justifySelf = value;
+  test(function() {
+    assert_equals(child.offsetWidth, 50, "The width is not what it should:");
+    assert_equals(child.offsetHeight, 10, "The height is not what it should:");
+  }, "Checking size after changing to " + value + ".");
+});
+</script>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-grid-container-percentage-rows-expected.html b/LayoutTests/fast/css-grid-layout/grid-item-grid-container-percentage-rows-expected.html
new file mode 100644 (file)
index 0000000..563ca03
--- /dev/null
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<style>
+
+.wrapper {
+    width: 200px;
+    border: 5px solid;
+}
+
+.wrapper > div {
+    height: 100px;
+}
+
+.magenta {
+    background: magenta;
+}
+
+.cyan {
+    background: cyan;
+}
+
+</style>
+
+<p>This test checks that percentage rows are properly resolved for a grid container that is a stretched grid item.</p>
+<p>Test passes if you see a 200x200 box with top half cyan and bottom half magenta.</p>
+
+<div class="wrapper">
+    <div class="cyan"></div>
+    <div class="magenta"></div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-grid-container-percentage-rows.html b/LayoutTests/fast/css-grid-layout/grid-item-grid-container-percentage-rows.html
new file mode 100644 (file)
index 0000000..b77d9cc
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<style>
+
+.outerGrid {
+    display: grid;
+    width: 200px;
+    height: 200px;
+    border: 5px solid;
+    grid: 200px / 200px;
+    background: magenta;
+}
+
+.innerGrid {
+    display: grid;
+    grid: 50% / 1fr;
+}
+
+.gridItem {
+    background: cyan;
+}
+
+</style>
+
+<p>This test checks that percentage rows are properly resolved for a grid container that is a stretched grid item.</p>
+<p>Test passes if you see a 200x200 box with top half cyan and bottom half magenta.</p>
+
+<div class="outerGrid">
+    <div class="innerGrid">
+        <div class="gridItem"></div>
+    </div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-overflow-expected.html b/LayoutTests/fast/css-grid-layout/grid-item-overflow-expected.html
new file mode 100644 (file)
index 0000000..ebf4a16
--- /dev/null
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<style>
+.flex {
+  display: inline-flex;
+  border: thick solid;
+  height: 50px;
+  width: 50px;
+  margin: 50px;
+}
+
+.i1 {
+  color: cyan;
+  background: magenta;
+  font-size: 100px;
+}
+
+.auto { overflow: auto; }
+.hidden { overflow: hidden; }
+</style>
+
+<p>This test checks that implied minimum size of grid items is only applied if overflow is visible.</p>
+<p>The test passes if in the first grid the item overflows, in the second one it has scrollbars,
+and in the third one the item doesn't overflow but it doesn't have scrollbars.</p>
+
+<div class="flex" style="align-items: start;">
+  <div class="i1">X</div>
+</div>
+
+<div class="flex">
+  <div class="i1 auto">X</div>
+</div>
+
+<div class="flex">
+  <div class="i1 hidden">X</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-overflow-paint-expected.html b/LayoutTests/fast/css-grid-layout/grid-item-overflow-paint-expected.html
new file mode 100644 (file)
index 0000000..6682717
--- /dev/null
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    div {
+        height: 300px;
+        width: 300px;
+    }
+    .horizontallyAligned {
+        float: left;
+        width: 150px;
+    }
+    .grayBox {
+        background-color: gray;
+    }
+    .redBox {
+        background-color: red;
+    }
+    .blueBox {
+        background-color: blue;
+    }
+    .greenBox {
+        background-color: green;
+    }
+    .yellowBox {
+        background-color: yellow;
+    }
+    .orangeBox {
+        background-color: orange;
+    }
+</style>
+</head>
+<body>
+  <table cellpadding="0" cellspacing="0" border="0">
+    <tr>
+      <td><div class="grayBox"></div></td>
+      <td><div class="grayBox"></div></td>
+      <td><div class="yellowBox"></div></td>
+      <td><div class="grayBox"></div></td>
+      <td><div class="grayBox"></div></td>
+    </tr>
+    <tr>
+      <td><div class="grayBox"></div></td>
+      <td><div class="grayBox"></div></td>
+      <td><div class="yellowBox" style="height: 200px"></div><div class="grayBox" style="height: 100px"></div></td>
+      <td><div class="grayBox"></div></td>
+      <td><div class="grayBox"></div></td>
+    </tr>
+    <tr>
+      <td><div class="blueBox"></div></td>
+      <td><div class="blueBox horizontallyAligned"></div><div class="grayBox horizontallyAligned"></div></td>
+      <td><div class="redBox"></div></td>
+      <td><div class="grayBox horizontallyAligned"></div><div class="orangeBox horizontallyAligned"></div></td>
+      <td><div class="orangeBox"></div></td>
+    </tr>
+    <tr>
+      <td><div class="grayBox"></div></td>
+      <td><div class="grayBox"></div></td>
+      <td><div class="grayBox" style="height: 100px"></div><div class="greenBox" style="height: 200px"></div></td>
+      <td><div class="grayBox"></div></td>
+      <td><div class="grayBox"></div></td>
+    </tr>
+    <tr>
+      <td><div class="grayBox"></div></td>
+      <td><div class="grayBox"></div></td>
+      <td><div class="greenBox"></div></td>
+      <td><div class="grayBox"></div></td>
+      <td><div class="grayBox"></div></td>
+    </tr>
+  </table>
+
+</body>
+<script>
+  window.scrollTo(400, 475);
+</script>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-overflow-paint.html b/LayoutTests/fast/css-grid-layout/grid-item-overflow-paint.html
new file mode 100644 (file)
index 0000000..c137e42
--- /dev/null
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+    .grid {
+        display: grid;
+        grid-template-rows: repeat(5, 300px);
+        grid-template-columns: repeat(5, 300px);
+        background-color: gray;
+    }
+
+    .overflowingHorizontalGridItemBlue {
+        background-color: blue;
+        height: 100%;
+        width: 450px;
+    }
+
+    .overflowingHorizontalGridItemOrange {
+        background-color: orange;
+        height: 100%;
+        width: 450px;
+    }
+
+    .overflowingVerticalGridItemGreen {
+        background-color: green;
+        height: 500px;
+        width: 100%;
+    }
+
+    .overflowingVerticalGridItemYellow {
+        background-color: yellow;
+        height: 500px;
+        width: 100%;
+    }
+    .gridItem {
+        background-color: red;
+        width: 100%;
+        height: 100%;
+    }
+
+</style>
+</head>
+<body>
+
+<div class="grid fit-content">
+  <div class="overflowingVerticalGridItemGreen" style="grid-column: 3; grid-row: 1; margin-bottom: -200px;"></div>
+  <div class="overflowingVerticalGridItemYellow" style="grid-column: 3; grid-row: 1; margin-bottom: -200px;"></div>
+
+  <div class="overflowingVerticalGridItemYellow" style="grid-column: 3; grid-row: 5; margin-top: -200px;"></div>
+  <div class="overflowingVerticalGridItemGreen" style="grid-column: 3; grid-row: 5; margin-top: -200px;"></div>
+
+  <div class="gridItem" style="grid-column: 3; grid-row: 3;"></div>
+
+  <div class="overflowingHorizontalGridItemOrange" style="grid-column: 1; grid-row: 3; margin-right: -150px;"></div>
+  <div class="overflowingHorizontalGridItemBlue" style="grid-column: 1; grid-row: 3; margin-right: -150px;"></div>
+
+  <div class="overflowingHorizontalGridItemBlue" style="grid-column: 5; grid-row: 3; margin-left: -150px;"></div>
+  <div class="overflowingHorizontalGridItemOrange" style="grid-column: 5; grid-row: 3; margin-left: -150px;"></div>
+
+</div>
+
+
+</body>
+<script>
+  window.scrollTo(400, 475);
+</script>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-overflow.html b/LayoutTests/fast/css-grid-layout/grid-item-overflow.html
new file mode 100644 (file)
index 0000000..bb7eaf1
--- /dev/null
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<style>
+.grid {
+  display: inline-grid;
+  border: thick solid;
+  height: 50px;
+  width: 50px;
+  margin: 50px;
+}
+
+.i1 {
+  color: cyan;
+  background: magenta;
+  font-size: 100px;
+}
+
+.auto { overflow: auto; }
+.hidden { overflow: hidden; }
+</style>
+
+<p>This test checks that implied minimum size of grid items is only applied if overflow is visible.</p>
+<p>The test passes if in the first grid the item overflows, in the second one it has scrollbars,
+and in the third one the item doesn't overflow but it doesn't have scrollbars.</p>
+
+<div class="grid">
+  <div class="i1">X</div>
+</div>
+
+<div class="grid">
+  <div class="i1 auto">X</div>
+</div>
+
+<div class="grid">
+  <div class="i1 hidden">X</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-paddings-and-writing-modes-expected.html b/LayoutTests/fast/css-grid-layout/grid-item-paddings-and-writing-modes-expected.html
new file mode 100644 (file)
index 0000000..2eb5ae4
--- /dev/null
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.block {
+    background-color: grey;
+    width: 80px;
+    height: 80px;
+    position: relative;
+    padding: 4px 8px 12px 16px;
+    margin-bottom: 4px;
+}
+
+.item {
+    font: 15px/1 Ahem;
+    background-color: green;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    width: 40px;
+    height: 20px;
+}
+</style>
+
+<body>
+    <div class="block">
+        <div class="item">X</div>
+    </div>
+    <div class="block verticalRL">
+        <div class="item">X</div>
+    </div>
+    <div class="block verticalLR">
+        <div class="item">X</div>
+    </div>
+    <div class="block directionRTL">
+        <div class="item">X</div>
+    </div>
+    <div class="block directionRTL verticalRL">
+        <div class="item">X</div>
+    </div>
+    <div class="block directionRTL verticalLR">
+        <div class="item">X</div>
+    </div>
+</body>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-paddings-and-writing-modes.html b/LayoutTests/fast/css-grid-layout/grid-item-paddings-and-writing-modes.html
new file mode 100644 (file)
index 0000000..b7f9897
--- /dev/null
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    grid-template-columns: 80px;
+}
+
+.block {
+    background-color: grey;
+    width: 80px;
+    height: 80px;
+    position: relative;
+    padding: 4px 8px 12px 16px;
+    margin-bottom: 4px;
+}
+
+.item {
+    font: 15px/1 Ahem;
+    background-color: green;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    width: 40px;
+    height: 20px;
+}
+</style>
+
+<body>
+    <div class="grid block">
+        <div class="item">X</div>
+    </div>
+    <div class="grid block verticalRL">
+        <div class="item">X</div>
+    </div>
+    <div class="grid block verticalLR">
+        <div class="item">X</div>
+    </div>
+    <div class="grid block directionRTL">
+        <div class="item">X</div>
+    </div>
+    <div class="grid block directionRTL verticalRL">
+        <div class="item">X</div>
+    </div>
+    <div class="grid block directionRTL verticalLR">
+        <div class="item">X</div>
+    </div>
+</body>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-scroll-position-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-scroll-position-expected.txt
new file mode 100644 (file)
index 0000000..462cf54
--- /dev/null
@@ -0,0 +1,3 @@
+
+PASS Checks that scroll position is kept when grid item content is modified. 
+BBB
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-scroll-position.html b/LayoutTests/fast/css-grid-layout/grid-item-scroll-position.html
new file mode 100644 (file)
index 0000000..abacb5b
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+#grid {
+  display: grid;
+  height: 300px;
+}
+#item {
+  overflow: scroll;
+  overflow-anchor: none;
+}
+#content {
+  height: 800px;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<div id="grid">
+  <div id="item">
+    <div id="content">AAA</div>
+  </div>
+</div>
+
+<script>
+onload = () => {
+  var item = document.querySelector("#item");
+  item.scrollTo(0, 200);
+  document.querySelector("#content").innerHTML = "BBB";
+  test(() => {
+    assert_equals(item.scrollTop, 200);
+  }, "Checks that scroll position is kept when grid item content is modified.");
+};
+</script>
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-margins-not-collapse-expected.html b/LayoutTests/fast/css-grid-layout/grid-margins-not-collapse-expected.html
new file mode 100644 (file)
index 0000000..cb8b7bc
--- /dev/null
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<head>
+<style>
+.basic {
+    background-color: grey;
+    height: 100px;
+    margin-top: 50px;
+}
+
+.item {
+    background-color: blue;
+    width: 50px;
+    height: 50px;
+    position: relative;
+    top: 20px;
+}
+</style>
+<div>This test checks that the grid's margins do not collapse with the margins of its contents.</div>
+<div class="basic">
+    <div class="item"></div>
+</div>
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-margins-not-collapse.html b/LayoutTests/fast/css-grid-layout/grid-margins-not-collapse.html
new file mode 100644 (file)
index 0000000..c2c49f1
--- /dev/null
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.basic {
+    background-color: grey;
+    height: 100px;
+    margin-top: 50px;
+}
+
+.item {
+    width: 50px;
+    height: 50px;
+    margin-top: 20px;
+}
+</style>
+<div>This test checks that the grid's margins do not collapse with the margins of its contents.</div>
+<div class="basic grid">
+    <div class="item firstRowFirstColumn"></div>
+</div>
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-painting-item-overflow-expected.html b/LayoutTests/fast/css-grid-layout/grid-painting-item-overflow-expected.html
new file mode 100644 (file)
index 0000000..5f8200c
--- /dev/null
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<p>This test verifies grid layout painting when the item has overflowing contents.</p>
+<p>This test passes if it matches the reference. You should see green and not red.</p>
+
+<iframe height="100px" width="200px" srcdoc="
+  <style>
+    body {
+      background: green;
+    }
+  </style>
+">
+</iframe>
+
+<iframe height="100px" width="200px" srcdoc="
+  <style>
+    body {
+      background: green;
+    }
+  </style>
+">
+</iframe>
diff --git a/LayoutTests/fast/css-grid-layout/grid-painting-item-overflow.html b/LayoutTests/fast/css-grid-layout/grid-painting-item-overflow.html
new file mode 100644 (file)
index 0000000..5f4a561
--- /dev/null
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="match" href="grid-painting-item-overflow-expected.html">
+
+<p>This test verifies grid layout painting when the item has overflowing contents.</p>
+<p>This test passes if it matches the reference. You should see green and not red.</p>
+
+<iframe height="100px" width="200px" srcdoc="
+  <style>
+    body {
+      background: red;
+      overflow: hidden;
+    }
+   .grid {
+      display: grid;
+      grid: 50px 50px / 100px 100px;
+      margin-left: -300px;
+      margin-top: -200px;
+    }
+  </style>
+
+  <div class='grid'>
+    <div>
+      <div style='background: green; width: 800px; height: 600px;'></div>
+    </div>
+  </div>
+">
+</iframe>
+
+<iframe height="100px" width="200px" srcdoc="
+  <style>
+    body {
+      background: red;
+      overflow: hidden;
+    }
+   .grid {
+      display: grid;
+      grid: 400px 50px 50px / 500px 100px 100px;
+      margin-left: -800px;
+      margin-top: -700px;
+    }
+  </style>
+
+  <div class='grid'>
+    <div style='grid-column: 2; grid-row: 2;'>
+      <div style='background: green; width: 800px; height: 600px;'></div>
+    </div>
+  </div>
+">
+</iframe>
diff --git a/LayoutTests/fast/css-grid-layout/grid-painting-items-only-once-expected.html b/LayoutTests/fast/css-grid-layout/grid-painting-items-only-once-expected.html
new file mode 100644 (file)
index 0000000..dc633bb
--- /dev/null
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link href="resources/grid.css" rel="stylesheet">
+    <style>
+        .grid div {
+            background-color: transparent;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        This test shows 4 grids where all the items are placed in several cells (span or areas).<br>
+        It passes if these grid items are painted only once.
+    </div>
+    <div class="grid">
+        <div class="firstRowFirstColumn">item</div>
+        <div class="secondRowFirstColumn">item</div>
+    </div>
+    <div class="grid">
+        <div class="firstRowFirstColumn">item</div>
+        <div class="firstRowSecondColumn">item</div>
+    </div>
+    <div class="grid">
+        <div class="firstRowFirstColumn">item</div>
+        <div class="secondRowFirstColumn">item</div>
+    </div>
+    <div class="grid">
+        <div class="firstRowFirstColumn">item</div>
+        <div class="firstRowSecondColumn">item</div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-painting-items-only-once.html b/LayoutTests/fast/css-grid-layout/grid-painting-items-only-once.html
new file mode 100644 (file)
index 0000000..287d75e
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link href="resources/grid.css" rel="stylesheet">
+    <style>
+        .grid2Rows2Columns {
+            grid-template-columns: auto auto;
+            grid-template-rows: auto auto;
+        }
+
+        .gridAreas2Rows {
+            grid-template-areas: "a a"
+                                 "b b";
+        }
+
+        .gridAreas2Columns {
+            grid-template-areas: "a b"
+                                 "a b";
+        }
+
+        .areaA {
+            grid-area: a;
+        }
+
+        .areaB {
+            grid-area: b;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        This test shows 4 grids where all the items are placed in several cells (span or areas).<br>
+        It passes if these grid items are painted only once.
+    </div>
+    <div class="grid grid2Rows2Columns">
+        <div class="firstRowBothColumn">item</div>
+        <div class="secondRowBothColumn">item</div>
+    </div>
+    <div class="grid grid2Rows2Columns">
+        <div class="bothRowFirstColumn">item</div>
+        <div class="bothRowSecondColumn">item</div>
+    </div>
+    <div class="grid gridAreas2Rows">
+        <div class="areaA">item</div>
+        <div class="areaB">item</div>
+    </div>
+    <div class="grid gridAreas2Columns">
+        <div class="areaA">item</div>
+        <div class="areaB">item</div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-painting-respect-dom-order-expected.html b/LayoutTests/fast/css-grid-layout/grid-painting-respect-dom-order-expected.html
new file mode 100644 (file)
index 0000000..caeff70
--- /dev/null
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .grid {
+            display: block;
+            width: 300px;
+            height: 175px;
+            float: left;
+        }
+
+        .item {
+            width: 100px;
+            height: 100px;
+        }
+
+        .grid :nth-child(1) {
+            background-color: #CCC;
+        }
+
+        .grid :nth-child(2) {
+            background-color: #999;
+        }
+
+        .grid :nth-child(3) {
+            background-color: #333;
+        }
+
+        .firstRowFirstColumn {
+            position: relative;
+            left: 0px;
+        }
+
+        .secondRowFirstColumn {
+            position: relative;
+            left: 10px;
+        }
+
+        .bothRowFirstColumn {
+            position: relative;
+            left: 20px;
+        }
+
+        #grid1 .firstRowFirstColumn {
+            top: 0px;
+        }
+
+        #grid1 .secondRowFirstColumn {
+            top: -40px;
+        }
+
+        #grid1 .bothRowFirstColumn {
+            top: -180px;
+        }
+
+        #grid2 .firstRowFirstColumn {
+            top: -200px;
+        }
+
+        #grid2 .secondRowFirstColumn {
+            top: 60px;
+        }
+
+        #grid2 .bothRowFirstColumn {
+            top: -80px;
+        }
+
+        #grid3 .firstRowFirstColumn {
+            top: -100px;
+        }
+
+        #grid3 .secondRowFirstColumn {
+            top: -140px;
+        }
+
+        #grid3 .bothRowFirstColumn {
+            top: 20px;
+        }
+
+        #grid4 .firstRowFirstColumn {
+            top: -100px;
+        }
+
+        #grid4 .secondRowFirstColumn {
+            top: 60px;
+        }
+
+        #grid4 .bothRowFirstColumn {
+            top: -180px;
+        }
+
+        #grid5 .firstRowFirstColumn {
+            top: 0px;
+        }
+
+        #grid5 .secondRowFirstColumn {
+            top: -140px;
+        }
+
+        #grid5 .bothRowFirstColumn {
+            top: -80px;
+        }
+
+        #grid6 .firstRowFirstColumn {
+            top: -200px;
+        }
+
+        #grid6 .secondRowFirstColumn {
+            top: -40px;
+        }
+
+        #grid6 .bothRowFirstColumn {
+            top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        The test shows 6 grids each of them with 3 items sorted differently in the DOM.<br>
+        Grid items should be painted from lighter (bottom) to darker (top) according to DOM ordering.
+    </div>
+    <div id="grid1" class="grid">
+        <div class="item firstRowFirstColumn"></div>
+        <div class="item secondRowFirstColumn"></div>
+        <div class="item bothRowFirstColumn"></div>
+    </div>
+    <div id="grid2" class="grid">
+        <div class="item secondRowFirstColumn"></div>
+        <div class="item bothRowFirstColumn"></div>
+        <div class="item firstRowFirstColumn"></div>
+    </div>
+    <div id="grid3" class="grid">
+        <div class="item bothRowFirstColumn"></div>
+        <div class="item firstRowFirstColumn"></div>
+        <div class="item secondRowFirstColumn"></div>
+    </div>
+    <div id="grid4" class="grid">
+        <div class="item secondRowFirstColumn"></div>
+        <div class="item firstRowFirstColumn"></div>
+        <div class="item bothRowFirstColumn"></div>
+    </div>
+    <div id="grid5" class="grid">
+        <div class="item firstRowFirstColumn"></div>
+        <div class="item bothRowFirstColumn"></div>
+        <div class="item secondRowFirstColumn"></div>
+    </div>
+    <div id="grid6" class="grid">
+        <div class="item bothRowFirstColumn"></div>
+        <div class="item secondRowFirstColumn"></div>
+        <div class="item firstRowFirstColumn"></div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-painting-respect-dom-order.html b/LayoutTests/fast/css-grid-layout/grid-painting-respect-dom-order.html
new file mode 100644 (file)
index 0000000..ef4f10b
--- /dev/null
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link href="resources/grid.css" rel="stylesheet">
+    <style>
+        .grid {
+            display: grid;
+            grid-template-columns: 50px;
+            grid-template-rows: 50px 50px;
+            width: 300px;
+            height: 175px;
+            background-color: transparent;
+            float: left;
+        }
+
+        .item {
+            width: 100px;
+            height: 100px;
+        }
+
+        .grid :nth-child(1) {
+            background-color: #CCC;
+        }
+
+        .grid :nth-child(2) {
+            background-color: #999;
+        }
+
+        .grid :nth-child(3) {
+            background-color: #333;
+        }
+
+        .secondRowFirstColumn {
+            margin-left: 10px;
+            margin-top: 10px;
+        }
+
+        .bothRowFirstColumn {
+            margin-left: 20px;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        The test shows 6 grids each of them with 3 items sorted differently in the DOM.<br>
+        Grid items should be painted from lighter (bottom) to darker (top) according to DOM ordering.
+    </div>
+    <div class="grid">
+        <div class="item firstRowFirstColumn"></div>
+        <div class="item secondRowFirstColumn"></div>
+        <div class="item bothRowFirstColumn"></div>
+    </div>
+    <div class="grid">
+        <div class="item secondRowFirstColumn"></div>
+        <div class="item bothRowFirstColumn"></div>
+        <div class="item firstRowFirstColumn"></div>
+    </div>
+    <div class="grid">
+        <div class="item bothRowFirstColumn"></div>
+        <div class="item firstRowFirstColumn"></div>
+        <div class="item secondRowFirstColumn"></div>
+    </div>
+    <div class="grid">
+        <div class="item secondRowFirstColumn"></div>
+        <div class="item firstRowFirstColumn"></div>
+        <div class="item bothRowFirstColumn"></div>
+    </div>
+    <div class="grid">
+        <div class="item firstRowFirstColumn"></div>
+        <div class="item bothRowFirstColumn"></div>
+        <div class="item secondRowFirstColumn"></div>
+    </div>
+    <div class="grid">
+        <div class="item bothRowFirstColumn"></div>
+        <div class="item secondRowFirstColumn"></div>
+        <div class="item firstRowFirstColumn"></div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/grid-painting-rtl-expected.html b/LayoutTests/fast/css-grid-layout/grid-painting-rtl-expected.html
new file mode 100644 (file)
index 0000000..a4e82c3
--- /dev/null
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+
+<p>This test verifies grid layout painting using RTL direction.</p>
+<p>This test passes if it matches the reference. You should see green and blue boxes but not red.</p>
+
+<iframe height="120px" width="300px" srcdoc="
+    <style>
+    .grid {
+        position: relative;
+        width: 500px;
+        height: 50px;
+    }
+    </style>
+
+    <div class='grid'>
+        <div style='background: green; position: absolute; width: 50px; height: 50px; left: 150px'></div>
+        <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 200px'></div>
+    </div>
+">
+</iframe>
+
+<iframe height="120px" width="300px" srcdoc="
+    <style>
+    .grid {
+        position: relative;
+        width: 500px;
+        height: 50px;
+        border: 5px solid;
+    }
+    </style>
+
+    <div class='grid'>
+        <div style='background: green; position: absolute; width: 50px; height: 50px; left: 150px'></div>
+        <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 200px'></div>
+    </div>
+">
+</iframe>
+
+<iframe height="120px" width="300px" srcdoc="
+    <style>
+    .grid {
+        position: relative;
+        width: 500px;
+        height: 50px;
+        border: 5px solid;
+        padding: 10px;
+    }
+    </style>
+
+    <div class='grid'>
+        <div style='background: green; position: absolute; width: 50px; height: 50px; left: 160px'></div>
+        <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 210px'></div>
+    </div>
+">
+</iframe>
+
+<iframe height="120px" width="300px" srcdoc="
+    <style>
+    .grid {
+        position: relative;
+        width: 500px;
+        height: 50px;
+        border: 5px solid;
+        border-right: 100px solid;
+        padding: 10px;
+        padding-right: 200px;
+    }
+    </style>
+
+    <div class='grid'>
+        <div style='background: green; position: absolute; width: 50px; height: 50px; left: 160px'></div>
+        <div style='background: blue; position: absolute; width: 100px; height: 50px; left: 210px'></div>
+    </div>
+">
+</iframe>
diff --git a/LayoutTests/fast/css-grid-layout/grid-painting-rtl.html b/LayoutTests/fast/css-grid-layout/grid-painting-rtl.html
new file mode 100644 (file)
index 0000000..fc69031
--- /dev/null
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+
+<p>This test verifies grid layout painting using RTL direction.</p>
+<p>This test passes if it matches the reference. You should see green and blue boxes but not red.</p>
+
+<iframe height="120px" width="300px" srcdoc="
+    <style>
+    .grid {
+        display: grid;
+        grid: 50px / 200px 100px 50px;
+        width: 500px;
+        direction: rtl;
+    }
+    </style>
+
+    <div class='grid'>
+        <div style='background: red;'></div>
+        <div style='background: blue;'></div>
+        <div style='background: green;'></div>
+    </div>
+">
+</iframe>
+
+<iframe height="120px" width="300px" srcdoc="
+    <style>
+    .grid {
+        display: grid;
+        grid: 50px / 200px 100px 50px;
+        width: 500px;
+        border: 5px solid;
+        direction: rtl;
+    }
+    </style>
+
+    <div class='grid'>
+        <div style='background: red;'></div>
+        <div style='background: blue;'></div>
+        <div style='background: green;'></div>
+    </div>
+">
+</iframe>
+
+<iframe height="120px" width="300px" srcdoc="
+    <style>
+    .grid {
+        display: grid;
+        grid: 50px / 200px 100px 50px;
+        width: 500px;
+        border: 5px solid;
+        padding: 10px;
+        direction: rtl;
+    }
+    </style>
+
+    <div class='grid'>
+        <div style='background: red;'></div>
+        <div style='background: blue;'></div>
+        <div style='background: green;'></div>
+    </div>
+">
+</iframe>
+
+<iframe height="120px" width="300px" srcdoc="
+    <style>
+    .grid {
+        display: grid;
+        grid: 50px / 200px 100px 50px;
+        width: 500px;
+        border: 5px solid;
+        border-right: 100px solid;
+        padding: 10px;
+        padding-right: 200px;
+        direction: rtl;
+    }
+    </style>
+
+    <div class='grid'>
+        <div style='background: red;'></div>
+        <div style='background: blue;'></div>
+        <div style='background: green;'></div>
+    </div>
+">
+</iframe>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-01-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-01-expected.html
new file mode 100644 (file)
index 0000000..317e553
--- /dev/null
@@ -0,0 +1,51 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 100px; }
+.verticalLR.area, .verticalRL.area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with parallel items.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline.</p>
+<div class="block"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item extraLeftPadding">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-01.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-01.html
new file mode 100644 (file)
index 0000000..e0ff649
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.grid { grid: 125px / 60px 60px 75px 100px; }
+</style>
+
+<p>1x4 with parallel items.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-02-b-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-02-b-expected.html
new file mode 100644 (file)
index 0000000..f9100f4
--- /dev/null
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   height: 300px;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block1 > .area:nth-child(1) { height: 60px;  }
+.block1 > .area:nth-child(2) { height: 60px;  }
+.block2 > .area:nth-child(1) { height: 75px;  }
+.block2 > .area:nth-child(2) { height: 100px; }
+.block1 { float: left;  }
+.block2 { float: left;  }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>We have 2 baseline-sharing groups.<br>The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline.</p>
+<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div></div>
+<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">A</div></div><div class="area"><div class="item extraRightPadding">A</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-02-b.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-02-b.html
new file mode 100644 (file)
index 0000000..76be7c1
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   height: 300px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row; }
+.grid { grid: 60px 60px 75px 100px / 125px; }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>We have 2 baseline-sharing groups.<br>The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline.</p>
+<div class="block grid contentStart itemsBaseline"><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalRL">A</div><div class="item verticalRL">A</div></div>
+<div class="block grid contentStart itemsBaseline"><div class="item verticalLR extraLeftPadding">A</div><div class="item verticalLR extraRightPadding">A</div><div class="item verticalRL">A</div><div class="item verticalRL">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-02-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-02-expected.html
new file mode 100644 (file)
index 0000000..1a5c7a5
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block1 > .area:nth-child(1) { height: 60px;  }
+.block1 > .area:nth-child(2) { height: 60px;  }
+.block2 > .area:nth-child(1) { height: 75px;  }
+.block2 > .area:nth-child(2) { height: 100px; }
+.block1 { float: left;  }
+.block2 { float: left;  }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>We have 2 baseline-sharing groups.<br>The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline.</p>
+<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div></div>
+<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">A</div></div><div class="area"><div class="item">A</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div></div>
+<div class="block verticalRL"><div class="block1"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div></div>
+<div class="block verticalRL"><div class="block1"><div class="area"><div class="item extraRightPadding">A</div></div><div class="area"><div class="item">A</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-02.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-02.html
new file mode 100644 (file)
index 0000000..aa7989b
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 175px / 60px 60px 75px 100px; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>We have 2 baseline-sharing groups.<br>The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline.</p>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">A</div><div class="item">A</div><div class="item verticalRL">A</div><div class="item verticalRL">A</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item verticalRL">A</div><div class="item verticalRL">A</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">A</div><div class="item">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">A</div><div class="item">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-03-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-03-expected.html
new file mode 100644 (file)
index 0000000..6bb0069
--- /dev/null
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area:nth-child(1) { width: 70px;  }
+.area:nth-child(2) { width: 80px;  }
+.area:nth-child(3) { width: 100px;  }
+.area:nth-child(4) { width: 125px; }
+.area { display: inline-block; }
+.block.verticalLR > .area { float: left;  }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 70px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 80px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block {
+   width: 375px;
+   height: 100px;
+}
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline.</p>
+<div class="block"><div class="area verticalLR"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item ">A</div></div><div class="area horizontalTB"><div class="item">A</div></div></div>
+<div class="block verticalRL"><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div></div>
+<div class="block verticalRL"><div class="area horizontalTB"><div class="item extraRightPadding">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-03.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-03.html
new file mode 100644 (file)
index 0000000..fa023f2
--- /dev/null
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 100px / 70px 80px 100px 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+}
+</style>
+
+<p>1x4 with orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR extraBottomPadding">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB  extraLeftPadding">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
+
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB  extraRightPadding">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-04-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-04-expected.html
new file mode 100644 (file)
index 0000000..72df5ff
--- /dev/null
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.area.verticalLR > .item { margin: 10px 6px 0px 12px; }
+.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 75px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 125px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 150px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline.</p>
+<div class="block"><div class="area"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">A</div></div><div class="area verticalLR"><div class="item extraTopPadding">A</div></div><div class="area"><div class="item">A</div></div><div class="area verticalLR top"><div class="item">A</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">A</div></div><div class="area horizontalTB"><div class="item extraRightPadding">A</div></div><div class="area"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item extraRightPadding">A</div></div><div class="area horizontalTB"><div class="item extraLeftPadding">A</div></div><div class="area"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-04.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-04.html
new file mode 100644 (file)
index 0000000..05644f7
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 125px / 60px 75px 75px 125px; }
+.grid.verticalLR, .grid.verticalRL { grid-template-rows: 150px; }
+</style>
+
+
+<p>1x4 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">A</div><div class="item verticalLR">A</div><div class="item">A</div><div class="item verticalLR">A</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">A</div><div class="item verticalLR  extraTopPadding">A</div><div class="item">A</div><div class="item verticalLR">A</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">A</div><div class="item horizontalTB">A</div><div class="item">A</div><div class="item horizontalTB">A</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">A</div><div class="item horizontalTB extraRightPadding">A</div><div class="item">A</div><div class="item horizontalTB">A</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">A</div><div class="item horizontalTB">A</div><div class="item">A</div><div class="item horizontalTB">A</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">A</div><div class="item horizontalTB extraLeftPadding">A</div><div class="item">A</div><div class="item horizontalTB">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-05-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-05-expected.html
new file mode 100644 (file)
index 0000000..b3c7dcb
--- /dev/null
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 100px; }
+.verticalLR.area, .verticalRL.area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 140px; }
+.block.verticalLR, .block.verticalRL {
+   width: 140px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.</p>
+<div class="block verticalLR"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+
+<br clear="all">
+
+<div style="direction: rtl;" class="block"><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div style="direction: rtl;" class="block"><div class="area"><div class="item extraBottomPadding">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+
+
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-05.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-05.html
new file mode 100644 (file)
index 0000000..417ffe9
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.grid { grid: 60px 60px 75px 100px / 140px; }
+</style>
+
+<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR  extraLeftPadding">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div><div class="item verticalLR">A</div></div>
+<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
+<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
+
+<br clear="all">
+
+<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
+<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-06-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-06-expected.html
new file mode 100644 (file)
index 0000000..51778af
--- /dev/null
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block.verticalLR > .area { float: left; }
+.area:nth-child(1) { width: 65px;  }
+.area:nth-child(2) { width: 75px;  }
+.area:nth-child(3) { width: 100px;  }
+.area:nth-child(4) { width: 125px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block { height: 100px; }
+.block.verticalLR, .block.verticalRL {
+   width: 100px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with parallel items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.</p>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraRightPadding">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraTopPadding">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item">A</div></div><div class="area verticalRL"><div class="item">A</div></div><div class="area verticalRL"><div class="item">A</div></div><div class="area verticalRL"><div class="item">A</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">A</div></div><div class="area verticalRL"><div class="item">A</div></div><div class="area verticalRL"><div class="item">A</div></div><div class="area verticalRL"><div class="item">A</div></div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-06.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-06.html
new file mode 100644 (file)
index 0000000..90be7a2
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 65px 75px 100px 125px / 100px; }
+</style>
+
+<p>4x1 with parallel items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraRightPadding">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraTopPadding">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-07-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-07-expected.html
new file mode 100644 (file)
index 0000000..a64c70a
--- /dev/null
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.area.verticalLR > .item, .area.verticalRL > .item { margin: 10px 6px 0px 12px; }
+.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 65px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 100px; }
+.area:nth-child(4) { width: 100px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 150px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.</p>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">A</div></div><div class="area"><div class="item extraRightPadding">A</div></div><div class="area horizontalTB"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">A</div></div><div class="area"><div class="item extraTopPadding">A</div></div><div class="area verticalLR"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+
+<br clear="all">
+
+<div class="block directionRTL"><div class="area verticalRL"><div class="item">A</div></div><div class="area"><div class="item">A</div></div><div class="area verticalRL"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">A</div></div><div class="area"><div class="item extraTopPadding">A</div></div><div class="area verticalRL"><div class="item">A</div></div><div class="area"><div class="item">A</div></div></div>
+
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-07.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-07.html
new file mode 100644 (file)
index 0000000..b3d3d98
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 65px 60px 100px 100px / 150px; }
+.grid.verticalLR, .grid.verticalRL { grid-template-columns: 125px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items. Items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge).<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">A</div><div class="item verticalLR">A</div><div class="item">A</div><div class="item verticalLR">A</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraLeftPadding">A</div><div class="item verticalLR extraRightPadding">A</div><div class="item horizontalTB">A</div><div class="item verticalLR">A</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">A</div><div class="item horizontalTB">A</div><div class="item">A</div><div class="item horizontalTB">A</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">A</div><div class="item horizontalTB extraTopPadding">A</div><div class="item">A</div><div class="item horizontalTB">A</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">A</div><div class="item horizontalTB">A</div><div class="item">A</div><div class="item horizontalTB">A</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">A</div><div class="item horizontalTB extraTopPadding">A</div><div class="item">A</div><div class="item horizontalTB">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-01-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-01-expected.html
new file mode 100644 (file)
index 0000000..4610a91
--- /dev/null
@@ -0,0 +1,28 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div class="item">
+<div class="block"><div class="item extraBottomPadding">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-01.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-01.html
new file mode 100644 (file)
index 0000000..8bc19f6
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02-expected.html
new file mode 100644 (file)
index 0000000..73022de
--- /dev/null
@@ -0,0 +1,39 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.top { vertical-align: top; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
+.item.horizontalTB  { margin: 10px 6px 4px 0px; }
+
+</style>
+
+<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block"><div class="item">A</div><div class="item verticalLR top">A</div><div class="item">A</div><div class="item verticalLR top">A</div></div>
+<div class="block"><div class="item extraBottomPadding">A</div><div class="item verticalLR extraTopPadding top">A</div><div class="item">A</div><div class="item verticalLR top">A</div></div>
+
+<br clear="all">
+
+<div class="block"><div class="item">A</div><div class="item verticalRL top">A</div><div class="item">A</div><div class="item verticalRL top">A</div></div>
+<div class="block"><div class="item extraBottomPadding">A</div><div class="item verticalRL extraTopPadding top">A</div><div class="item">A</div><div class="item verticalRL top">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-02.html
new file mode 100644 (file)
index 0000000..d41648e
--- /dev/null
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item">A</div>
+    <div class="item verticalLR">A</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">A</div>
+    <div class="item verticalLR extraTopPadding">A</div>
+    <div class="item">A</div>
+    <div class="item verticalLR">A</div>
+</div>
+
+<br clear="all">
+
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item">A</div>
+    <div class="item verticalRL">A</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">A</div>
+    <div class="item verticalRL extraTopPadding">A</div>
+    <div class="item">A</div>
+    <div class="item verticalRL">A</div>
+</div>
+
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03-expected.html
new file mode 100644 (file)
index 0000000..e4dee99
--- /dev/null
@@ -0,0 +1,34 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 375px;
+   height: 100px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.top { vertical-align: top; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
+<div class="block"><div class="item verticalLR top">A</div><div class="item verticalLR top">A</div><div class="item verticalLR top">A</div><div class="item verticalLR top">A</div></div>
+<div class="block" ><div class="item verticalLR extraTopPadding top">A</div><div class="item verticalLR top">A</div><div class="item verticalLR extraBottomPadding top">A</div><div class="item verticalLR top">A</div></div>
+<div class="block"><div class="item verticalRL top">A</div><div class="item verticalRL top">A</div><div class="item verticalRL top">A</div><div class="item verticalRL top">A</div></div>
+<div class="block" ><div class="item verticalRL extraTopPadding top">A</div><div class="item verticalRL top">A</div><div class="item verticalRL extraBottomPadding top">A</div><div class="item verticalRL top">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-03.html
new file mode 100644 (file)
index 0000000..4796c25
--- /dev/null
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 375px;
+   height: 100px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR">A</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalLR extraTopPadding">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR extraBottomPadding">A</div>
+    <div class="item verticalLR">A</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalRL extraTopPadding">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL extraBottomPadding">A</div>
+    <div class="item verticalRL">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04-expected.html
new file mode 100644 (file)
index 0000000..5f1c94e
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraRightPadding { padding-right: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline; }
+.left { vertical-align: bottom; }
+</style>
+
+<p>4x1 with parallel items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
+<div class="block verticalLR"><div class="item horizontalTB left">A</div><div class="item horizontalTB left">A</div><div class="item horizontalTB left">A</div><div class="item horizontalTB left">A</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraRightPadding left">A</div><div class="item horizontalTB left">A</div><div class="item horizontalTB extraLeftPadding left">A</div><div class="item horizontalTB left">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-04.html
new file mode 100644 (file)
index 0000000..2d67928
--- /dev/null
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraRightPadding { padding-right: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.column { grid-auto-flow: row; }
+</style>
+
+<p>4x1 with parallel items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">A</div>
+    <div class="item">A</div>
+    <div class="item extraLeftPadding">A</div>
+    <div class="item">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05-expected.html
new file mode 100644 (file)
index 0000000..c8a9d46
--- /dev/null
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   position: relative;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.inline { display: inline-block; }
+.item { display: inline-block; }
+.bottom { vertical-align: bottom; }
+</style>
+
+<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block verticalLR"><div class="item horizontalTB bottom">A</div><div class="item">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>
+<div class="block verticalLR"><div class="item horizontalTB bottom extraRightPadding">A</div><div class="item extraLeftPadding">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>
+<div class="block verticalRL"><div class="item horizontalTB bottom">A</div><div class="item">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>
+<div class="block verticalRL"><div class="item horizontalTB bottom extraRightPadding">A</div><div class="item extraLeftPadding">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-05.html
new file mode 100644 (file)
index 0000000..228a547
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item">A</div>
+    <div class="item verticalLR">A</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">A</div>
+    <div class="item verticalLR extraLeftPadding">A</div>
+    <div class="item">A</div>
+    <div class="item verticalLR">A</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item">A</div>
+    <div class="item verticalRL">A</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">A</div>
+    <div class="item verticalRL extraLeftPadding">A</div>
+    <div class="item">A</div>
+    <div class="item verticalRL">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06-expected.html
new file mode 100644 (file)
index 0000000..1d7763d
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block verticalLR"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block verticalLR"><div class="item extraLeftPadding">A</div><div class="item extraRightPadding">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block verticalRL"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block verticalRL"><div class="item extraLeftPadding">A</div><div class="item extraRightPadding">A</div><div class="item">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-06.html
new file mode 100644 (file)
index 0000000..8d52dc4
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR">A</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR extraLeftPadding">A</div>
+    <div class="item verticalLR extraRightPadding ">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR">A</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalRL extraLeftPadding">A</div>
+    <div class="item verticalRL extraRightPadding ">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-07-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-07-expected.html
new file mode 100644 (file)
index 0000000..829d9ea
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   height: 300px;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>We have 2 baseline-sharing groups.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block verticalLR"><div class="block1"><div class="item">A</div><div class="item">A</div></div><div class="block2 verticalRL"><div class="item">A</div><div class="item">A</div></div></div></div>
+<div class="block verticalLR"><div class="block1"><div class="item extraRightPadding">A</div><div class="item extraLeftPadding">A</div></div><div class="block2 verticalRL"><div class="item">A</div><div class="item">A</div></div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-07.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-horiz-07.html
new file mode 100644 (file)
index 0000000..f2bb357
--- /dev/null
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   height: 300px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>We have 2 baseline-sharing groups.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR extraRightPadding">A</div>
+    <div class="item verticalLR extraLeftPadding">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional-expected.txt b/LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional-expected.txt
new file mode 100644 (file)
index 0000000..0d1b155
--- /dev/null
@@ -0,0 +1,267 @@
+
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
+PASS .grid 5 
+PASS .grid 6 
+PASS .grid 7 
+PASS .grid 8 
+PASS .grid 9 
+PASS .grid 10 
+PASS .grid 11 
+PASS .grid 12 
+
+This test checks that baseline is applied correctly on a grid aling both axis and different writing-modes when using symbolic fonts, which will use middle-baseline.
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
+A
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-two-dimensional.html
new file mode 100644 (file)
index 0000000..9ef2116
--- /dev/null
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.grid {
+   margin: 5px;
+   font-family: Ahem;
+}
+.font12 { font-size:24px; }
+.font16 { font-size:32px; }
+.font24 { font-size:48px; }
+.font32 { font-size:64px; }
+span {
+   border-width: 2px 5px 8px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.grid > span { background-color: grey; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+
+<p>This test checks that baseline is applied correctly on a grid aling both axis and different writing-modes when using symbolic fonts, which will use middle-baseline.</p>
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline">
+        <span class="firstRowFirstColumn horizontalTB font12 extraTopPadding" data-offset-x="17" data-offset-y="18">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="119" data-offset-y="35">A</span><span class="firstRowThirdColumn horizontalTB font24 extraLeftPadding" data-offset-x="227" data-offset-y="23">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="335" data-offset-y="10">A</span>
+        <span class="secondRowFirstColumn horizontalTB font16" data-offset-x="17" data-offset-y="136">A</span><span class="secondRowSecondColumn horizontalTB font24 extraLeftPadding" data-offset-x="119" data-offset-y="124">A</span><span class="secondRowThirdColumn horizontalTB font12 extraBottomPadding" data-offset-x="227" data-offset-y="143">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="335" data-offset-y="111">A</span>
+        <span class="thirdRowFirstColumn horizontalTB font32 extraBottomPadding" data-offset-x="17" data-offset-y="227">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="119" data-offset-y="235">A</span><span class="thirdRowThirdColumn horizontalTB font24" data-offset-x="227" data-offset-y="240">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="335" data-offset-y="252">A</span>
+        <span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="17" data-offset-y="364">A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="119" data-offset-y="351">A</span><span class="fourthRowThirdColumn horizontalTB font16 extraTopPadding" data-offset-x="227" data-offset-y="352">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="335" data-offset-y="383">A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline">
+        <span class="firstRowFirstColumn verticalLR font12" data-offset-x="37" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16 extraTopPadding" data-offset-x="138" data-offset-y="11">A</span><span class="firstRowThirdColumn verticalLR font24 extraLeftPadding" data-offset-x="240" data-offset-y="10">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="348" data-offset-y="10">A</span>
+        <span class="secondRowFirstColumn verticalLR font16 extraTopPadding" data-offset-x="33" data-offset-y="111">A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="138" data-offset-y="124">A</span><span class="secondRowThirdColumn verticalLR font12" data-offset-x="274" data-offset-y="111">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="348" data-offset-y="111">A</span>
+        <span class="thirdRowFirstColumn verticalLR font32" data-offset-x="17" data-offset-y="212">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="138" data-offset-y="243">A</span><span class="thirdRowThirdColumn verticalLR font24 extraBottomPadding" data-offset-x="262" data-offset-y="212">A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="348" data-offset-y="212">A</span>
+        <span class="fourthRowFirstColumn verticalLR font24 extraRightPadding" data-offset-x="25" data-offset-y="320">A</span><span class="fourthRowSecondColumn horizontalTB font32 extraBottomPadding" data-offset-x="138" data-offset-y="320">A</span><span class="fourthRowThirdColumn verticalLR font16" data-offset-x="270" data-offset-y="320">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="348" data-offset-y="352">A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline">
+        <span class="firstRowFirstColumn verticalLR font12 extraLeftPadding" data-offset-x="17" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="121" data-offset-y="35">A</span><span class="firstRowThirdColumn verticalLR font24 extraRightPadding" data-offset-x="" data-offset-y="10">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="336" data-offset-y="10">A</span>
+        <span class="secondRowFirstColumn horizontalTB font16" data-offset-x="17" data-offset-y="111">A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="129" data-offset-y="111">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="223" data-offset-y="118">A</span><span class="secondRowFourthColumn verticalLR font32 extraBottomPadding" data-offset-x="336" data-offset-y="111">A</span>
+        <span class="thirdRowFirstColumn verticalLR font32 extraBottomPadding" data-offset-x="19" data-offset-y="235">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="121" data-offset-y="242">A</span><span class="thirdRowThirdColumn verticalLR font24 extraTopPadding" data-offset-x="223" data-offset-y="235">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="336" data-offset-y="235">A</span>
+        <span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="17" data-offset-y="359">A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="121" data-offset-y="359">A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="223" data-offset-y="371">A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="356" data-offset-y="359">A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline verticalLR">
+        <span class="firstRowFirstColumn horizontalTB font12" data-offset-x="17" data-offset-y="42">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="17" data-offset-y="176">A</span><span class="firstRowThirdColumn horizontalTB font24 extraRightPadding" data-offset-x="17" data-offset-y="291">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="17" data-offset-y="376">A</span>
+        <span class="secondRowFirstColumn horizontalTB font16 extraBottomPadding" data-offset-x="130" data-offset-y="35">A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="130" data-offset-y="164">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="130" data-offset-y="310">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="130" data-offset-y="376">A</span>
+        <span class="thirdRowFirstColumn horizontalTB font32" data-offset-x="232" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraBottomPadding" data-offset-x="232" data-offset-y="183">A</span><span class="thirdRowThirdColumn horizontalTB font24 extraTopPadding" data-offset-x="232" data-offset-y="267">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="232" data-offset-y="401">A</span>
+        <span class="fourthRowFirstColumn horizontalTB font24 extraRightPadding" data-offset-x="334" data-offset-y="23">A</span><span class="fourthRowSecondColumn horizontalTB font32 extraTopPadding" data-offset-x="334" data-offset-y="127">A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="334" data-offset-y="303">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="334" data-offset-y="408">A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline verticalLR">
+        <span class="firstRowFirstColumn verticalLR font12" data-offset-x="29" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16 extraTopPadding" data-offset-x="17" data-offset-y="135">A</span><span class="firstRowThirdColumn verticalLR font24 extraBottomPadding" data-offset-x="17" data-offset-y="235">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="17" data-offset-y="343">A</span>
+        <span class="secondRowFirstColumn verticalLR font16" data-offset-x="119" data-offset-y="10">A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="119" data-offset-y="147">A</span><span class="secondRowThirdColumn verticalLR font12" data-offset-x="123" data-offset-y="235">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="119" data-offset-y="343">A</span>
+        <span class="thirdRowFirstColumn verticalLR font32 extraBottomPadding" data-offset-x="221" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="221" data-offset-y="142">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="229" data-offset-y="235">A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="221" data-offset-y="344">A</span>
+        <span class="fourthRowFirstColumn verticalLR font24" data-offset-x="323" data-offset-y="10">A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="323" data-offset-y="134">A</span><span class="fourthRowThirdColumn verticalLR font16" data-offset-x="331" data-offset-y="235">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="323" data-offset-y="375">A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline verticalLR">
+        <span class="firstRowFirstColumn verticalLR font12 extraBottomPadding" data-offset-x="29" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16 extraTopPadding" data-offset-x="17" data-offset-y="135">A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="17" data-offset-y="236">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="17" data-offset-y="351">A</span>
+        <span class="secondRowFirstColumn horizontalTB font16" data-offset-x="119" data-offset-y="22">A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="127" data-offset-y="135">A</span><span class="secondRowThirdColumn horizontalTB font12 extraBottomPadding" data-offset-x="119" data-offset-y="267">A</span><span class="secondRowFourthColumn verticalLR font32" data-offset-x="119" data-offset-y="351">A</span>
+        <span class="thirdRowFirstColumn  verticalLR font32 extraTopPadding" data-offset-x="221" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="221" data-offset-y="166">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="229" data-offset-y="236">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="221" data-offset-y="376">A</span>
+        <span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="323" data-offset-y="10">A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="323" data-offset-y="135">A</span><span class="fourthRowThirdColumn horizontalTB font16 extraTopPadding" data-offset-x="323" data-offset-y="236">A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="343" data-offset-y="351">A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline verticalRL">
+        <span class="firstRowFirstColumn horizontalTB font12 extraTopPadding" data-offset-x="385" data-offset-y="18">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="377" data-offset-y="160">A</span><span class="firstRowThirdColumn horizontalTB font24" data-offset-x="361" data-offset-y="275">A</span><span class="firstRowFourthColumn horizontalTB font32 extraBottomPadding" data-offset-x="345" data-offset-y="360">A</span>
+        <span class="secondRowFirstColumn horizontalTB font16" data-offset-x="275" data-offset-y="35">A</span><span class="secondRowSecondColumn horizontalTB font24 extraTopPadding" data-offset-x="259" data-offset-y="124">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="283" data-offset-y="294">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="243" data-offset-y="360">A</span>
+        <span class="thirdRowFirstColumn horizontalTB font32 extraLeftPadding" data-offset-x="119" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraBottomPadding" data-offset-x="181" data-offset-y="167">A</span><span class="thirdRowThirdColumn horizontalTB font24 extraTopPadding" data-offset-x="157" data-offset-y="251">A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="173" data-offset-y="361">A</span>
+        <span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="33" data-offset-y="23">A</span><span class="fourthRowSecondColumn horizontalTB font32 extraTopPadding" data-offset-x="17" data-offset-y="111">A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="49" data-offset-y="287">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="57" data-offset-y="392">A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline verticalRL">
+        <span class="firstRowFirstColumn verticalLR font12" data-offset-x="378" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="382" data-offset-y="170">A</span><span class="firstRowThirdColumn verticalLR font24 extraTopPadding" data-offset-x="366" data-offset-y="246">A</span><span class="firstRowFourthColumn horizontalTB font32 extraRightPadding" data-offset-x="323" data-offset-y="355">A</span>
+        <span class="secondRowFirstColumn verticalLR font16" data-offset-x="253" data-offset-y="10">A</span><span class="secondRowSecondColumn horizontalTB font24 extraTopPadding" data-offset-x="237" data-offset-y="134">A</span><span class="secondRowThirdColumn verticalLR font12" data-offset-x="257" data-offset-y="246">A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="221" data-offset-y="355">A</span>
+        <span class="thirdRowFirstColumn verticalLR font32 extraBottomPadding" data-offset-x="119" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="159" data-offset-y="177">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="127" data-offset-y="246">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="151" data-offset-y="380">A</span>
+        <span class="fourthRowFirstColumn verticalLR font24 extraTopPadding" data-offset-x="33" data-offset-y="10">A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="17" data-offset-y="145">A</span><span class="fourthRowThirdColumn verticalLR font16 extraBottomPadding" data-offset-x="41" data-offset-y="246">A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="57" data-offset-y="387">A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline verticalRL">
+        <span class="firstRowFirstColumn verticalLR font12" data-offset-x="351" data-offset-y="10">A</span><span class="firstRowSecondColumn horizontalTB font16 extraBottomPadding" data-offset-x="355" data-offset-y="114">A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="339" data-offset-y="215">A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="323" data-offset-y="307">A</span>
+        <span class="secondRowFirstColumn horizontalTB font16 extraBottomPadding" data-offset-x="253" data-offset-y="22">A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="229" data-offset-y="114">A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="261" data-offset-y="222">A</span><span class="secondRowFourthColumn verticalLR font32" data-offset-x="221" data-offset-y="307">A</span>
+        <span class="thirdRowFirstColumn  verticalLR font32" data-offset-x="119" data-offset-y="10">A</span><span class="thirdRowSecondColumn horizontalTB font12 extraLeftPadding" data-offset-x="137" data-offset-y="121">A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="127" data-offset-y="215">A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="151" data-offset-y="332">A</span>
+        <span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="33" data-offset-y="10">A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="17" data-offset-y="114">A</span><span class="fourthRowThirdColumn horizontalTB font16 extraBottomPadding" data-offset-x="49" data-offset-y="215">A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="37" data-offset-y="307">A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline">
+        <span class="firstRowFirstColumn horizontalTB font12" data-offset-x="17" data-offset-y="42">A<br>A</span><span class="firstRowSecondColumn horizontalTB font16" data-offset-x="119" data-offset-y="35">A<br>A</span><span class="firstRowThirdColumn horizontalTB font24" data-offset-x="221" data-offset-y="23">A<br>A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="307" data-offset-y="10">A<br>A</span>
+        <span class="secondRowFirstColumn horizontalTB font16" data-offset-x="17" data-offset-y="200">A<br>A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="119" data-offset-y="188">A<br>A</span><span class="secondRowThirdColumn horizontalTB font12" data-offset-x="221" data-offset-y="207">A<br>A</span><span class="secondRowFourthColumn horizontalTB font32" data-offset-x="307" data-offset-y="175">A<br>A</span>
+        <span class="thirdRowFirstColumn horizontalTB font32" data-offset-x="17" data-offset-y="340">A<br>A</span><span class="thirdRowSecondColumn horizontalTB font12" data-offset-x="119" data-offset-y="372">A<br>A</span><span class="thirdRowThirdColumn horizontalTB font24 extraBottomPadding" data-offset-x="221" data-offset-y="353">A<br>A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="307" data-offset-y="365">A<br>A</span>
+        <span class="fourthRowFirstColumn horizontalTB font24 extraBottomPadding" data-offset-x="17" data-offset-y="522">A<br>A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="119" data-offset-y="509">A<br>A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="221" data-offset-y="534">A<br>A</span><span class="fourthRowFourthColumn horizontalTB font12" data-offset-x="307" data-offset-y="541">A<br>A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline">
+        <span class="firstRowFirstColumn verticalLR font12 extraLeftPadding" data-offset-x="17" data-offset-y="10">A<br>A</span><span class="firstRowSecondColumn horizontalTB font16 extraBottomPadding" data-offset-x="185" data-offset-y="35">A<br>A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="287" data-offset-y="10">A<br>A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="421" data-offset-y="10">A<br>A</span>
+        <span class="secondRowFirstColumn verticalLR font16 extraTopPadding" data-offset-x="35" data-offset-y="175">A<br>A</span><span class="secondRowSecondColumn horizontalTB font24" data-offset-x="185" data-offset-y="188">A<br>A</span><span class="secondRowThirdColumn verticalLR font12 extraTopPadding" data-offset-x="299" data-offset-y="175">A<br>A</span><span class="secondRowFourthColumn horizontalTB font32 extraLeftPadding" data-offset-x="421" data-offset-y="175">A<br>A</span>
+        <span class="thirdRowFirstColumn verticalLR font32" data-offset-x="19" data-offset-y="340">A<br>A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="185" data-offset-y="340">A<br>A</span><span class="thirdRowThirdColumn verticalLR font24" data-offset-x="287" data-offset-y="340">A<br>A</span><span class="thirdRowFourthColumn horizontalTB font16" data-offset-x="421" data-offset-y="357">A<br>A</span>
+        <span class="fourthRowFirstColumn verticalLR font24" data-offset-x="27" data-offset-y="458">A<br>A</span><span class="fourthRowSecondColumn horizontalTB font32" data-offset-x="185" data-offset-y="458">A<br>A</span><span class="fourthRowThirdColumn verticalLR font16 extraBottomPadding" data-offset-x="295" data-offset-y="458">A<br>A</span><span class="fourthRowFourthColumn horizontalTB font12 extraTopPadding" data-offset-x="421" data-offset-y="466">A<br>A</span>
+    </div>
+</div>
+
+<br clear="all">
+
+<div style="position: relative">
+    <div class="grid fit-content itemsBaseline">
+        <span class="firstRowFirstColumn verticalLR font12 extraTopPadding" data-offset-x="37" data-offset-y="10">A<br>A</span><span class="firstRowSecondColumn horizontalTB font16 extraBottomPadding" data-offset-x="183" data-offset-y="35">A<br>A</span><span class="firstRowThirdColumn verticalLR font24" data-offset-x="371" data-offset-y="10">A<br>A</span><span class="firstRowFourthColumn horizontalTB font32" data-offset-x="505" data-offset-y="10">A<br>A</span>
+        <span class="secondRowFirstColumn horizontalTB font16" data-offset-x="17" data-offset-y="192">A<br>A</span><span class="secondRowSecondColumn verticalLR font24" data-offset-x="191" data-offset-y="175">A<br>A</span><span class="secondRowThirdColumn horizontalTB font12 extraTopPadding" data-offset-x="349" data-offset-y="175">A<br>A</span><span class="secondRowFourthColumn verticalLR font32" data-offset-x="505" data-offset-y="175">A<br>A</span>
+        <span class="thirdRowFirstColumn verticalLR font32" data-offset-x="17" data-offset-y="293">A<br>A</span><span class="thirdRowSecondColumn horizontalTB font12 extraTopPadding" data-offset-x="183" data-offset-y="300">A<br>A</span><span class="thirdRowThirdColumn verticalLR font24 extraLeftPadding" data-offset-x="349" data-offset-y="293">A<br>A</span><span class="thirdRowFourthColumn horizontalTB font16 extraTopPadding" data-offset-x="505" data-offset-y="293">A<br>A</span>
+        <span class="fourthRowFirstColumn horizontalTB font24" data-offset-x="17" data-offset-y="418">A<br>A</span><span class="fourthRowSecondColumn verticalLR font32" data-offset-x="183" data-offset-y="418">A<br>A</span><span class="fourthRowThirdColumn horizontalTB font16" data-offset-x="349" data-offset-y="430">A<br>A</span><span class="fourthRowFourthColumn verticalLR font12" data-offset-x="525" data-offset-y="418">A<br>A</span>
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-01-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-01-expected.html
new file mode 100644 (file)
index 0000000..e62ec83
--- /dev/null
@@ -0,0 +1,28 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block verticalLR"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block verticalLR"><div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-01.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-01.html
new file mode 100644 (file)
index 0000000..ea04ecb
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item extraLeftPadding">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02-expected.html
new file mode 100644 (file)
index 0000000..ca0c1fd
--- /dev/null
@@ -0,0 +1,31 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.bottom { vertical-align: bottom; }
+</style>
+
+<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block verticalLR"><div class="item bottom horizontalTB">A</div><div class="item">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>
+<div class="block verticalLR"><div class="item bottom horizontalTB extraLeftPadding">A</div><div class="item extraRightPadding">A</div><div class="item bottom horizontalTB">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-02.html
new file mode 100644 (file)
index 0000000..2fd2d3d
--- /dev/null
@@ -0,0 +1,40 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">A</div>
+    <div class="item">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item">A</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">A</div>
+    <div class="item extraRightPadding">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03-expected.html
new file mode 100644 (file)
index 0000000..ecbb931
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { float: left; }
+</style>
+
+<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
+<div class="block verticalLR"><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">A</div><div class="item horizontalTB extraRightPadding">A</div><div class="item horizontalTB">A</div><div class="item horizontalTB">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-03.html
new file mode 100644 (file)
index 0000000..3d9e051
--- /dev/null
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">A</div>
+    <div class="item horizontalTB extraRightPadding">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04-expected.html
new file mode 100644 (file)
index 0000000..41c68f1
--- /dev/null
@@ -0,0 +1,31 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.item { display: inline-block; }
+.top { vertical-align: top; }
+</style>
+
+<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
+<div class="block"><div class="item top verticalLR">A</div><div class="item top verticalLR">A</div><div class="item top verticalLR">A</div><div class="item top verticalLR">A</div></div>
+<div class="block"><div class="item top verticalLR extraTopPadding">A</div><div class="item top verticalLR">A</div><div class="item top verticalLR">A</div><div class="item top verticalLR">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-04.html
new file mode 100644 (file)
index 0000000..8e22866
--- /dev/null
@@ -0,0 +1,40 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item extraTopPadding">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05-expected.html
new file mode 100644 (file)
index 0000000..fbabe5b
--- /dev/null
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
+.item.horizontalTB  { margin: 10px 6px 4px 0px; }
+.top { vertical-align: top; }
+</style>
+
+<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block"><div class="item top verticalLR">A</div><div class="item">A</div><div class="item top verticalLR">A</div><div class="item">A</div></div>
+<div class="block"><div class="item top verticalLR extraTopPadding">A</div><div class="item extraBottomPadding">A</div><div class="item top verticalLR">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-05.html
new file mode 100644 (file)
index 0000000..1e0cbf5
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item extraTopPadding">A</div>
+    <div class="item horizontalTB extraBottomPadding">A</div>
+    <div class="item">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06-expected.html
new file mode 100644 (file)
index 0000000..021a91b
--- /dev/null
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block"><div class="item extraBottomPadding">A</div><div class="item extraTopPadding">A</div><div class="item">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-06.html
new file mode 100644 (file)
index 0000000..d86175c
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraBottomPadding">A</div>
+    <div class="item horizontalTB extraTopPadding">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-07-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-07-expected.html
new file mode 100644 (file)
index 0000000..2efeb1c
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>We have 2 baseline-sharing groups.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block verticalLR"><div class="block1"><div class="item">A</div><div class="item">A</div></div><div class="block2 verticalRL"><div class="item">A</div><div class="item">A</div></div></div>
+<div class="block verticalLR"><div class="block1"><div class="item extraLeftPadding">A</div><div class="item extraRightPadding">A</div></div><div class="block2 verticalRL"><div class="item">A</div><div class="item">A</div></div></div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-07.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-lr-07.html
new file mode 100644 (file)
index 0000000..16d0bc0
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>We have 2 baseline-sharing groups.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item extraLeftPadding">A</div>
+    <div class="item extraRightPadding">A</div>
+    <div class="item verticalRL">A</div>
+    <div class="item verticalRL">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-01-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-01-expected.html
new file mode 100644 (file)
index 0000000..e8f031e
--- /dev/null
@@ -0,0 +1,28 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block verticalRL"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block verticalRL"><div class="item extraLeftPadding">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-01.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-01.html
new file mode 100644 (file)
index 0000000..b524706
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item extraLeftPadding">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02-expected.html
new file mode 100644 (file)
index 0000000..7d0ce60
--- /dev/null
@@ -0,0 +1,31 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.top { vertical-align: top; }
+</style>
+
+<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block verticalRL"><div class="item top horizontalTB">A</div><div class="item">A</div><div class="item top horizontalTB">A</div><div class="item">A</div></div>
+<div class="block verticalRL"><div class="item top horizontalTB extraLeftPadding">A</div><div class="item extraRightPadding">A</div><div class="item top horizontalTB">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-02.html
new file mode 100644 (file)
index 0000000..2389ee0
--- /dev/null
@@ -0,0 +1,40 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">A</div>
+    <div class="item">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item">A</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">A</div>
+    <div class="item extraRightPadding">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03-expected.html
new file mode 100644 (file)
index 0000000..d24c8e7
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.top { vertical-align: top; }
+</style>
+
+<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
+<div class="block verticalRL"><div class="item top horizontalTB">A</div><div class="item top horizontalTB">A</div><div class="item top horizontalTB">A</div><div class="item top horizontalTB">A</div></div>
+<div class="block verticalRL"><div class="item top horizontalTB extraLeftPadding">A</div><div class="item top horizontalTB extraRightPadding">A</div><div class="item top horizontalTB">A</div><div class="item top horizontalTB">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-03.html
new file mode 100644 (file)
index 0000000..2fc06a6
--- /dev/null
@@ -0,0 +1,41 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items. <br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">A</div>
+    <div class="item horizontalTB extraRightPadding">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04-expected.html
new file mode 100644 (file)
index 0000000..81f185d
--- /dev/null
@@ -0,0 +1,31 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.top { vertical-align: top; }
+</style>
+
+<p>4x1 with parallel items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
+<div class="block directionRTL"><div class="item top verticalRL">A</div><div class="item top verticalRL">A</div><div class="item top verticalRL">A</div><div class="item top verticalRL">A</div></div>
+<div class="block directionRTL"><div class="item top verticalRL extraBottomPadding">A</div><div class="item top verticalRL">A</div><div class="item top verticalRL">A</div><div class="item top verticalRL">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-04.html
new file mode 100644 (file)
index 0000000..7891a3d
--- /dev/null
@@ -0,0 +1,40 @@
+ <!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>4x1 with parallel items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item extraBottomPadding">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05-expected.html
new file mode 100644 (file)
index 0000000..8ac195b
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.top { vertical-align: top; }
+</style>
+
+<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block directionRTL"><div class="item top verticalRL">A</div><div class="item">A</div><div class="item top verticalRL">A</div><div class="item">A</div></div>
+<div class="block directionRTL"><div class="item top verticalRL extraTopPadding">A</div><div class="item extraBottomPadding">A</div><div class="item top verticalRL">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-05.html
new file mode 100644 (file)
index 0000000..cd22895
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items. <br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item extraTopPadding">A</div>
+    <div class="item horizontalTB extraBottomPadding">A</div>
+    <div class="item">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06-expected.html
new file mode 100644 (file)
index 0000000..43f7ff1
--- /dev/null
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block directionRTL"><div class="item">A</div><div class="item">A</div><div class="item">A</div><div class="item">A</div></div>
+<div class="block directionRTL"><div class="item extraBottomPadding">A</div><div class="item extraTopPadding">A</div><div class="item">A</div><div class="item">A</div></div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-06.html
new file mode 100644 (file)
index 0000000..8751831
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.<br>No item shares any row-like Baseline Context. All items share 'first-column' Baseline Context.<br>Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraBottomPadding">A</div>
+    <div class="item horizontalTB extraTopPadding">A</div>
+    <div class="item horizontalTB">A</div>
+    <div class="item horizontalTB">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-07-expected.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-07-expected.html
new file mode 100644 (file)
index 0000000..5327e09
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>We have 2 baseline-sharing groups.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block verticalRL"><div class="block1"><div class="item">A</div><div class="item">A</div></div><div class="block2 verticalLR"><div class="item">A</div><div class="item">A</div></div></div>
+<div class="block verticalRL"><div class="block1"><div class="item extraLeftPadding">A</div><div class="item extraRightPadding">A</div></div><div class="block2 verticalLR"><div class="item">A</div><div class="item">A</div></div></div></div>
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-07.html b/LayoutTests/fast/css-grid-layout/grid-self-baseline-vertical-rl-07.html
new file mode 100644 (file)
index 0000000..17f7214
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.<br>All items share 'first-row' Baseline Context. No item shares any column-like Baseline Context.<br>We have 2 baseline-sharing groups.<br>Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply.<br>The Baseline Alignment may increase size contribution of some items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item">A</div>
+    <div class="item">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR">A</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item extraLeftPadding">A</div>
+    <div class="item extraRightPadding">A</div>
+    <div class="item verticalLR">A</div>
+    <div class="item verticalLR">A</div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-shorthands-style-format-expected.txt b/LayoutTests/fast/css-grid-layout/grid-shorthands-style-format-expected.txt
new file mode 100644 (file)
index 0000000..c278ea5
--- /dev/null
@@ -0,0 +1,35 @@
+Test that the format of grid shorthands style uses slashes as expected
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+Test grid-column shorthand
+PASS item.style.gridColumn is "1 / auto"
+PASS item.style.gridColumn is "1 / 3"
+PASS item.style.gridColumn is "1 / span 2"
+PASS item.style.gridColumn is "foo / bar"
+PASS item.style.gridColumn is "foo / span bar"
+PASS item.style.gridColumn is "2 foo / span 3 bar"
+Test grid-row shorthand
+PASS item.style.gridRow is "1 / auto"
+PASS item.style.gridRow is "1 / 3"
+PASS item.style.gridRow is "1 / span 2"
+PASS item.style.gridRow is "foo / bar"
+PASS item.style.gridRow is "foo / span bar"
+PASS item.style.gridRow is "2 foo / span 3 bar"
+Test grid-area shorthand
+PASS item.style.gridArea is "1 / auto / auto / auto"
+PASS item.style.gridArea is "1 / 3 / auto / auto"
+PASS item.style.gridArea is "1 / span 2 / auto / auto"
+PASS item.style.gridArea is "foo / foo / foo / foo"
+PASS item.style.gridArea is "foo / bar / foo / bar"
+PASS item.style.gridArea is "2 foo / span 3 bar / auto / auto"
+PASS item.style.gridArea is "1 / 2 / 3 / auto"
+PASS item.style.gridArea is "1 / 3 / 2 / 4"
+PASS item.style.gridArea is "1 / span 2 / 1 / span 2"
+PASS item.style.gridArea is "foo / bar / baz / qux"
+PASS item.style.gridArea is "foo / span bar / baz / span qux"
+PASS item.style.gridArea is "2 foo / span 3 bar / 3 baz / span 2 qux"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-shorthands-style-format.html b/LayoutTests/fast/css-grid-layout/grid-shorthands-style-format.html
new file mode 100644 (file)
index 0000000..719f532
--- /dev/null
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<div class="grid">
+    <div id="item"></div>
+</div>
+<script src="../../resources/js-test.js"></script>
+<script>
+    description('Test that the format of grid shorthands style uses slashes as expected');
+
+    var item = document.getElementById("item");
+
+    debug("Test grid-column shorthand");
+    item.style.gridColumn = "1";
+    shouldBeEqualToString("item.style.gridColumn", "1 / auto");
+    item.style.gridColumn = "1 / 3";
+    shouldBeEqualToString("item.style.gridColumn", "1 / 3");
+    item.style.gridColumn = "1 / span 2";
+    shouldBeEqualToString("item.style.gridColumn", "1 / span 2");
+    item.style.gridColumn = "foo / bar";
+    shouldBeEqualToString("item.style.gridColumn", "foo / bar");
+    item.style.gridColumn = "foo / span bar";
+    shouldBeEqualToString("item.style.gridColumn", "foo / span bar");
+    item.style.gridColumn = "2 foo / span 3 bar";
+    shouldBeEqualToString("item.style.gridColumn", "2 foo / span 3 bar");
+
+    debug("Test grid-row shorthand");
+    item.style.gridRow = "1";
+    shouldBeEqualToString("item.style.gridRow", "1 / auto");
+    item.style.gridRow = "1 / 3";
+    shouldBeEqualToString("item.style.gridRow", "1 / 3");
+    item.style.gridRow = "1 / span 2";
+    shouldBeEqualToString("item.style.gridRow", "1 / span 2");
+    item.style.gridRow = "foo / bar";
+    shouldBeEqualToString("item.style.gridRow", "foo / bar");
+    item.style.gridRow = "foo / span bar";
+    shouldBeEqualToString("item.style.gridRow", "foo / span bar");
+    item.style.gridRow = "2 foo / span 3 bar";
+    shouldBeEqualToString("item.style.gridRow", "2 foo / span 3 bar");
+
+    debug("Test grid-area shorthand");
+    item.style.gridArea = "1";
+    shouldBeEqualToString("item.style.gridArea", "1 / auto / auto / auto");
+    item.style.gridArea = "1 / 3";
+    shouldBeEqualToString("item.style.gridArea", "1 / 3 / auto / auto");
+    item.style.gridArea = "1 / span 2";
+    shouldBeEqualToString("item.style.gridArea", "1 / span 2 / auto / auto");
+    item.style.gridArea = "foo / foo";
+    shouldBeEqualToString("item.style.gridArea", "foo / foo / foo / foo");
+    item.style.gridArea = "foo / bar";
+    shouldBeEqualToString("item.style.gridArea", "foo / bar / foo / bar");
+    item.style.gridArea = "2 foo / span 3 bar";
+    shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar / auto / auto");
+    item.style.gridArea = "1 / 2 / 3";
+    shouldBeEqualToString("item.style.gridArea", "1 / 2 / 3 / auto");
+    item.style.gridArea = "1 / 3 / 2 / 4";
+    shouldBeEqualToString("item.style.gridArea", "1 / 3 / 2 / 4");
+    item.style.gridArea = "1 / span 2 / 1 / span 2";
+    shouldBeEqualToString("item.style.gridArea", "1 / span 2 / 1 / span 2");
+    item.style.gridArea = "foo / bar / baz / qux";
+    shouldBeEqualToString("item.style.gridArea", "foo / bar / baz / qux");
+    item.style.gridArea = "foo / span bar / baz / span qux";
+    shouldBeEqualToString("item.style.gridArea", "foo / span bar / baz / span qux");
+    item.style.gridArea = "2 foo / span 3 bar / 3 baz / span 2 qux";
+    shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar / 3 baz / span 2 qux");
+
+</script>
diff --git a/LayoutTests/fast/css-grid-layout/grid-strict-ordering-crash-2-expected.txt b/LayoutTests/fast/css-grid-layout/grid-strict-ordering-crash-2-expected.txt
new file mode 100644 (file)
index 0000000..8587972
--- /dev/null
@@ -0,0 +1,4 @@
+if (window.testRunner) testRunner.dumpAsText();
+body { grid-column-end:span 200; } * { display:inline-grid; grid-column-start:foo; }
+
+This test has PASSED if it does not CRASH.
diff --git a/LayoutTests/fast/css-grid-layout/grid-strict-ordering-crash-2.html b/LayoutTests/fast/css-grid-layout/grid-strict-ordering-crash-2.html
new file mode 100644 (file)
index 0000000..eff32ba
--- /dev/null
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+</script>
+<li></li>
+<style>
+body {
+    grid-column-end:span 200;
+}
+* {
+    display:inline-grid;
+    grid-column-start:foo;
+}
+</style>
+<p><br>This test has PASSED if it does not CRASH.</p>
diff --git a/LayoutTests/fast/css-grid-layout/named-grid-areas-dynamic-with-media-query-expected.html b/LayoutTests/fast/css-grid-layout/named-grid-areas-dynamic-with-media-query-expected.html
new file mode 100644 (file)
index 0000000..9bcdf86
--- /dev/null
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.one   { background-color: beige; width: 50%; }
+.two   { background-color: antiquewhite; width: 25%; }
+.three { background-color: bisque; width: 25%; }
+.one, .two, .three { min-height: 100px; float: left; }
+</style>
+<body>
+<p>The test passes if you see 3 blocks bellow arranged on a single row</p>
+<div class="one"></div>
+<div class="two"></div>
+<div class="three"></div>
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/named-grid-areas-dynamic-with-media-query.html b/LayoutTests/fast/css-grid-layout/named-grid-areas-dynamic-with-media-query.html
new file mode 100644 (file)
index 0000000..71074f2
--- /dev/null
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+.grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+
+    grid-template-areas: "one"
+                         "two"
+                         "three";
+}
+
+.one {
+    grid-area: one;
+    background-color: beige;
+}
+
+.two {
+    grid-area: two;
+    background-color: antiquewhite;
+}
+
+.three {
+    grid-area: three;
+    background-color: bisque;
+}
+
+.one, .two, .three { min-height: 100px; }
+
+@media screen and (min-width: 500px) {
+    .grid {
+       grid-template-columns: 1fr 1fr;
+       grid-template-areas: "one one"
+                            "two three";
+  }
+}
+
+@media screen and (min-width: 700px) {
+    .grid {
+       grid-template-columns: 2fr 1fr 1fr;
+       grid-template-areas: "one two three";
+    }
+}
+</style>
+</head>
+<body>
+<p>The test passes if you see 3 blocks bellow arranged on a single row</p>
+<div class="grid">
+    <div class="one"></div>
+    <div class="two"></div>
+    <div class="three"></div>
+</div>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/negative-growth-share-as-infinity-crash-expected.txt b/LayoutTests/fast/css-grid-layout/negative-growth-share-as-infinity-crash-expected.txt
new file mode 100644 (file)
index 0000000..6e0a833
--- /dev/null
@@ -0,0 +1,9 @@
+PASS window.getComputedStyle(grid, '').getPropertyValue('grid-template-rows') is "10px"
+PASS window.getComputedStyle(grid, '').getPropertyValue('grid-template-rows') is "20px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+The test has passed if it does not CRASH in Debug builds.
+
+XXXX
+XXXX XXXX
diff --git a/LayoutTests/fast/css-grid-layout/negative-growth-share-as-infinity-crash.html b/LayoutTests/fast/css-grid-layout/negative-growth-share-as-infinity-crash.html
new file mode 100644 (file)
index 0000000..2aa26cf
--- /dev/null
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    grid-auto-rows: minmax(min-content, 9px);
+    grid-auto-columns: min-content;
+    height: 10px;
+}
+.firstRowFirstColumn {
+    font: 10px/1 Ahem;
+}
+</style>
+<script src="../../resources/js-test.js"></script>
+<script type="text/javascript">
+if (window.testRunner)
+    testRunner.dumpAsText();
+ document.addEventListener("DOMContentLoaded", crash, false);
+
+function crash() {
+    var grid = document.getElementById("grid");
+    shouldBeEqualToString("window.getComputedStyle(grid, '').getPropertyValue('grid-template-rows')", "10px");
+
+    var child = document.createElement("div");
+    child.className = "firstRowFirstColumn";
+    child.innerHTML = "XXXX XXXX";
+    grid.appendChild(child);
+    shouldBeEqualToString("window.getComputedStyle(grid, '').getPropertyValue('grid-template-rows')", "20px");
+}
+</script>
+</head>
+<body>
+    <p>The test has passed if it does not CRASH in Debug builds.</p>
+    <div class="grid" id="grid">
+       <div class="firstRowFirstColumn">XXXX</div>
+    </div>
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/painting-item-marginbox-overflowing-grid-area-expected.html b/LayoutTests/fast/css-grid-layout/painting-item-marginbox-overflowing-grid-area-expected.html
new file mode 100644 (file)
index 0000000..80ac2cb
--- /dev/null
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+
+<p>Test PASS if you see two adjacent iframes with a 50x50 green square.</p>
+
+<iframe height="120px" width="300px" srcdoc="
+     <div style='background: green;  width: 50px; height: 50px; margin-left: 100px;'></div>
+     ">
+</iframe>
+
+<iframe height="120px" width="300px" srcdoc="
+     <div style='background: green; width: 50px; height: 50px; margin-left: 134px;'></div>
+     ">
+</iframe>
+
diff --git a/LayoutTests/fast/css-grid-layout/painting-item-marginbox-overflowing-grid-area.html b/LayoutTests/fast/css-grid-layout/painting-item-marginbox-overflowing-grid-area.html
new file mode 100644 (file)
index 0000000..4ded6ac
--- /dev/null
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+<p>Test PASS if you see two adjacent iframes with a 50x50 green square.</p>
+
+<iframe height="120px" width="300px" srcdoc="
+     <style>
+     .grid {
+         display: grid;
+         grid: 50px / 100px 50px 150px 100px;
+     }
+     </style>
+
+     <div class='grid'>
+         <div style='background: red; grid-column: 2;'></div>
+         <div style='background: green;  grid-column: 4; width: 50px; margin-left: -200px;'></div>
+     </div>
+     ">
+</iframe>
+
+<iframe height="120px" width="300px" srcdoc="
+     <style>
+     .grid {
+         display: grid;
+         grid: 50px / 100px 50px 150px 100px;
+         direction: rtl;
+     }
+     </style>
+
+     <div class='grid'>
+         <div style='background: red; grid-column: 2;'></div>
+         <div style='background: green;  grid-column: 4; width: 50px; margin-right: -200px;'></div>
+     </div>
+     ">
+</iframe>
+
diff --git a/LayoutTests/fast/css-grid-layout/positioned-grid-container-item-percentage-size-expected.html b/LayoutTests/fast/css-grid-layout/positioned-grid-container-item-percentage-size-expected.html
new file mode 100644 (file)
index 0000000..e1440fc
--- /dev/null
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+
+<style>
+.green100x100 {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+
+<p>This test checks that percentage on the grid item are resolved against the grid area, despite the grid container being positioned with definite width and height.</p>
+<p>Test passes if you see a 100x100 green box.</p>
+
+<div class="green100x100"></div>
diff --git a/LayoutTests/fast/css-grid-layout/positioned-grid-container-item-percentage-size.html b/LayoutTests/fast/css-grid-layout/positioned-grid-container-item-percentage-size.html
new file mode 100644 (file)
index 0000000..1b06b07
--- /dev/null
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<style>
+
+.wrapper {
+    width: 400px;
+    height: 400px;
+    position: relative;
+}
+
+.grid {
+    display: grid;
+    grid: 200px / 200px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.gridItem {
+    width: 50%;
+    height: 50%;
+    background-color: green;
+}
+
+</style>
+
+<p>This test checks that percentage on the grid item are resolved against the grid area, despite the grid container being positioned with definite width and height.</p>
+<p>Test passes if you see a 100x100 green box.</p>
+
+<div class="wrapper">
+    <div class="grid">
+        <div class="gridItem"></div>
+    </div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/positioned-grid-container-percentage-tracks-expected.txt b/LayoutTests/fast/css-grid-layout/positioned-grid-container-percentage-tracks-expected.txt
new file mode 100644 (file)
index 0000000..30e2c6a
--- /dev/null
@@ -0,0 +1,17 @@
+
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
+This test checks that percentage tracks are properly resolved for absolute positioned grid containers.
+
+XXX
+XXX
+XXX
+XXX
+XXX
+XXX
+XXX
+XXX
+XXX
+XXX
diff --git a/LayoutTests/fast/css-grid-layout/positioned-grid-container-percentage-tracks.html b/LayoutTests/fast/css-grid-layout/positioned-grid-container-percentage-tracks.html
new file mode 100644 (file)
index 0000000..54bbe75
--- /dev/null
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.wrapper {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    margin: 10px;
+}
+
+.grid {
+    position: absolute;
+    font: 10px/1 Ahem;
+}
+
+.grid > div {
+    min-width: 0px;
+}
+
+.topBottomLeftRight {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.oneRowOneColumn {
+    grid-template-rows: 100%;
+    grid-template-columns: 100%;
+}
+
+.twoRowsTwoColumns {
+    grid-template-rows: 25% 75%;
+    grid-template-columns: 60% 40%;
+}
+
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that percentage tracks are properly resolved for absolute positioned grid containers.</p>
+
+
+<div class="wrapper">
+    <div class="grid oneRowOneColumn">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10">
+            XXX
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid oneRowOneColumn topBottomLeftRight">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">
+            XXX
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid twoRowsTwoColumns">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="36" data-expected-height="5">
+            XXX
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="36" data-offset-y="0" data-expected-width="24" data-expected-height="5">
+            XXX
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="5" data-expected-width="36" data-expected-height="15">
+            XXX
+        </div>
+        <div class="secondRowSecondColumn"
+            data-offset-x="36" data-offset-y="5" data-expected-width="24" data-expected-height="15">
+            XXX
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid twoRowsTwoColumns topBottomLeftRight">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25">
+            XXX
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="60" data-offset-y="0" data-expected-width="40" data-expected-height="25">
+            XXX
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="25" data-expected-width="60" data-expected-height="75">
+            XXX
+        </div>
+        <div class="secondRowSecondColumn"
+            data-offset-x="60" data-offset-y="25" data-expected-width="40" data-expected-height="75">
+            XXX
+        </div>
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/quirks-mode-percent-resolution-grid-item-expected.txt b/LayoutTests/fast/css-grid-layout/quirks-mode-percent-resolution-grid-item-expected.txt
new file mode 100644 (file)
index 0000000..014a42a
--- /dev/null
@@ -0,0 +1,6 @@
+Test that resolving percent lengths on grid items works properly on a fixed grid with different writing modes in quirks mode.
+
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/quirks-mode-percent-resolution-grid-item.html b/LayoutTests/fast/css-grid-layout/quirks-mode-percent-resolution-grid-item.html
new file mode 100644 (file)
index 0000000..0581166
--- /dev/null
@@ -0,0 +1,57 @@
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+    grid-template-columns: 100px 300px;
+    grid-template-rows: 50px 150px;
+}
+
+.percentWidth {
+    width: 100%;
+    height: 15px;
+}
+
+.percentHeight {
+    width: 15px;
+    height: 100%;
+}
+
+.percentHeightAndWidth {
+    width: 100%;
+    height: 100%;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>Test that resolving percent lengths on grid items works properly on a fixed grid with different writing modes in quirks mode.</p>
+
+<div class="grid">
+    <div class="firstRowFirstColumn percentWidth" data-expected-width="100" data-expected-height="15"></div>
+    <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="50"></div>
+    <div class="secondRowFirstColumn percentHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
+    <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
+</div>
+
+<div class="grid verticalRL">
+    <div class="firstRowFirstColumn percentWidth" data-expected-width="50" data-expected-height="15"></div>
+    <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="300"></div>
+    <div class="secondRowFirstColumn percentHeightAndWidth" data-expected-width="150" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="150" data-expected-height="300"></div>
+</div>
+
+<div class="grid">
+    <div class="firstRowFirstColumn percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
+    <div class="firstRowSecondColumn percentHeight verticalRL" data-expected-width="15" data-expected-height="50"></div>
+    <div class="secondRowFirstColumn percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
+    <div class="secondRowSecondColumn percentHeightAndWidth verticalRL" data-expected-width="300" data-expected-height="150"></div>
+</div>
+
+<div class="grid">
+    <div class="firstRowFirstColumn percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
+    <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="50"></div>
+    <div class="secondRowFirstColumn percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
+    <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
+</div>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/resources/blue-100x50.png b/LayoutTests/fast/css-grid-layout/resources/blue-100x50.png
new file mode 100644 (file)
index 0000000..e8be816
Binary files /dev/null and b/LayoutTests/fast/css-grid-layout/resources/blue-100x50.png differ
index 830fac3..67bd6fc 100644 (file)
@@ -75,3 +75,21 @@ function testGridGapDefinitionsValues(element, computedRowGap, computedColumnGap
     shouldBeEqualToString("window.getComputedStyle(" + element + ", '').getPropertyValue('grid-row-gap')", computedRowGap);
     shouldBeEqualToString("window.getComputedStyle(" + element + ", '').getPropertyValue('grid-column-gap')", computedColumnGap);
 }
     shouldBeEqualToString("window.getComputedStyle(" + element + ", '').getPropertyValue('grid-row-gap')", computedRowGap);
     shouldBeEqualToString("window.getComputedStyle(" + element + ", '').getPropertyValue('grid-column-gap')", computedColumnGap);
 }
+
+function testGridPositionDefinitionsValues(
+    element, computedRowStart, computedRowEnd, computedColumnStart,
+    computedColumnEnd) {
+  assert_equals(
+      window.getComputedStyle(element, '').getPropertyValue('grid-row-start'),
+      computedRowStart, 'row-start');
+  assert_equals(
+      window.getComputedStyle(element, '').getPropertyValue('grid-row-end'),
+      computedRowEnd, 'row-end');
+  assert_equals(
+      window.getComputedStyle(element, '')
+          .getPropertyValue('grid-column-start'),
+      computedColumnStart, 'column-start');
+  assert_equals(
+      window.getComputedStyle(element, '').getPropertyValue('grid-column-end'),
+      computedColumnEnd, 'column-end');
+}
diff --git a/LayoutTests/fast/css-grid-layout/scrolled-grid-painting-expected.html b/LayoutTests/fast/css-grid-layout/scrolled-grid-painting-expected.html
new file mode 100644 (file)
index 0000000..569dc3b
--- /dev/null
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<body>
+<style>
+    .gridItem {
+        height: 100px;
+        width: 100px;
+        background-color: green;
+    }
+</style>
+<div>This test checks that we correctly paint scrolled grid container.</div>
+<div>There should be no red below.</div>
+
+<div>Default writing mode (horizontal-lr)</div>
+
+<div class="gridItem"></div>
+<div class="gridItem"></div>
+<div class="gridItem"></div>
+<div class="gridItem"></div>
+
+
+<div>Flipped writing mode (vertical-rl)</div>
+
+<div class="gridItem"></div>
+<div class="gridItem"></div>
+<div class="gridItem"></div>
+<div class="gridItem"></div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/scrolled-grid-painting-overflow-expected.html b/LayoutTests/fast/css-grid-layout/scrolled-grid-painting-overflow-expected.html
new file mode 100644 (file)
index 0000000..81247ed
--- /dev/null
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<body>
+<style>
+    .gridItem {
+        height: 100px;
+        width: 100px;
+        background-color: green;
+    }
+</style>
+<div>This test checks that we correctly paint scrolled grid container.</div>
+<div>There should be no red below.</div>
+
+<div>Default writing mode (horizontal-lr)</div>
+
+<div class="gridItem"></div>
+<div class="gridItem"></div>
+<div class="gridItem"></div>
+
+
+<div>Flipped writing mode (vertical-rl)</div>
+
+<div class="gridItem"></div>
+<div class="gridItem"></div>
+<div class="gridItem"></div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/scrolled-grid-painting-overflow.html b/LayoutTests/fast/css-grid-layout/scrolled-grid-painting-overflow.html
new file mode 100644 (file)
index 0000000..76f3ebd
--- /dev/null
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<body>
+<style>
+    .grid {
+        grid-template-rows: repeat(5, 100px);
+        grid-template-columns: repeat(5, 100px);
+        background-color: red;
+    }
+
+    .gridItem {
+        height: 100%;
+        width: 100%;
+        background-color: purple;
+    }
+
+    .scrolledDiv {
+        height: 100px;
+        width: 100px;
+        overflow: hidden;
+    }
+</style>
+<div>This test checks that we correctly paint scrolled grid container.</div>
+<div>There should be no red below.</div>
+
+<div>Default writing mode (horizontal-lr)</div>
+
+<!-- An item in the middle of the grid. -->
+<div class="scrolledDiv" data-scroll-top="200" data-scroll-left="100">
+    <div class="grid fit-content">
+        <div class="gridItem" style="grid-column: 2; grid-row: 2; border-bottom: 100px green solid;"></div>
+    </div>
+</div>
+
+<!-- Bottom-right corner of the grid. -->
+<div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
+    <div class="grid fit-content">
+        <div class="gridItem" style="grid-column: 4; grid-row: 5; border-right: 100px green solid;"></div>
+    </div>
+</div>
+
+<!-- Bottom-right corner of the grid. -->
+<div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
+    <div class="grid fit-content">
+        <div class="gridItem" style="grid-column: 4; grid-row: 5; border-left: 100px purple solid; background-color: green;"></div>
+    </div>
+</div>
+
+<div>Flipped writing mode (vertical-rl)</div>
+
+<!-- An item in the middle of the grid. -->
+<div class="scrolledDiv" data-scroll-top="100" data-scroll-left="200">
+    <div class="grid fit-content verticalLR">
+        <div class="gridItem" style="grid-column: 2; grid-row: 2; border-right: 100px green solid;"></div>
+    </div>
+</div>
+
+<!-- Bottom-right corner of the grid. -->
+<div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
+    <div class="grid fit-content verticalLR">
+        <div class="gridItem" style="grid-column: 4; grid-row: 5; border-bottom: 100px green solid;"></div>
+    </div>
+</div>
+
+<!-- Bottom-right corner of the grid. -->
+<div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
+    <div class="grid fit-content verticalLR">
+        <div class="gridItem" style="grid-column: 4; grid-row: 5; border-top: 100px purple solid; background-color: green;"></div>
+    </div>
+</div>
+
+
+<script>
+    var scrolledDivs = document.getElementsByClassName("scrolledDiv");
+    for (i = 0; i < scrolledDivs.length; ++i) {
+        scrolledDiv = scrolledDivs[i];
+        scrolledDiv.scrollTop = scrolledDiv.getAttribute("data-scroll-top");
+        scrolledDiv.scrollLeft = scrolledDiv.getAttribute("data-scroll-left");
+    }
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/scrolled-grid-painting.html b/LayoutTests/fast/css-grid-layout/scrolled-grid-painting.html
new file mode 100644 (file)
index 0000000..bd158fe
--- /dev/null
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="resources/grid.css" rel="stylesheet">
+<body>
+<style>
+    .grid {
+        grid-template-rows: repeat(5, 100px);
+        grid-template-columns: repeat(5, 100px);
+        background-color: red;
+    }
+
+    .gridItem {
+        height: 100%;
+        width: 100%;
+        background-color: green;
+    }
+
+    .scrolledDiv {
+        height: 100px;
+        width: 100px;
+        overflow: hidden;
+    }
+</style>
+<div>This test checks that we correctly paint scrolled grid container.</div>
+<div>There should be no red below.</div>
+
+<div>Default writing mode (horizontal-lr)</div>
+
+<!-- An item in the middle of the grid. -->
+<div class="scrolledDiv" data-scroll-top="200" data-scroll-left="100">
+    <div class="grid fit-content">
+        <div class="gridItem" style="grid-column: 2; grid-row: 3"></div>
+    </div>
+</div>
+
+<!-- Bottom-right corner of the grid. -->
+<div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
+    <div class="grid fit-content">
+        <div class="gridItem" style="grid-column: 5; grid-row: 5"></div>
+    </div>
+</div>
+
+<!-- Scroll between 2 horizontal grid items. -->
+<div class="scrolledDiv" data-scroll-top="400" data-scroll-left="150">
+    <div class="grid fit-content">
+        <div class="gridItem" style="grid-column: 2; grid-row: 5"></div>
+        <div class="gridItem" style="grid-column: 3; grid-row: 5"></div>
+    </div>
+</div>
+
+<!-- Scroll between 2 vertical grid items. -->
+<div class="scrolledDiv" data-scroll-top="150" data-scroll-left="400">
+    <div class="grid fit-content">
+        <div class="gridItem" style="grid-column: 5; grid-row: 2"></div>
+        <div class="gridItem" style="grid-column: 5; grid-row: 3"></div>
+    </div>
+</div>
+
+
+<div>Flipped writing mode (vertical-rl)</div>
+
+
+<!-- An item in the middle of the grid. -->
+<div class="scrolledDiv" data-scroll-top="100" data-scroll-left="200">
+    <div class="grid fit-content verticalLR">
+        <div class="gridItem" style="grid-column: 2; grid-row: 3"></div>
+    </div>
+</div>
+
+<!-- Bottom-right corner of the grid. -->
+<div class="scrolledDiv" data-scroll-top="400" data-scroll-left="400">
+    <div class="grid fit-content verticalLR">
+        <div class="gridItem" style="grid-column: 5; grid-row: 5"></div>
+    </div>
+</div>
+
+<!-- Scroll between 2 vertical grid items. -->
+<div class="scrolledDiv" data-scroll-top="150" data-scroll-left="400">
+    <div class="grid fit-content verticalLR">
+        <div class="gridItem" style="grid-column: 2; grid-row: 5"></div>
+        <div class="gridItem" style="grid-column: 3; grid-row: 5"></div>
+    </div>
+</div>
+
+<!-- Scroll between 2 horizontal grid items. -->
+<div class="scrolledDiv" data-scroll-top="400" data-scroll-left="150">
+    <div class="grid fit-content verticalLR">
+        <div class="gridItem" style="grid-column: 5; grid-row: 2"></div>
+        <div class="gridItem" style="grid-column: 5; grid-row: 3"></div>
+    </div>
+</div>
+
+<script>
+    var scrolledDivs = document.getElementsByClassName("scrolledDiv");
+    for (i = 0; i < scrolledDivs.length; ++i) {
+        scrolledDiv = scrolledDivs[i];
+        scrolledDiv.scrollTop = scrolledDiv.getAttribute("data-scroll-top");
+        scrolledDiv.scrollLeft = scrolledDiv.getAttribute("data-scroll-left");
+    }
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/setting-node-properties-to-null-during-layout-should-not-crash-expected.txt b/LayoutTests/fast/css-grid-layout/setting-node-properties-to-null-during-layout-should-not-crash-expected.txt
new file mode 100644 (file)
index 0000000..4900486
--- /dev/null
@@ -0,0 +1,3 @@
+This test passes if it does not crash.
+
+
diff --git a/LayoutTests/fast/css-grid-layout/setting-node-properties-to-null-during-layout-should-not-crash.html b/LayoutTests/fast/css-grid-layout/setting-node-properties-to-null-during-layout-should-not-crash.html
new file mode 100644 (file)
index 0000000..889a280
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<script>
+if (window.testRunner) {
+    testRunner.dumpAsText();
+}
+</script>
+<script>
+function nullifyNodeProperties(node) {
+  for (var key in node) {
+    try {
+      var a = node[key];
+      node[key] = null;
+    } catch (e) {
+    }
+  }
+}
+
+function runTest() {
+   document.body.offsetLeft;
+
+   var element = document.getElementById("node");
+   nullifyNodeProperties(element);
+}
+</script>
+<body onload="runTest();">
+<p>This test passes if it does not crash.</p>
+<div class="grid verticalRL fit-content">
+    <div id="node" class="horizontalTB"></div>
+</div>
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/stale-grid-layout-2-expected.txt b/LayoutTests/fast/css-grid-layout/stale-grid-layout-2-expected.txt
new file mode 100644 (file)
index 0000000..32d36ec
--- /dev/null
@@ -0,0 +1,4 @@
+XThe test checks that we don't leave stale pointers into the internal grid representation.
+
+ This test has PASSED if it didn't crash under ASAN.
+
diff --git a/LayoutTests/fast/css-grid-layout/stale-grid-layout-expected.txt b/LayoutTests/fast/css-grid-layout/stale-grid-layout-expected.txt
new file mode 100644 (file)
index 0000000..7b8fbf7
--- /dev/null
@@ -0,0 +1,2 @@
+The test checks that we don't add non-children of the grid into the grid representation
+This test has passed if it didn't crash under ASAN.
diff --git a/LayoutTests/fast/css-grid-layout/vertical-align-do-not-effect-grid-items-expected.html b/LayoutTests/fast/css-grid-layout/vertical-align-do-not-effect-grid-items-expected.html
new file mode 100644 (file)
index 0000000..194d94f
--- /dev/null
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link href='resources/grid.css' rel='stylesheet'>
+
+<style>
+.grid {
+  background-color: lightgrey;
+}
+</style>
+
+<p>This test checks that vertical-align should have no effect on a grid item
+i.e grid items' content should not be shifted by the vertical-align</p>
+
+<div class='grid'>
+  <!-- grid item: block child -->
+  <div>block</div>
+  <!-- grid item: anonymous block box around inline content -->
+  anonymous item 2
+  <!-- grid item: inline child -->
+  <span>item 3</span>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/vertical-align-do-not-effect-grid-items.html b/LayoutTests/fast/css-grid-layout/vertical-align-do-not-effect-grid-items.html
new file mode 100644 (file)
index 0000000..3230a3a
--- /dev/null
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link href='resources/grid.css' rel='stylesheet'>
+<style>
+.grid {
+  background-color: lightgrey;
+}
+#item1 {
+  vertical-align: 10px;
+}
+#item3 {
+  vertical-align: 30px;
+}
+</style>
+
+<p>This test checks that vertical-align should have no effect on a grid item
+i.e grid items' content should not be shifted by the vertical-align</p>
+
+<div class='grid'>
+  <!-- grid item: block child -->
+  <div id='item1'>block</div>
+  <!-- grid item: anonymous block box around inline content -->
+  anonymous item 2
+  <!-- grid item: inline child -->
+  <span id='item3'>item 3</span>
+</div>