[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
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 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 ]
@@ -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/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 ]
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
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
 XX X
-PASS
index eb54c6f..36bf2fe 100644 (file)
     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')">
+<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>
 
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>
-<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <style>
 html {
    overflow-x: scroll;
 }
-.container {
+.grid {
+   width: fit-content;
    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>
-<div class="container fit-content">
+<div class="grid">
     <div class="item">item</div>
 </div>
index 0a8182b..4e63adc 100644 (file)
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <style>
 html {
    overflow-x: scroll;
 }
-.container {
+.grid {
    display: grid;
+   width: fit-content;
    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>
-<div class="container fit-content">
+<div class="grid">
     <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.
 
index 79c0f90..c5afdf0 100644 (file)
@@ -3,11 +3,12 @@
   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;">
-  <!-- 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>
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);
 }
+
+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>